El @import, tu aliado contra la desigualdad de browsers

Posted on | Enero 12, 2007

Este artículo se basa en hechos de la vida real. Los nombres de los personajes que figuran aquí fueron

cambiados para proteger su identidades.

Pablo: Oe, José me indica que hay muchos problemas con la presentación del sitio. Son cuestiones del CSS más que

nada.

Naza: Simón, ya estuve revisando y hay unas cosas que no cuadran. Pero no tengo instalado el IE6, porque esta m…. de Windows me amagó e instaló el IE7 en los auto updates, así

que sólo puedo revisar en el 7 y en Firefox.

Pablo:Yo tengo el IE6, porque Dilbert me pasó un programita para poder instalar ambos.

Naza: Ah ya, bueno, yo no

quiero volver al IE6, así que deja nomás. Voy a revisar el CSS en el 7 y en FF.

2 horas después…

Naza: Oe, no funca… se ve bien en IE7, más o menos en IE6

y descuadrado en FF. Pero creo que tengo una solución alterna, pero tienes que agregar unas cosas al código del “head” del sitio.

Pablo: A ver, cual e…

La

solución:

En el “head” del HTML del sitio incluimos lo siguiente:

Este código es independiente de la línea que llama al archivo CSS original del sitio. Lo que queremos lograr, es “importar” una hoja de estilos alterna o más bien, complementaria,

con estilos específicos para Firefox.

Y, ¿por qué sólo para Firefox?.

Simple, la regla

href="http://w3development.de/css/hide_css_from_browsers/import/">@import es completamente ignorada por Internet Explorer, por lo que este nuevo CSS importado sólo lo va a leer el

Firefox, y como el @import tiene prioridad en cuanto a la jerarquía de importancia de los estilos declarados, estos sobreescribirán a los que ya fueron declarados en la hoja de estilos original del

sitio.

Esto nos da una gran posibilidad de crear estilos específicos para Firefox, que el IE no los tomará en cuenta, dándonos así un control mucho mayor sobre la presentación final del

sitio.

El desenlace…

Pablo: Oe, avanzado eso del @import, ya se solucionaron prácticamente todos los problemas de presentación entre

browsers.

Naza: Si oye, efectivo, no? Pero no cantes victoria, te acabo de pasar por mail las capturas de pantalla del sitio visto en Safari.

Pablo: %#&$/=!#

Comments