1

estoy tratando de encontrar una solucion para la siguiente cuestion, tengo un sitio que llama a un css que se encuentra en otro dominio, al llamarlo todos los valores de url para imagenes como ser background y otros se asocian a la url del host del estilo y no al host del sitio que solicita el css

como ejemplo pongo

http://myserver.com/css/estilo.css

en el sitio test1.myserver.com que tengo llamo a ese estilo con

<link rel="stylesheet" type="text/css" href="https://myserver/css/estilo.css">

dentro de estilo.css tengo

.main{
background-image: 'img/image.png';
}

esto hace que en lugar de traer la imagen desde test1.myserver.com/img/image.png lo trae desde myserver.com/img/image.png

rompiendome la cabeza tratando de encontrar una solucion parecida a la siguiente, pero no encontre la forma de hacerlo, el siguiente codigo estaria alojado en server.com/css/estilo.css.

:root {
  --direc: url('https://test1.myserver.com/img/');
}

.main {
  background-image: var( --direc ) + 'image.png';
}

pero creo que en css no se puede concatenar de esta manera.

espero puedan ayudarme!

Gracias!

4
  • 1. puedes crear un fichero con imágenes idénticas myserver.com/img. 2. puedes sobreescribir solo las reglas donde aparecen imágenes
    – enxaneta
    Commented el 2 abr. 2019 a las 14:49
  • ¿y por qué no usas rutas absolutas?
    – user7176
    Commented el 2 abr. 2019 a las 15:03
  • @blonfu si quiere tener imágenes diferentes dependiendo del dominio que carga el fichero, las rutas absolutas no van a funcionar (porque serían las mismas para todos).
    – Alvaro Montoro
    Commented el 4 abr. 2019 a las 14:35
  • @AlvaroMontoro Ya, supongo que solo quiere cambiar la custom property con el dominio pero no se pueden concatenar strings en css.
    – user7176
    Commented el 4 abr. 2019 a las 14:45

1 respuesta 1

1

Lo que tenías en mente es un buen intento, aunque no va a funcionar por varios motivos.

Primero porque la concatenación en CSS se hace sin el +; simplemente poniendo los valores uno detrás del otro sin ningún operador (los espacios en blanco se ignoran, debes añadirlos como cadena entre las variables). Por ejemplo:

div::before {
  --saludo: "Hola";
  --nombre: "Álvaro";
  content:  var(--saludo) " " var(--nombre);
}
<div></div>

Otro problema del código es que, incluso si la concatenación en CSS se hiciera con el +, la variable --direc contiene el resultado de la función url(), concatenándole una cadena haces que el valor no sea válido, y por tanto tampoco esa propiedad.

Pero el problema principal es que, aunque muchas funciones en CSS van a interpolar los valores que se encuentren, eso no va a ocurrir con url(). La función url() toma todo el contenido como si fuera una url y no procesa los posibles valores o atributos que uses entre los paréntesis. Al usar var() dentro de los paréntesis, la URL generada será incorrecta. No se está haciendo url( con el valor de var(--nombre) dentro seguido de ), sino que se intenta validar la cadena "var(--nombre)" como URL y no funciona.

La idea básica es: no puede hacerse sólo con CSS (al menos de la manera en la que lo estás haciendo). Aquí te dejo algunas alternativas:

  1. Redefine los estilos en un nuevo fichero: Si sabes las reglas que van a necesitar reescribirse, redefínelas en un fichero CSS aparte con las nuevas rutas e importa ese fichero después de importar el otro.

    Ventajas: es 100% CSS y fácil de implementar.
    Inconvenientes: debes conocer las reglas y es difícil de mantener si cambian.

  2. Preprocesa/canaliza el fichero CSS: en lugar de importar el fichero CSS, lee su contenido y sustituye unos dominios por otros. Esto lo podrías hacer con un lenguaje en el lado del servidor o con JavaScript/AJAX. Alternativamente, simplemente lee el contenido y sírvelo como propio (desde el lado del servidor) entonces las rutas serían relativas al dominio que importa en lugar del importado.

    Ventajas: más robusto (sigue funcionando si cambian las reglas).
    Inconvenientes: algo más lento y requiere conocimientos aparte de CSS.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.