Cómo incluir hojas de estilo condicionales
La verdad es que desde siempre, forma y función van de la mano. Rapidez de carga, color, estética, diseño son, por suerte, valores subjetivos y en este mundo de las webs, hay de todo pero, como los navegadores interpretan los códigos de manera diferente, a veces se hace necesario establecer propiedades CSS diferenciadas para que los visitantes vea nuestro sitio tal y como deseamos y no como lo se le ocurre a otros.
Esto no siempre es posible a menos que hagamos caso de algunas opiniones extremas que nos dicen: "simplifiquen, simplifiquen, simplifiquen"; "letras negras sobre fondos blancos"; "el contenido lo es todo, no importa si es el diseño es aburrido".
No hay muchas alternativas para zanjar estas diferencias, a veces, agotados, no tenemos otro remedio que recurrir a los hacks o al uso de códigos condicionales aunque estos, como sólo son implementados por Internet Explorer sólo nos permiten establecer diferencias entre las distintas versiones de ese navegador y los otros:
Esto no siempre es posible a menos que hagamos caso de algunas opiniones extremas que nos dicen: "simplifiquen, simplifiquen, simplifiquen"; "letras negras sobre fondos blancos"; "el contenido lo es todo, no importa si es el diseño es aburrido".
No hay muchas alternativas para zanjar estas diferencias, a veces, agotados, no tenemos otro remedio que recurrir a los hacks o al uso de códigos condicionales aunque estos, como sólo son implementados por Internet Explorer sólo nos permiten establecer diferencias entre las distintas versiones de ese navegador y los otros:
<!--[if IE 5]>
[esto sólo se ejecutará en IE versión 5]
<![endif]-->
<!--[if IE 5.5000]>
[esto sólo se ejecutará en IE versión 5.5]
<![endif]-->
<!--[if IE 6]>
[esto sólo se ejecutará en IE versión 6]
<![endif]-->
<!--[if IE 7]>
[esto sólo se ejecutará en IE versión 7]
<![endif]-->
Y algunas más amplias pero siempre detectando Internet Explorer:
<!--[if lt IE 7]>
[esto sólo se ejecutará en versiones inferiores a IE7]
<![endif]-->
Sólo hay dos posibilidades más, establecer códigos que se ejecuten sólo en Internet Explorer:
<!--[if IE]>
[esto sólo se ejecutará en cualquier versión de Internet Explorer]
<![endif]>
Y establecer códigos que NO se ejecuten sólo en Internet Explorer pero si en cualquier otro navegador:
<!--[if !IE]>
[esto sólo se ejecutará en cualquier navegador que NO sea Internet Explorer]
<![endif]>
¿Para qué sirve? Para corregir algunos detalles menores o para cargar una hoja de estilo distinta según sea el navegador del usuario. Lo más común es que sean las versiones inferiores a IE7 las que causen más problemas así que es usual encontrarse con cosas así:
<link rel="stylesheet" type="text/css" href="URL_estilo.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="URL_estiloIE.css" />
<![endif]-->
Donde se detecta las versiones inferiores de IE y, en esos casos, se carga una hoja de estilo especial que sobrescribe las propiedades CSS "normales".
4 comentarios:
Gracias J.Miur era lo que murmuraba , gracias por profuncizar el tema! :D
Me alegro que te sirviera :)
Si no me equivoco , cometiste el error de poner:
<![if IE]> y es:
<!--[if IE]> :D
Parecen haberse perdido en un par de líneas ... ya está corregido :D
¿Quiere dejar un comentario?
Utilice el formulario adjunto para comunicarse.
Enlaces