CSS Browser Selector o cómo olvidarnos de los hacks en CSS
0. Índice de
contenidos.
1. Entorno
Este tutorial está escrito usando el siguiente entorno:
- Hardware: Portátil Mac Book Pro 17″ (2,6 Ghz Intel Core
i7, 8 GB
DDR3) - Sistema Operativo: Mac OS X Snow Leopard 10.6.4
- Smultron (Bloc de notas)
2. Introducción y solución al problema
Como desarrollador uno de los aspectos que más me levanta dolor de cabeza es la maldita guerra para que tu página web se vea igual en todos los navegadores. No hace falta mencionar cual de ellos es el que nos presenta mayor batalla; y que es el mayor responsable de las aberraciones en las CSS llamadas hacks, como la que se muestra en el siguiente ejemplo:
|
1 2 3 4 5 |
body { background-color: #FFFFFF /* Firefox y los demás */ *background-color: #000000 /* IE7 e inferiores */ _background-color: #CCCCCC; /* Sólo IE6 */ } |
Para evitar hacer esto pero conseguir la misma funcionalidad tenemos que agradecerle a D. Rafael Lima la ocurrencia de su CSS Browser Selector. Es un fichero Javascript que se puede descargar de la siguiente
url: Descargar CSS Browser Selector
Este pequeño script lee la propiedad «navigator.userAgent» y en función de la información que incorporé va a añadir una serie de clases al elemento <html> de la página, como son el motor de renderizado del navegador, la versión del navegador, el sistema operativo y si tiene o no habilitado Javascript. Por ejemplo, si accedemos desde el Mac, con Chrome y tenemos el Javascript habilitado el resultado será <html class=»webkit chrome mac js»>. Para el mismo caso pero accediendo con Firefox 3.0 el resultado es el siguiente: <html class=» gecko ff3 mac js»>
De esta forma podemos especificar reglas CSS específicas para cada uno de los navegadores y sustituir los poco mantenibles hacks por código más legible. El ejemplo anterior quedaría de la siguiente forma:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
body{ /*Para el resto de navegadores*/ background-color: #FFFFFF; } .gecko body{ /* Para todas las versiones de Firefox*/ background-color: #FFFFFF; } .ie7 body{ /*Para la versión Internet Explorer 7*/ background-color: #0000000; } .ie6 body{ background-color: #CCCCCC; } |
Ahora podemos incluir cualquier regla CSS a un navegador y versión en concreto, con lo que ya no tiene sentido que sigamos utilizando los hacks. Para probarlo simplemente hay que descargar el script, crear un fichero HTML e incluir la referencia al script y al fichero CSS que queramos utilizar, un ejemplo podría ser el siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <title>Prueba de Browser Sniffer</title> <script type="text/javascript" src="/wp-content/uploads/tutorial-data/css_browser_selector.js"></script> <style> .ff3 body{ background-color: red; } .js p{ color: blue; } </style> </head> <body> <p>Esto es una prueba de Browser Sniffer</p> </body> </html> |
Al visualizar esta página con Firefox versión 3 veremos que el body lo pone en rojo, y si tiene habilitado javascript el color del texto saldrá en azul.
Recomiendo echar un vistazo al script para ver cuales son los elementos que soporta, añadir más versiones de navegadores es tan sencillo como editar el script e incluirlo para que coincida con la información que nos devuelve la propiedad navigator.userAgent que podemos visualizar con un simple alert y accediendo con el agente que queramos.
Saludos.
