Hacks en CSS

Hacks en CSS

En este ejemplo podríamos aceder al <p></p> que engloba Test de las siguientes formas.

 
#attrhack[disabled=""]+p {}
    Firefox 1.5 y anteriores, posiblemente versiones futuras
    Safari 2.0 y anteriores, posiblemente versiones futuras
    Konqueror 3.5 y anteriores, posiblemente versiones futuras
#attrhack[disabled="true"]+p {}
    Opera 9 y anteriores, posiblemente versiones futuras

Los hacks de CSS son triquiñuelas para conseguir que una misma declaración de estilos CSS actúe de manera distinta en distintos navegadores. Bajo este concepto se engloban diversas técnicas, muchas veces poco ortodoxas, para lidiar con las distintas interpretaciones de CSS que tienen los distintos navegadores.

Los hacks CSS surgen porque distintos navegadores a menudo interpretan de manera distinta el mismo estilo CSS. Entonces los desarrolladores y diseñadores, que se ven en la necesidad de hacer páginas que se muestren igual independientemente del navegador, tienen que utilizar códigos y trucos complejos para conseguir que la página se visualice de la misma forma en distintos navegadores.

La cuestión es que debería haber una sola interpretación del estándar CSS, pero como cada navegador hace la guerra por su cuenta, al final ocurre que no es así y nos queda a nosotros el problema de hacer que todo cuadre. Es algo a lo que ya estamos acostumbrados con HTML y Javascript, pero que también tenemos que aprender a lidiar con CSS.

Los hack CSS muchas veces juegan con distintas interpretaciones a errores de sintaxis, cometidos a propósito en el código CSS. Por ello en principio conviene evitarlos o bien es recomendable utilizarlos con cuidado.

