Como usar estilos diferenciados por navegador

Para los dise�adores siempre nos es un problema la incompatibilidad entre los navegadores especialmente con el IE6, para poder lograr que nuestro dise�o se vea igual en todos los navegadores muchas veces sufrimos m�s de la cuenta, existen dos formas de arreglar este problema haciendo correcciones de estilos para cada navegador usando unos simples hacks o haciendo una hoja de estilos para cada navegador que genere el problema.

La primera soluci�n es muy sencilla y no require crear otra hoja de estilos, utilizando hacks, �nico problema que tiene es que esta forma no pasa por validadores de CSS, lo cu�l es un gran problema a mi forma de ver, de todas maneras les explico como funcionan estos Hacks.

Hacks : Cuando creamos un estilo normalmente lo creamos asi:

.nombre_de_clase �{
background-color: #666;
}

Y si queremos que elas versiones del IE tengan otro estilo simplemente agregamos un detalle antes de la propiedad de la clase, de la siguiente forma.

.nombre_de_clase �{
background-color: #666;
.background-color: #fff; �(con . para IE7)
_background-color: #999; (con _ para IE6)
}

Esta es una forma muy simple y r�pida, pero como les dec�a antes no valida en est�ndares web.

La segunda forma es utilizando una propiedad If con la cual pordiamos llamara una hoja de estilos diferente para los distintos IE, este metodo no tiene ningun problema para validar est�ndares y por eso la prefiero yo, pero definitivamente es cuesti�n de gustos y necesidades. La propiedad If nos sirve para diferenciar cuando queremos que un navegador reconozca lo que se encuentra dentro de la etiqeuta If, ya sea un contenido, un script o como queresmo en este caso la vinculaci�n para una hoja de estilos, esta etiqueta funciona asi.

Etiqueta If: En el head donde agregaos las hojas de estilo podemos colocar una hoja de estilo dentro de la propiedad If que no es otra cosa que un condicionante que permitira que el contenido solo lo reconozca el navegador que nosotros querramos por ejemplo:

<!- -[if IE 6]>
<link href=”style_ie6.css” rel=”stylesheet” type=”text/css” />
<![endif]- ->

Y podemos diferenciar tanto IE 6, IE 7, IE 8 o si colocamos IE sera generico para todos los IE, definitivamente esta es una forma m�s limpia de arreglar nuestros estilos y lograr un mejor trabajo.

Espero que les sirva y lo pongan a prueba.