El @import, tu aliado contra la desigualdad de browsers
Posted on 12. Ene, 2007 by Michael Müller in Sin categoría
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
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: %#&$/=!#
(4.00 out of 5)
Xavier Donoso
Ene 12th, 2007
Excelente! Buena manera de
presentar el caso, no puedo esperar a la segunda parte jaja
Pablo
Ene 12th, 2007
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.
|-|
Ene 12th, 2007
Nuestros amigos los browsers y los estándares, cuándo se pondran
de acuerdo??
Dilbert
Ene 12th, 2007
y eso que no lo han visto en el opera para el nintendo
ds
Michael Müller
Ene 12th, 2007
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
Ene 12th, 2007
Por cierto y hablando de
Safari…
http://blog.wired.com/monkeybites/2007/01/is_safari_heade.html
michaelmuller.net | Diseño y Desarrollo Web » Safari: Ahora para Windows!
Jun 12th, 2007
[...] Parece que ahora las revisiones de sitios podrán ser más ágiles y quizá podamos evitar estos inconvenientes.
[...]
maquita
Jun 26th, 2007
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