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.
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
- Página oficial, documentación y demo de CSS Browser Selector: http://rafael.adm.br/css_browser_selector/
- Descarga
Dicotomías relacionadas con el diseño web en pqpq.es
- ¿Apoyas la campaña en contra de IE6?
- El mejor y el peor tipo de letra para web
- ¿Diseño web líquido o estático?
- Diseño web ¿Flash o XHTML?
- Navegador: IE, Firefox, Opera, Safari, Flock o Chrome
- ¿Crees que es importante cumplir los estándares web del W3C?
- Abrir enlace externo | Misma ventana vs. Nueva ventana
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:
- Suscripción Anual Online: sólo 189€
- Suscripción TOTAL Online: por 289€ te podrás descargas todos los cursos a tu equipo.
Cualquier duda ponte en contacto, estaremos encantados de atenderte.
RT @ceslava: CSS específico para cada navegador y SO: La forma más habitual de especificar una hoja de estilos … http://bit.ly/8c7iwj