El @import, tu aliado contra la desigualdad de browsers

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:

<style type="text/css">  </style>

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 @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: %#&$/=!#

Suscríbete a los comentarios con

RSS o haz un

TrackBack a 'El @import, tu aliado contra la desigualdad de browsers'.

8 Comentarios en 'El @import, tu aliado contra la desigualdad de browsers'

Excelente! Buena manera de presentar el caso, no puedo esperar a la segunda parte jaja

Xavier Donoso | January 12th, 2007 a las 12:27 pm

Verdaderamente esto de que se vean bien los sitios en la mayorÃa de browsers, ha sido y serÃ¡ un dolor de cabeza por un largo tiempo. Por lo menos hasta cuando verdaderamente se cumpla con el standard W3C, cosa que algunos browsers no lo hacen. En lo personal siempre tratamos de que se vean bien en los exploradores mas usados: IE6, Firefox, IE7(definidos en porcentajes de uso).

Saludos amigo Nazza. Muy buena la crÃ³nica.

Pablo | January 12th, 2007 a las 12:28 pm

Nuestros amigos los browsers y los estÃ¡ndares, cuÃ¡ndo se pondran de acuerdo??

|-| | January 12th, 2007 a las 12:54 pm

y eso que no lo han visto en el opera para el nintendo ds

Dilbert | January 12th, 2007 a las 1:31 pm

Buena dato Dilbert, ya le voy a pasar a Pablo el requerimiento para hacer la versiÃ³n amigable para dispositivos mÃ³viles.

Michael MÃ¼ller | January 12th, 2007 a las 2:36 pm

Por cierto y hablando de Safari…
http://blog.wired.com/monkeybites/2007/01/is_safari_heade.html

Michael MÃ¼ller | January 12th, 2007 a las 6:02 pm

[…] Parece que ahora las revisiones de sitios podrán ser más ágiles y quizá podamos evitar estos inconvenientes. […]

michaelmuller.net | DiseÃ±o y Desarrollo Web » Safari: Ahora para Windows! | June 12th, 2007 a las 10:28 am

Hola, pucha me tinca ene la soluciÃ³n, pero copiÃ© y peguÃ© la lÃnea en el head y no me funciona…no debo cambiar nada?
saludos

maquita | June 26th, 2007 a las 9:38 am

Comenta aquí