Pequeño hack para IE: El hack del selector universal

Sinceramente detesto los hacks en CSS. Sólo agregan código que solamente ensucia tu CSS por culpa de algún navegador con errores de interpretación en las especificaciones (léase Internet Explorer). Tal vez los dolores de cabeza más conocidos por los desarrolladores, sean los misteriosos márgenes duplicados, o el tener que usar —en ciertas ocasiones y en ciertos elementos— padding en vez de margin, sin ninguna razón aparente, todo porque IE así ha dicho que sea.

Hay hacks de todo tipo y para todos los navegadores, buscando un poco en Position Is Everything tal vez puedas encontrar la solución a tu problema. Pero si no la has encontrado, todavía puedes usar el último recurso: * html.

Vamos por partes. El selector universal, representado por el caracter asterisco (*) selecciona todos los elementos del árbol del documento. Esto quiere decir que la siguiente regla:

* { color: red; }

Le asignaría el color rojo a todos los elementos del árbol del documento, sobreescribiendo así su herencia (Eric tiene un excelente artículo sobre el poder de los selectores universales). Así, cualquier elemento de un documento HTML tendría el color rojo asignado.

Ahora bien, volviendo a nuestro hack:

* html { }

Esta regla en CSS, quiere decir “aplica esta regla a todos los HTML hijos del elemento universal”, o lo que es lo mismo, “aplica esta regla a todos los HTML descendientes de *“, o “selecciona todos los HTML hijos/descendientes de todos los elementos”. Ahora bien, como HTML es el elemento root por defecto (es decir, es el elemento por el cual comienza el árbol del documento ), no selecionariamos nada, ya que HTML no puede ser hijo de ningún otro elemento. La regla entonces no tiene sentido, pero es válida en CSS y nos servirá para ocultar reglas a navegadores buenos y mostrarlas al navegador malo (IE), ya que cualquier regla empezando por * html, es interpretada por IE (lo veremos más adelante) y puede ser usada a nuestro beneficio.

Esta regla, aunque sencilla, puede prestarse a confusión. ¿Por qué decimos “selecciona todos los HTML hijos de *” y no “selecciona todos los HTML”, o en todo caso, “selecciona EL HTML”? Si estamos pensando en “selecciona todos los HTML”, estamos pensando en D.O.S., en donde poner un dir *.txt quiere decir “muestra todos los archivos .txt”. Aquí, el espacio en blanco hace la diferencia. Al tener el espacio en blanco, estamos aplicando selectores descendentes y el elemento universal se toma simplemente como eso, como el elemento que quiere decir “todos los elementos”. La clave es esa, el elemento * significa “todos los elementos”, y no “todos los elementos X”.

Volviendo al hack, Firefox y Opera simplemente ignoran cualquier regla que empiece con * html, sin embargo, IE la interpreta. Entonces, el siguiente código:

* html body h1 { color:blue; }

Es interpretado por Internet Explorer como html body h1 { color:blue; } (noten que no interpreta el asterisco) y el resultado sería que todos los H1 (hijos de BODY y obviamente de HTML) tendrían color azul. En Firefox y Opera, no pasaría nada.

El hack funciona siempre poniendo a BODY como elemento hijo de HTML y luego poniendo el elemento que queremos estilizar, es decir, poniendo siempre * html body mi-elemento, lo cual es lógico, pues según el árbol del documento, no hay elementos para dar estilo entre HTML y BODY, es decir, no podríamos poner algo como * html h1 (nos estaríamos salteando a BODY, lo cual es incorrecto, pero sin embargo valida perfectamente).. Funciona si se pone * html h1, no hace falta ser tan estrictos con el árbol del documento siempre y cuando respetemos qué elemento contiene a quién (gracias Fede).

Nota: No lo piensen mucho ni se descerebren como yo, según el blog de IE, este hack ya está deprecado. Pero quien sabe, hasta que salga IE7 todavía puede serles útil :)