Hack CSS para Internet Explorer: guión bajo

  • Por
Un hack en CSS que sirve para indicar estilos CSS específicos para Internet Explorer, utilizando un _ (guión bajo) al principio del atributo.
Vamos a explicar uno de los hack CSS más utilizados para identificar y especificar estilos específicos para el navegador Internet Explorer, basado en utilizar el carácter guión bajo "_" al principio del nombre de un atributo CSS.

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.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Alexis

03/3/2009
Tu hack funcionara pero no es valido para la W3C.. piensa en otra opcion :)

pitufo

03/3/2009
Una pregunta, ¿este hack lo reconocen igual ie6 e ie7?

copernik

04/3/2009
... al parecer este hack no funciona en IE7, lo acabo de poner a prueba y nada, no reconociò el underscore solo ignora la propiedada como que no existiera...
Salu2

nico

05/3/2009
Hola. Yo se que lo mismo se puede hacer anteponiendo una doble barra, asi:

//position:absolute;

pero no se si es un estandar.

Saludos

darchy

06/3/2009
y porq qué no usar mjor las hojas de estilo condicionales? preparamos una hoja general (para firefox) y luego una hoja con lo que queremos/necesitamos ditonto en IE, otra para IE6... y en el html ponemos primero la eneral, despues <!--if IE--> y su hoja, <!--if IE6--> y la suya...

Patricia Martínez Ibarra

16/3/2009
Al principio no me funcionaba pero al limpiar el código de estilos que no usaba funcionó perfecto, gracias.
Me sirvió mucho.

Patricia.

Sabry

15/4/2009
No Funciona
Probe el _ pero no pasa nada!!! necesito subir una pagina y el IE me toma todo el formato mal!!! estoy desesperada!!!

Xaz

24/4/2009
Hack css ie
Este hack sólo funciona cuando declaramos el documento como html, en el caso de declararlo como xhtml no funciona.