Hack CSS de los comentarios de dos barras (//)

En este artículo mostraremos un ejemplo sobre cómo funcionan los Hack CSS, con un típico caso que utiliza los comentarios formados por dos barras (//), que no son tratados como comentarios en Internet Explorer.

Es decir, como hemos visto en otros lenguajes de programación, si una línea de código tiene dos barras al comienzo significa que está comentada y no se tiene en cuenta. En CSS los comentarios se tienen que hacer así:

/* esto es un comentario */
Pero Firefox también interpreta los comentarios formados por //
// esto es un comentario

Internet Explorer simplemente ignora las dos barras y trata la línea como si fuera un código normal.

Por ejemplo tenemos este código:

h1{
font-size: 12px;
color: #009900;
//font-size: 16px;
//color: #000099;
}

Aquí hemos definido un par de estilos para la etiqueta H1.
Los dos primeros estilos son font-size:12px y color:#009900. Todos los navegadores leerán estos estilos.

Pero luego tiene otros dos estilos, que en realidad son los mismos que los anteriores, que comienzan por dos barras. Firefox y Opera, que interpretan esas dos barras como comentarios, no leerán los estilos. Internet Explorer que no tiene en cuenta las dos barras como comentarios, leerá los dos últimos estilos.

Por lo tanto, el resultado final será que
• Todos los navegadores mostrarán los H1 con tamaño de fuente 12px y color verde.
• Internet Explorer mostrará los H1 con tamaño de 16px y color azul, dado que no tiene en cuenta las dos barras como si fueran comentarios.
Podemos ver el ejemplo en marcha en la URL:

http://www.desarrolloweb.com/articulos/ejemplos/tallercss/css-hack1.html

Tendríamos que verlo con Internet Explorer y con otros navegadores para comprobar que cambian los estilos con los que se muestra el encabezamiento H1.

Conclusión sobre los hacks CSS

Lo cierto es que los hacks CSS están ahí y muchas personas los utilizan habitualmente. Hay varios tipos de hacks, con técnicas más o menos conflictivas u ortodoxas. No debemos abusar de ellos, pero en algunas ocasiones no queda otra solución que utilizarlos para que una página se vea de la misma manera en los navegadores más comunes.

Vimos también un tipo de Hack CSS que sirve para ocultar ciertos estilos en Firefox u otros navegadores y que sólo funcione en Internet Explorer.

Tipos de Hacks CSS

Disponemos de 2 tipos de hacks, los conocidos como condicionales, que se aplican generalmente en los , y los hacks en línea, que los encontraremos en nuestro CSS.

Hacks condicionales

Esta pobremente soportado por los estandares, ya que es algo que Microsoft creó para su Internet Explorer 5 con el nombre de “conditionals comments”. Estos comentarios nos permiten conocer de que navegador y de que versión se trata y aplicar unos estilos u otros.

Positivo

    <!--[if condicion]> HTML <![endif]-->

Negativo

    <!--[if !condicion]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->

HTML

<!– De esta forma podremos crear una condición que nos carge unos estilos dependiendo del navegador en el cual estén visitando a nuestra aplicación.
Estas son las conciones que podemos consultar.

IE
Cualquier versión de Internet Explorer
lt IE X
Versiones inferiores a X
lte IE X
Versiones inferiores o iguales a X
IE X
Solo para la version X
gte IE X
Versiones superiores o iguales a X
gt IE X
Versiones superiores a X

Pudiendo sustituir X por las versiones de IE disponibles (5,5.5,6 o 7).
Pero creo que será mejor ver un ejemplo práctico para conseguir entenderlo perfectamente.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
               <head>
                               <title>Test</title>
                               <link href="all_browsers.css" rel="stylesheet">
                               <!--[if IE]> <link href="ie_only.css" rel="stylesheet"> <![endif]-->
                               <!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet"> <![endif]-->
                               <!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet"> <!--<![endif]-->
                               <!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet"> <!--<![endif]-->
               </head>
               <body>
                               <p>Test</p>
               </body>
</html>

Hacks en línea

Los conocidos como hacks en línea son aquellos que nos encontramos en nuestro CSS, y que están colocados de forma que un navegador que no conozca esa nomenclatura no aplicará dicho efecto dejando el anterior, generalmente se aplican selectores. De esta forma podemos aplicar un estilo y posteriormente aplicar un nuevo valor a ese estilo mediante uno de los hacks y que se ejecute en caso de que el navegador conozca dicho hack y lo pueda interpretar.

Veamos los principales selectores y los navegadores que los interpretan.

IE 6 y anteriores
* html {}
IE 7 y anteriores
*:first-child+html {} * html {}
Solor IE 7
*:first-child+html {}
IE 7 y navegadores modernos
html>body {}
Navegadores modernos (IE 7 no)
html>/**/body {}
Ultimas versiones de Opera 9 y anteriores
html:first-child {}

Estos selectores nos permiten acceder a un mismo elemento por dos caminos diferentes, dependiendo del navegador de la forma en la que interprete los selectores.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
               <head>
                               <title>Test</title>
               </head>
               <body>
                               <input disabled>
                               <p>Test</p>
               </body>
</html>

Opera 9 y anteriores, posiblemente versiones futuras

Dentro de los hacks en línea tenemos otros operadors que nos permiten condicionar el aspecto de nuestras páginas. Aunque no son recomendables por la W3C ya que no nos permite la validación de las hojas de estilos de nuestra aplicación.

!important

Internet Explorer 6 y versiones anteriores tienen un problema con este operador, ya que generalmente es ignorado en cualquier declaración, aunque Internet Explorer 7 ya ha conseguido arreglar este problema.
Es usado para que la mayoría de navegadores respeten la importancia que tiene la declaración que lo contenga.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
               <head>
                               <title>Test</title>
                               <style>
                                              p
                                              {
                                                             background: green !important; /* Navegadores superiores a IE 6 respetarán la importancia inmediatamente */
                                                             background: red; /* IE 6 y anteriores aplicará este estilo aunque esté marcado la anterior como importante */
                                              }
                               </style>
               </head>
               <body>
                               <p>Test</p>
               </body>
</html>

Test

@import “non-ie.css” all;

Internet Explorer 7 y anteriores no soporta las reglas de los selectores @import, por lo tanto son ignorados en nuestro CSS. De esta forma puedes crear una hoja de estilos para navegadores no IE y importarla desde tu CSS principal dejando todos los navegadores IE fuera de este diseño.

@import “stylesheet.css” all;

body[class|=”page-body”]

La especificación CSS 2.1 no es muy clara aobre este tema o no hay un guión sobre este selector. Muchos navegadores, incluido Firefox e Internet Explorer 7, permiten el uso de body[class|=”page-body”] como selector para un tag así: . Encambio Opera interpreta esta especificación de diferente manera. El corta el valor del atributo y solo selecciona la primera pieza del selector. Ovbiamente si el atributo se corta no obtenemos el valor deseado. Por lo tanto este selector parece no funcionar en las versiones de Opera, aunque se espera que en versiones 8 y 9 deberían funcionar.

Hacks no recomendados

Debido a la dictadura que Internet Explorer nos ha tenido sometidos, disponemos de una serie de hacks que el validador de CSS de la W3C no soporta, pero que Internet Explorer 6 (y versiones inferiores) aún permite.

_propiedad: valor y -propiedad: valor

El uso de caracteres no alfanuméricos delante del nombre del atributo es algo que IE6 y anteriores si permite, menos mal que IE7 ya corrige este “problema”. Aunque gracias a él muchos años se han usado estos “fallos” para diferenciar aspectos entre IE y el resto de navegadores.
Una buena alternativa es usar !important.

_propiedad: valor y -propiedad: valor se aplica a IE6 y anteriores.

CSS no válido.

*propiedad: value

Este método es similar al anterior pero en este caso tambien tenemos que tener en cuenta a Internet Explorer 7, que pese a ser un caracter no alfanumérico lo trata como si del operador * se tratara.
*propiedad: valor funciona para todos los navegadore Internet Explorer, pero en futuras versiones no debería seguir funcionando.

CSS no válido.

body:empty

:empty es una pseudo-clase propuesta por la W3C para el CSS3 y debería hacer referencia a un elemento que no tiene en su interior otros elementos o nodos de texto. Sin embargo cuando lo usamos con el elemento body, Firefox 1.5 y 2.0 siempre lo selecciona pese a tener contenido.
Aunque parece que este hack será valido para la CSS3 las recomendaciones de la W3C es no usarlo, ya que para la especificación 2.x lo considera inválido. Sin embargo es probablemente la mejor manera de diferenciar Firefox en tus CSS.
body:empty selecciona el body únicamente en navegadores Gecko (Firefox 1.5 y 2.0).

CSS 2.x: CSS no válido.

CSS 3: CSS válido.

a:link:visited, a:visited:link

De acuerdo con el estandard CSS :link y :visited son estados que no pueden darse a la vez. Parece ser que IE7 y versiones anteriores ignoran una de ellas y lo trata como un simple selector. Si tienes un enlace podrás usar #enlace:link:visited{} o #enlace:visited:link {} para selecionar el elemento en Internet Explorer 7 y anteriores. Aunque se espera que en versiones futuras no funcione.
a:link:visited, a:visited:link {} selecciona un elemento
en Internet Explorer 7 y anteriores.

>body

Pese a ser un selector simple que nos indicaría el hijo de … (>) úbicado sin un elemento padre al que referenciar únicamente IE7 parece que lo interpreta. Aunque en futuras revisiones parece ser que van a solucionar este fallo.

>body {} Solo para Internet Explorer 7

CSS no válido.

html*
Internet Explorer 7 y todas las versiones anteriores, interpretan este hack como un intento de hacer referencia a todos los descendientes de html.
html* {} en Internet Explorer 7 y anteriores selecciona todos los nodos hijos de .

CSS no válido.

!ie

Internet Explorer 7 soluciona uno de las cuestriones con !important pero tiene problemas cuando el identificador tiene un error. Si se usa en lugar de !important, Internet Explorer manejará la propiedad correctamente en lugar de fallar. Por lo tanto en cualquier declaración de estilo puedes incluir las características prevista para aplicarse solamente en Internet Explorer y agregar !ie, cualquier palabra puede ser utilizada en lugar de ie.
CSS no válido.

!important!

Otro problema con el identificador !important que no han solucionado en IE7 es el uso de caracteres no alfanumérico detrás del identificador. Normalmente usarlo debería fallar, pero Internet Explorer 7 y anteriores ignoran el caracter final y lo aplica como si de !important se tratara.
!important! permite que la propiedad sea aplicada con la importancia requerida en IE7 y anteriores, aunque no será tratado por lo otros navegador. En futuras versiones dejará de funcionar.

CSS no válido.

Por Adriana Gonzalez

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: