En el «head« del HTML del sitio incluimos lo siguiente:
<style type="text/css"> <!-- @import url(files/css/FFstyles.css) screen; --> </style>
Este código es independiente de la línea que llama al archivo CSS original del sitio. Lo que queremos lograr, es «importar» una hoja de estilos alterna o más bien, complementaria, con estilos específicos para Firefox.
Y, ¿por qué sólo para Firefox?.
Simple, la regla @import es completamente ignorada por Internet Explorer, por lo que este nuevo CSS importado sólo lo va a leer el Firefox, y como el @import tiene prioridad en cuanto a la jerarquía de importancia de los estilos declarados, estos sobreescribirán a los que ya fueron declarados en la hoja de estilos original del sitio.
Esto nos da una gran posibilidad de crear estilos específicos para Firefox, que el IE no los tomará en cuenta, dándonos así un control mucho mayor sobre la presentación final del sitio.
Actualización 4/11/11
Esta entrada tiene ya 4 años y en su día ni siquiera hablábamos de Chrome ni de dispositivos móviles.
Hay muchos hacks para apuntar a los navegadores, para que nuestros estilos sean distintos según el navegador y su versión.
3 soluciones
- Puedes utilizar bien distintas hojas mediante condicionales para IE
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" />< ![endif]--> <!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" />< ![endif]-->
- O cualquiera de estos hacks
/***** Selector Hacks ******/ /* IE6 and below */ * html #uno { color: red } /* IE7 */ *:first-child+html #dos { color: red } /* IE7, FF, Saf, Opera */ html>body #tres { color: red } /* IE8, FF, Saf, Opera (Everything but IE 6,7) */ html>/**/body #cuatro { color: red } /* Opera 9.27 and below, safari 2 */ html:first-child #cinco { color: red } /* Safari 2-3 */ html[xmlns*=""] body:last-child #seis { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:nth-of-type(1) #siete { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:first-of-type #ocho { color: red } /* saf3+, chrome1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { #diez { color: red } } /* iPhone / mobile webkit */ @media screen and (max-device-width: 480px) { #veintiseis { color: red } } /* Safari 2 - 3.1 */ html[xmlns*=""]:root #trece { color: red } /* Safari 2 - 3.1, Opera 9.25 */ *|html[xmlns*=""] #catorce { color: red } /* Everything but IE6-8 */ :root *> #quince { color: red } /* IE7 */ *+html #dieciocho { color: red } /* Firefox only. 1+ */ #veinticuatro, x:-moz-any-link { color: red } /* Firefox 3.0+ */ #veinticinco, x:-moz-any-link, x:default { color: red } /* FF 3.5+ */ body:not(:-moz-handler-blocked) #cuarenta { color: red; } /***** Attribute Hacks ******/ /* IE6 */ #once { _color: blue } /* IE6, IE7 */ #doce { *color: blue; /* or #color: blue */ } /* Everything but IE6 */ #diecisiete { color/**/: blue } /* IE6, IE7, IE8 */ #diecinueve { color: blue\9; } /* IE7, IE8 */ #veinte { color/*\**/: blue\9; } /* IE6, IE7 -- acts as an !important */ #veintesiete { color: blue !ie; } /* string after ! can be anything */ /* IE8, IE9 */ #anotherone {color: blue\0/;} /* must go at the END of all rules */
- CSS Browser Selector: Esta solución que mediante javascript y la detección del navegador se añaden clases al HTML
gracias!
algun ejemplo de como se hace… porque es muy bonito el texto pero no hay ejemplo….
@Javier, está perfectamente explicado y no es un artículo que requiera ninguna demo. Si no tienes conocimientos avanzados de CSS no te sirve este artículo.
Mira, no se que decirte chaval… Pero esto que comentas no tiene nada que ver con Firefox. O más bien, tiene que ver con todos los navegadores menos IE.
Si no, haz la prueba y verás como los cambios que metas en css/FFstyles.css aparecen también en Chrome y otros.
Así que esta bien, si cambias el título de tu post y pones «para navegadores estándar» o algo así.
Saludos.
Pues tienes cierta razón chaval, lo que ocurre es que en la fecha de publicación de este post (2007) no existía Chrome y básicamente nos preocupábamos por Firefox e IE.
De todas formas lo actualizo por si alguien no lee la fecha.
Gracias