jueves, 11 de diciembre de 2008

Cambiar la hoja de estilo (CSS) dependiendo el navegador

La precupación y el terror de muchos desarrolladores y diseñadores web (que debemos tener todos!), es el navegador del visitante. Que si el viejo Internet Explorer 6, que si con el Internet Explorer 7, Opera, Chrome, Mozilla Firefox, y en cada uno de ellos sucede de que nuestro sitio se ve diferente. Por ejemplo, las transparencias de PNG no son soportadas por Internet Explorer 6, entonces da como resultado, una imagen con bordes blancos bastante feos. A su vez, el acomodo de los elementos suelen moverse, unos más arriba, abajo, lado izquierdo, etc.

Internet Explorer no respeta estándares, en comparación con Firefox, supuestamente para la versión 8, Internet Explorer va orientado hacia el desarrollador web , pero antes de que todos nuestros visitantes se muden a Firefox, Internet Explorer 8 u otro, tenemos que solucionar los problemas que ocurren para distintos navegadores.
La solución es: Crear diferentes hojas de estilo (CSS) para nuestra página web. Estas deben de proporcionar diferentes medidas, márgenes, etc., claro dependiendo el navegador. ¿Pero como se que navegador esta usando el visitante?, y cuando ya lo se, ¿como cambiar la hoja de estilo (css)?.
CSS proporciona comentarios condicionales, los cuales nos ayudarán a conocer los distintos navegadores y sus versiones:

Internet Explorer:

Compruebo si es Internet Explorer:
<!--[if IE]> <link rel="stylesheet" href="ie-style.css" type="text/css" />
<[end if]-->

Compruebo con gte si tiene la version 6 de Internet Explorer, es lo mismo, si cambio el 6 por el 7:
<!--[if IE 6]><link rel="stylesheet" href="ie6-style.css" type="text/css" /> <![endif]-->

Compruebo si el usuario usa versiones anteriores con lt :
<!--[if lt IE 6]><link rel="stylesheet" href="ieoldies-style.css" type="text/css" /> <![endif]-->

Otros condicionales: lte: anteriores o iguales a el. gte: igual o versiones arriba de el. gt: arriba de la version establecida (p.e. 6, sería arriba de esa versión).

Para los demás navegadores
:

FIREFOX
<!--[if FF]> <link rel="stylesheet" href="ff-style.css" type="text/css" /> <[end if]-->

OPERA
<!--[if Opera]> <link rel="stylesheet" href="opera-style.css" type="text/css" /> <[end if]-->

SAFARI
<!--[if Safari]> <link rel="stylesheet" href="safari-style.css" type="text/css" /> <[end if]-->
<!--[if Konquerer]> <link rel="stylesheet" href="konquerer-style.css" type="text/css" /> <[end if]-->

iCAB
<!--[if iCab]> <link rel="stylesheet" href="icab-style.css" type="text/css" /> <[end if]-->

FLOCK
<!--[if Flock]> <link rel="stylesheet" href="flock-style.css" type="text/css" /> <[end if]-->>


7 comentarios:

Anónimo dijo...

Hola Hector!!! dejeme felicitarle por tener un interesante blog, y le agradeceria si pudieramos
realizar un intercambio de enlaces , mis datos a enlazar es Titulo: Nuevas franquicias
Url: http://www.mejornegocios.com/ en cuanto al suyo
lo enlazariamos en http://www.mejornegocios.com/links.php espero su
respuesta, y mucha suerte en todo seo@mejornegocios.com

Anónimo dijo...

Muy bueno el post, pero me parece que el tag de Opera no funciona :S

Saludos

Anónimo dijo...

como meto el tag de safari please

Héctor Guedea dijo...

Aquí viene el código para SAFARI, revisalo por favor.

dafero dijo...

Gracias por la información me ha sido de gran ayuda.

Gracias.

Héctor Guedea dijo...

Qué tal dafero!

Me da gusto, un saludo!

José Miguel dijo...

Muy buen blog, felicidades.
He conseguido validar el XHTML de mi plantilla, pero he renunciado a validar mi hoja de estilos CCS, creo que es peor el remedio que la "enfermedad".
Saludos.