21 de agosto de 2010

CSS para Internet Explorer con comentarios condicionales

Cómo todos sabéis Internet Explorer siempre va a su aire, da igual lo que digan los estándares del W3C, Microsoft implementa las CSS como le viene en gana. Es verdad que con Internet Explorer 8 han dado un gran paso adelante, pero también es verdad que en ocasiones te interpreta el CSS como quiere.

Cómo Internet Explorer es uno de los navegadores principales del mercado no nos podemos permitir el lujo de lanzar una web que no se vea correctamente en este navegador.

¿Qué hacer en estos casos? Pues hay varias técnicas bastante útiles, en este post os voy a hablar de los comentarios condicionales para Internet Explorer.

Los comentarios condicionales son un tipo de instrucción que Microsoft se ha sacado de la manga para permitir, dentro de una página web, poner una condición para que se escriba un contenido u otro en el navegador. En nuestro caso aprovechamos esta posibilidad para cargar una hoja de estilos adicional para retocar los css que el navegador de Microsoft está mostrando mal.

Os pongo un ejemplo de como se utiliza:

<!--[if IE]>
Este texto sólo se ve en Internet Explorer
<![endif]-->

Los comentarios condicionales nos permiten además diferenciar las versiones de Internet Explorer, os pongo aquí un par de ejemplos:

<!--[if IE 7]>
Internet Explorer 7
<![endif]-->

<!--[if IE 8]>
Internet Explorer 8
<![endif]-->

¿Cómo aplicamos este sistema para el problema de las CSS? Pues muy sencillo, primero cargamos la hoja de estilo normal, y luego aplicamos un comentario condicional para la hoja de CSS de ajustes para Internet Explorer. Se haría de la siguiente manera:

<link href="estilos.css" media="screen" rel="stylesheet" type="text/css"></link>
<!--[if IE]>
<link href="estilos.css" media="screen" rel="stylesheet" type="text/css"></link>
<![endif]-->

En la hoja de estilos estilos.css van todos los css de la web, en la hoja de estilos estilos.ie.css van los estilos específicos de Internet Explorer.

Cómo veis es muy sencillo de aplicar. Tiene una limitación, eso sí, los comentarios condicionales sólo funcionan en Internet Explorer para Windows. En otro sistema operativo se los tratará como comentarios normales.

No hay comentarios: