Introducción
Para empezar debemos conocer el funcionamiento del motor a la hora de leer un CSS. Un navegador, recibe el HTMl en el cual encuentra la referencia al fichero CSS que debe cargar (tambien puede encontrarlo en el <head></head>) esté carga todo el HTML y posteriormente pasa a aplicar los estilos CSS encontrados en el fichero o en el <head></head>. Para ello sigue un orden secuencial leyendo el fichero desde el principio hasta el final, aplicando los estilos así como van apareciendo. Tambien es conveniente que sepamos que cada asignación de estilos se sobrepone a la anterior, osea que el último estilo prevalece sobre los anteriores.
#elemento {
border:3px red solid;
border:2px blue solid;
}
En este ejemplo estamos aplicando un borde rojo de 3px y posteriormente sobreescribimos la propiedad con un borde azul de 2px, mostrando este último.
Tipos de Hacks CSS
Disponemos de 2 tipos de hacks, los conocidos como condicionales, que se aplican generalmente en los <head></head>, 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]-->
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¨ type=¨text/css¨>
<!--[if IE]> <link href=¨ie_only.css¨ rel=¨stylesheet¨ type=¨text/css¨> <![endif]-->
<!--[if lt IE 7]> <link href=¨ie_6_and_below.css¨ rel=¨stylesheet¨ type=¨text/css¨> <![endif]-->
<!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href=¨recent.css¨ rel=¨stylesheet¨ type=¨text/css¨> <!--<![endif]-->
<!--[if !IE]>--> <link href=¨not_ie.css¨ rel=¨stylesheet¨ type=¨text/css¨> <!--<![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 type=¨hidden¨ disabled id=¨attrhack¨>
<p>Test</p>
</body>
</html>
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
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 type=¨text/css¨>
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 class=¨page-body¨>
<p>Test</p>
</body>
</html>
@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í: <body class=¨page-body¨>. 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.
<!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 type=¨text/css¨>
p
{
background: red; /* Esto se aplica a todos los navegadores */
}
body[class|=¨page-body¨] p
{
background: green; /* Esto se aplica a IE7 y el resto de navegadores modernos excepto Opera. */
}
</style>
</head>
<body class=¨page-body¨>
<p>Test</p>
</body>
</html>
Por kelvet
