Como usar estilos diferenciados por navegador

css_validPara 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.

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