Hack CSS para Internet Explorer: guión bajo

Este hack nos permite especificar estilos que sólo serán interpretados para Internet Explorer, con la particularidad que las especificaciones de CSS 2.1 lo contemplan como válido sintácticamente.

Primero habría que comentar qué son los Hacks CSS, pero es algo que ya vimos en artículos anteriores de DesarrolloWeb.com, así que lo mejor sería recomendar la lectura del texto Hacks CSS

El hack que vamos a presentar utiliza el guión bajo antes de un atributo, que quedaría de la siguiente manera:

_font-size: 8pt;

En principio, ningún atributo de CSS comienza por un guión bajo, luego la mayoría de los navegadores simplemente lo ignorará. Sin embargo, Internet Explorer sí detecta este atributo y lo tiene en cuenta, aplicando el estilo que esté definiendo. Con esta premisa, podemos preparar un código CSS que sea interpretado de manera distinta por Explorer y otros navegadores, de la siguiente manera:

body{
background-color: #00ff00;
_background-color: #ff0000;
}

Al leer este código CSS todos los navegadores entenderán el primer atributo, por lo que colocarán en color verde el fondo de la página (background-color: #00ff00;).

El segundo atributo, que comienza por un guión bajo, no será interpretado por ningún navegador. Más bien será considerado como un error CSS, por lo cual no lo tendrán en cuenta y seguirán mostrando el fondo de color verde.

Pero Internet Explorer tendrá un comportamiento distinto, ya que reconoce cualquier atributo que comience por un guión bajo (simplemente ignorará el guión). En este caso, Explorer entenderá por el segundo atributo que se está sobrescribiendo el atributo background-color y asignará el color de fondo especificado como rojo (_background-color: #ff0000;).

Así pues, con este hack podemos tener, con una misma hoja de estilos, dos páginas que muestren estilos distintos en Explorer y en otros navegadores, puesto que el guión bajo se puede utilizar para cualquier atributo CSS.

Podemos ver este hack CSS en funcionamiento en una página aparte.