CSS específico para cada navegador y SO

La forma más habitual de especificar una hoja de estilos según el navegador es a través de los comentarios condicionales en el head. Menos recomendable son los hacks que incluyamos en el CSS.

Gracias a este pequeño javascript, CSS Browser Selector, podemos utilizar distintos selectores según el navegador, el Sistema Operativo y si tienen o no javascript habilitado.

image

Sintaxis y uso

El selector tendrá esta sintaxis:

.[Sistema Operativo].[navegador]

Por ejemplo la siguiente regla mostrará los h1 rojos sólo en el navegador IE7 bajo Windows:

.win.ie7 h1 {color: red;}

Esta regla los mostrará en azul para cualquier sistema operativo en Firefox

.gecko h1 {color: blue;}

Es decir podemos especificar el SO y/o el navegador.

Otra posibilidad es definir estilos según el usuario tenga javascript habilitado o no.

Si el usuario tiene habilitado javascript se aplicará la siguiente regla que ocultará el(los) elemento(s) que lleven la clase .fade. Lógicamente si no tienen javascript habilitado nada de lo aquí­ dicho funcionará.

.js .fade {display:none;}

Sistemas Operativos

  • win – Microsoft Windows
  • linux – Linux (x11 y linux)
  • mac – Mac OS
  • freebsd – FreeBSD
  • ipod – iPod Touch
  • iphone – iPhone
  • webtv – WebTV
  • mobile – J2ME Devices (ex: Opera mini)

Navegadores:

  • ie – Internet Explorer (Todas las versiones)
  • ie8 – Internet Explorer 8.x
  • ie7 – Internet Explorer 7.x
  • ie6 – Internet Explorer 6.x
  • ie5 – Internet Explorer 5.x
  • gecko – Mozilla, Firefox (todas las versiones), Camino
  • ff2 – Firefox 2
  • ff3 – Firefox 3
  • ff3_5 – Firefox 3.5 new
  • opera – Opera (todas las versiones)
  • opera8 – Opera 8.x
  • opera9 – Opera 9.x
  • opera10 – Opera 10.x
  • konqueror – Konqueror
  • webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
  • safari3 – Safari 3.x
  • chrome – Google Chrome
  • iron – SRWare Iron

Javascript

  • js ““ Para usuarios con javascript habilitado

Enlaces

Dicotomí­as relacionadas con el diseño web en pqpq.es 

Cursos de diseño web en cursos v2b

Para aprender a tu ritmo y desde tu equipo. Todos estos cursos son en formato videotutorial y tienen la garantí­a de video2brain.

Puedes ver en esta demo más de 12 horas de ví­deotutoriales completamente gratis.

La diferencia respecto a la web oficial de video2brain es que en ceslava ofrecemos los mismos cursos con un 15% de descuento, y de que gestionamos las subvenciones de la Fundación Tripartita para que estos cursos resulten gratuitos para trabajadores residentes en España.

Si estás interesado en más de uno lo mejor es que adquieras una suscripción, acceso a TODOS los cursos de video2brain durante 1 año. Ofertas de suscripción anual:

Cualquier duda ponte en contacto, estaremos encantados de atenderte.

Escribí esto el 25/11/2009

Tu comentario

Usamos cookies para obtener datos estadísticos de su navegación y poder ofrecer publicidad contextual de terceros

ACEPTAR
Aviso de cookies