localizar rutas de imagen dentro de css

Actualmente estoy trabajando en la localización de mi aplicación, que se basa en .net framework v3.5, que usa la biblioteca del lado del cliente jquery.

Logré localizar con éxito la mayor parte de mi aplicación, en texto de pantalla a través de archivos de recursos, texto del lado del cliente a través de un archivo de recursos javascript e imágenes de marcado html a través del código .net c #.

Al localizar mis imágenes, el cambio simple es actualizar la ruta a la imagen para incluir la carpeta de culturas, por ejemplo. Para inglés - en, español - es, etc. Entonces, una ruta de imagen de muestra sería

/image/folder1/en/image.gif

/image/folder2/es/image.gif

Lo he logrado en mi código .net y todo funciona bien.

Sin embargo, me encontré con un problema. Algunas de mis imágenes son imágenes de fondo configuradas en CSS. Desafortunadamente, esto plantea un problema ya que no puedo localizar algo como esto:

h1 {background-image:url("../../Images/folder1/<<culture>>/image1.gif");background-repeat:no-repeat;

Así que estoy buscando sugerencias sobre cómo podría resolver esto. ¿Puedo pasar un valor de variable javascript al archivo css? Podría crear un httphandler y actualizar mi css antes de renderizar, pero preferiría hacerlo como último recurso, ya que no quiero que todos los archivos css se procesen a través de iis.

Cualquier tip estaría genial.

preguntado el 16 de mayo de 11 a las 17:05

5 Respuestas

Otra posibilidad es establecer el atributo lang para el cuerpo (o elemento HTML de su interés), de modo que la página HTML renderizada muestre algo como esto:

<body lang="es">
  <h1>...</h1>

Luego puede usar el pseudo-selector CSS lang para localizar el contenido:

h1:lang(es) {background-image:url("../../Images/folder1/es/image1.gif");}
h1:lang(en) {background-image:url("../../Images/folder1/en/image1.gif");}

Esta es la forma estándar (como se recomienda en W3C) de localizar archivos CSS.

contestado el 16 de mayo de 11 a las 22:05

Esta parece una solución perfecta. ¿Todos los navegadores lo admiten? - aficionado

Esta es la función CSS2, por lo que, en teoría, todos los navegadores debemos apoyarlo. Sin embargo, para ser honesto, parece que IE9 tiene un problema (las versiones anteriores no). Podría estar relacionado con la declaración (me refiero a DTD), por lo que no puedo estar 100% seguro. Pero IE9 podría cambiarse a la vista de compatibilidad, lo que debería resolver el problema (si lo hubiera). Parece que otros navegadores funcionan. - Paweł Dyda

+1 Me encontré con una solución similar mientras trabajaba en un proyecto específico. Pero esto tiene alguna limitación: quiero decir, si la cantidad de diferencias es demasiado grande, dividir el archivo css original en una base común y varios localizados puede ser más fácil de mantener. - sitifensys

Desafortunadamente, eso es cierto. El uso del mecanismo de localización CSS incorporado podría generar rápidamente archivos CSS inmanejables y que no se pueden mantener. En tal caso, se necesita un mecanismo completo (por ejemplo, servir el contenido de archivos CSS a través de controladores). Desafortunadamente, esto requeriría un gran esfuerzo de implementación ... - Paweł Dyda

Una solución simple podría ser crear otro archivo css para cada idioma que solo incluya las rutas de imagen modificadas y cargarlo después del css principal.

contestado el 16 de mayo de 11 a las 23:05

Si no tiene demasiados elementos con BG imágenes, podrías dar esos elementos class names y codificar el lenguaje ref. P.ej.

h1.engish {background-image:url("../../Images/folder1/en/image1.gif")...; 
h1.spanish {background-image:url("../../Images/folder1/es/image1.gif")...;  

contestado el 16 de mayo de 11 a las 21:05

A menos que esté generando dinámicamente su archivo CSS, no puede pasarle variables.

Sin embargo, puede poner las rutas de la imagen de fondo en línea envolviéndolas en etiquetas.

contestado el 16 de mayo de 11 a las 21:05

Puedes generar el CSS dinámicamente

<link href="sitecss.aspx" type="text/css" rel="stylesheet" />

Entonces en sitecss.aspx puedes hacer lo mismo que haces en el código:

h1 {background-image:url("../../Images/folder1/<%= culture %>/image1.gif");}

Utilice un parámetro diferente al llamar al archivo para evitar el almacenamiento en caché entre culturas:

<link href="sitecss.aspx?culture=<%= culture %>&ver=<%= siteversion %>" type="text/css" rel="stylesheet" />

contestado el 16 de mayo de 11 a las 22:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.