CSS avanzado

6.6. Selector de navegador

Los selectores de navegador permiten aplicar reglas CSS a navegadores específicos. Aunque se trata de una idea similar a los comentarios condicionales, su gran ventaja es que funcionan en cualquier navegador y que no se limitan a seleccionar solamente el navegador.

El siguiente ejemplo muestra cómo aplicar diferentes reglas CSS en función del navegador utilizando los selectores de navegador:

.ie p  { ... }   /* estilos de los párrafos en Internet Explorer */
.ie6 p { ... }   /* estilos de los párrafos en Internet Explorer 6 */
.ff3 p { ... }   /* estilos de los párrafos en Firefox 3 */

Como CSS no incluye por defecto los selectores de navegador, se debe recurrir a soluciones basadas en el lenguaje de programación JavaScript. Una de estas soluciones ha sido creada por el diseñador Rafael Lima y se denomina CSS Browser Selector.

La solución de CSS Browser Selector consiste en ejecutar un pequeño código JavaScript cuando se carga la página de forma que se añada una clase en el elemento <html> en función del navegador utilizado por el usuario.

El primer paso consiste en añadir el siguiente código JavaScript en la sección <head> de la página:

<head>
...
<script type="text/javascript">
/*
CSS Browser Selector v0.2.7
Rafael Lima (http://rafael.adm.br)
http://rafael.adm.br/css_browser_selector
License: http://creativecommons.org/licenses/by/2.5/
Contributors: http://rafael.adm.br/css_browser_selector#contributors
*/
var css_browser_selector = function() {
var ua=navigator.userAgent.toLowerCase(),
is=function(t){return ua.indexOf(t) != -1;},
h=document.getElementsByTagName('html')[0],
b=(!(/opera|webtv/i.test(ua))&&/msie (\d)/.test(ua))?('ie ie'+RegExp.$1):is('firefox/2')?'gecko ff2':is('firefox/3')?'gecko ff3':is('gecko/')?'gecko':is('opera/9')?'opera opera9':/opera (\d)/.test(ua)?'opera opera'+RegExp.$1:is('konqueror')?'konqueror':is('applewebkit/')?'webkit safari':is('mozilla/')?'gecko':'',
os=(is('x11')||is('linux'))?' linux':is('mac')?' mac':is('win')?' win':'';
var c=b+os+' js'; h.className += h.className?' '+c:c;
}();
</script>
...
</head>

Una vez añadido el código anterior, cada vez que un usuario accede a la página se añade una clase al elemento <html> que indica el navegador y sistema operativo utilizados:

/* navegador Firefox3, sistema operativo Windows, JavaScript habilitado */
<html class="gecko ff3 win js" ...>

/* navegador Internet Explorer, sistema operativo Windows, JavaScript habilitado */
<html class="ie ie8 win js" ...>

/* navegador Firefox 3, sistema operativo Linux, JavaScript habilitado */
<html class="gecko ff3 linux js" ...>

Las siguientes tablas muestran las clases que añade CSS Browser Selector en función del navegador y sistema operativo:

Clase Sistema Operativo
win Cualquier versión de Windows
linux Cualquier versión y/o distribución de Linux
mac Cualquier versión de Mac OS
Clase Navegador
ie Cualquier versión de Internet Explorer
ie5 Internet Explorer 5
ie6 Internet Explorer 6
ie7 Internet Explorer 7
ie8 Internet Explorer 8
gecko Cualquier versión de Mozilla, Firefox y Camino
ff2 Firefox 2
ff3 Firefox 3
opera Cualquier versión de Opera
opera8 Opera 8
opera9 Opera 9
konqueror Cualquier versión de Konqueror
webkit, safari Cualquier versión de Safari y Shiira

Además, también se añade la clase js cuando el navegador tiene activado el soporte de JavaScript.

Como todos los valores anteriores se añaden como clase de <html>, en los navegadores que soportan correctamente los estándares es posible combinar varias clases para restringir aún más el alcance del selector:

/* estilos de los párrafos en Firefox 3 de Windows */
.ff3.win p { ... }
/* estilos de los párrafos en Firefox 3 de Linux */
.ff3.linux p { ... }
/* estilos de los párrafos en Firefox 3 de Mac OS */
.ff3.mac p { ... }

La versión más reciente de CSS Browser Selector se puede obtener a través del repositorio http://github.com/rafaelp/css_browser_selector/ donde también se encuentra una versión comprimida para mejorar ligeramente el rendimiento.