CSS Browser Selector o cómo olvidarnos de los hacks en CSS

0
8734

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:

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:

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:

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.

Dejar respuesta

Please enter your comment!
Please enter your name here