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.