Cargar una hoja de estilos dependiendo del navegador

La pluralidad de navegadores está muy bien para el usuario ya que dependiendo de sus necesidades escojerá el que más se adecue a él. No obstante, para los desarrolladores, esto es un gran problema. No todos los navegadores entienden las cosas de las misma forma, algunos tratan a los pixels de forma distinta a la otros o simplemente interpretan unas propiedades y otras no.

FireFox e Internet Explorer

Para solventar estas cosas siempre podemos crear una hoja de estilo CSS para cada navegador. Yo personalmente no soy partidario de tener varias, ya que la información la tiene descentralizada, por lo que siempre uso una sola. El problema de los pixels entre FireFox e Internet Explorer se arregla duplicando la propiedad y poniendo un * delante de la que queremos que entienda Internet Explorer, el resto de navegadores lo reconocen como comentario.

Ahora nos encontramos con un problema, IE8 no trabaja con los pixels como lo hace IE6, por lo que tenemos que utilizar 2 hojas de estilos.

Cómo se carda la hoja de estilo secundaria

Bien simple con el siguiente código:

<!--[if IE 8]>
Carga la hoja de estilos secundaria
<![endif]-->

Esto se debe de usar en la parte HTML no en la CSS. Es lo que se conoce como comentarios condicionales y sólo funcionan para Internet Explorer, para el resto de navegadores es un simple trozo de código comentado que no mira.

!--[if IE]>
Cualquiere trozo de código que sólo reconoce Internet Explorer<br />
<![endif]-->
<!--[if IE 5]>
Cualquiere trozo de código que sólo reconoce Internet Explorer 5<br />
<![endif]-->
<!--[if IE 5.0]>
Cualquiere trozo de código que sólo reconoce Internet Explorer 5.0<br />
<![endif]-->
<!--[if IE 5.5]>
Cualquiere trozo de código que sólo reconoce Internet Explorer 5.5<br />
<![endif]-->
<!--[if IE 6]>
Cualquiere trozo de código que sólo reconoce Internet Explorer 6<br />
<![endif]-->
<!--[if IE 7]>
Cualquiere trozo de código que sólo reconoce Internet Explorer 7<br />
<![endif]-->
<!--[if gte IE 5]>
Cualquiere trozo de código que sólo reconoce Internet Explorer 5 y superior<br />
<![endif]-->
<!--[if lt IE 6]>
Cualquiere trozo de código que sólo reconoce Internet Explorer menor que 6<br />
<![endif]-->
<!--[if lte IE 5.5]>
Cualquiere trozo de código que sólo reconoce Internet Explorer menor o igual a 5.5<br />
<![endif]-->
<!--[if gt IE 6]>
Cualquiere trozo de código que sólo reconoce Internet Explorer superior a 6<br />
<![endif]-->
</p>

fuente

Deja un comentario