Como usar estilos diferenciados por navegador

css_validPara los diseadores siempre nos es un problema la incompatibilidad entre los navegadores especialmente con el IE6, para poder lograr que nuestro diseo se vea igual en todos los navegadores muchas veces sufrimos ms 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 solucin 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 cul 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 rpida, pero como les deca antes no valida en estndares 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 estndares y por eso la prefiero yo, pero definitivamente es cuestin 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 vinculacin 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 ms limpia de arreglar nuestros estilos y lograr un mejor trabajo.

Espero que les sirva y lo pongan a prueba.

{L
background-color: #666;
float: left;
height: 50px;
width: 50px;
.float: none;
.background-color: #0F0;
_float: right;
_background-color: #FC6
}
JE Image © 2020