Hacks para CSS que ayudaran a que no EXPLOTE tu cabeza

En esta entrada asumo que todos conocen los que es un CSS, por lo tanto no me voy a detener en definir un CSS ni nada, hagamos esto un poco mas pro activo, no quiero menos preciar los conocimientos que ya tienen, por esto voy a comenzar despacito pero desde un punto en específico.

Muchas veces nos hemos preguntado, como hacer que un estilo en cascada (CSS) sea solamente reconocido por un tipo de navegador, o por una única versión, pues este caso se da mucho, con el conocido IE, este navegador de Bill... nos da dolores de cabeza a la gran mayoría de los Diseñadores, Maquetadores y Programadores Web, pues en ese caso existen algunas alternativas que pueden facilitar hacer algún Hack puede facilitarnos la vida, bastante, puesto que con esto podremos lograr que un estilo en específico tenga un comportamiento diferente para un IE o Mozilla, según necesitemos.


Disponemos de 2 tipos de hacks, los conocidos como condicionales, que se aplican generalmente en los , y los hacks en línea, los cuales van dentro del contenido de nuestro archivo CSS o de la etiqueta

Hacks Condicionales

Esta pobremente soportado por los entandares, ya que es algo que Bill... se inventó 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 cargue unos estilos u otros dependiendo de que navegador estemos corriendo.

bueno si muy lindo todo, pero como lo uso... que es eso de condición??? Bien, aquí vemos algunos ejemplos de uso.

//codigo CSS para todos los navegadores
<link href="all_browsers.css" rel="stylesheet"

type="text/css">
//código CSS solo para IE, sin importar la versión 
<!--[if IE]> <link href="ie_any_version.css" 
rel="stylesheet" type="text/css"> <![endif]-->
//código CSS para un navegador que sea anterior a IE 7, 
//o sea de la versión 6, para atras
<!--[if lt IE 7]> <link href="ie_6_and_below.css" 
rel="stylesheet" type="text/css"> <![endif]-->
//código CSS unicamente para los navegadores IE 7 y posterior 
<!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> 
<link href="recent_versions.css" rel="stylesheet" 
type="text/css"> <!--<![endif]-->
//código CSS para todos aquellos navegadores que no sean IE 
<!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" 
type="text/css"> <!--<![endif]--> 

 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 {}

El hack del guión bajo
Para el resto de los navegadores una propiedad con un guión bajo, u otro carácter alfanumérico delante es algo que no existe, y por tanto no la interpretan, pero Internet Explorer las asimila sin problemas. Cosa que no debería suceder, pero bien ya que sucede, podemos usarlo para nuestro beneficio.

#textbox{
width: 450px; /* Firefox y los demás */
_width:400px; /* Internet Explorer 6 e inferiores */
}

Este hack funciona para todas las versiones de Internet Explorer que existen hasta la fecha, pero es posible que deje de funcionar en las próximas.

Teniendo en cuenta que los navegadores sobrescriben las propiedades si éstas se definen más de una vez, dejando establecida la que se define última; mostramos un ejemplo donde se muestran estos dos hacks que hemos descrito anteriormente.

body {
background: #FFFFFF /* Firefox y los demás */
*background: #000000 /* IE7 e inferiores */
_background: #CCCCCC; /* Sólo IE6 */
}

Así, podemos tener las propiedades para este mismo identificador, pero para diferente navegador, todo dependiendo de las necesidades gráficas que tengamos.

El uso de !important

Este operador es utilizado en los archivos CSS para que los navegadores respeten la importancia de la propiedad que lo contenga y evite que se sobrescriba con otras que se definan posteriormente.

Internet Explorer 6 y las versiones anteriores no interpretan este operador; problema que fue solucionado en la versión 7 de este navegador.

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 */
}

En el ejemplo anterior el fondo de la página se mostrará rojo para IE 6, mientras que para Internet Explorer 7 y el resto de los navegadores se verá verde.

Además de estos hacks que ya conocemos existen otros que se pueden ejecutar con javascript, pero estos no los he probado, por lo tanto, mas adelante creare una entrada para contarles sobre estos, mientras tanto nos veremos pronto.