19/03/13 Racó tècnic » CSS hacks para Firefox, , Chrome, , … » Print

- Racó tècnic - http://www.racotecnic.com -

CSS hacks para Firefox, Internet Explorer, Chrome, Opera, Safari… Posted By Booletaire On 8 febrer 2010 @ 23:38 In Programació,Web | 43 Comments

Todos sabemos lo divertido y emocionante que es hacer la compatibilidad crossbrowser de nuestras páginas web.

Por suerte para nosotros, existen un gran número de hacks CSS que podemos utilizar en cada una de las versiones de cada navegador para ayudarnos a poder mostrar por igual los contenidos de una web en todos los navegadores.

Partiré de este estilo:

.selector { color: #CCCCCC; }

Empezaré por Internet Explorer, dado que es para el que usualmente se necesitan más hacks:

Internet Explorer 6

.selector { _color: #CCCCCC; }

Recordad que IE6 no interpreta la propiedad (o palabra clave..) de CSS “!important” por lo que podéis jugar con ello (aunque no es lo más recomendable):

Internet Explorer 6 (!important)

.selector { color: #CCCCCC !important; color: #000000; /* Éste estilo sólo se aplicará a Internet Explorer 6 */ }

Internet Explorer 7 y anteriores:

.selector { *color: #CCCCCC; }

Internet Explorer 8

Este es un poco putilla, ya que el mismo hack de IE8 a veces lo interpreta IE7… así que, si nos interesa, primero habrá que poner algo que interprete únicamente IE7 y después hay que poner el hack de IE8:

/* Interpretado únicamente por IE7 (actúa como un !important) */ *:first-child+html .selector { color: #CCCCCC; } .selector { color /*\**/: #CCCCCC\9 /* Sin punto y coma!! */ }

Todas las versiones de Internet Explorer www.racotecnic.com/2010/02/css-hacks-para-firefox-internet-explorer-chrome-opera-safari/print/ 1/4 19/03/13 Racó tècnic » CSS hacks para Firefox, Internet Explorer, Chrome, Opera, Safari… » Print .selector { color: #CCCCCC\9 /* Sin punto y coma!! */ }

Internet Explorer 7 y demás navegadores modernos (incluido IE8)

html>body .selector { color: #CCCCCC; }

Todos los navegadores modernos (incluido IE8)

html>/**/body .selector { color: #CCCCCC; }

Opera 9.27 y anteriores

html:first-child .selector { color: #CCCCCC; }

Safari

html[xmlns*=""] body:last-child .selector { color: #CCCCCC; }

Safari 3+, Opera 9+, Firefox 3.5+ y Chrome 1+

body:nth-of-type(1) .selector { color: #CCCCCC; } /* Otra opción... */ body:first-of-type .selector { color: #CCCCCC; }

/* Y otra más... */ @media screen and (--min-device-pixel-ratio:0) { .selector { color: #CCCCCC; } }

Safari 3+ y Chrome 1+

@media screen and (-webkit-min-device-pixel-ratio:0) { .selector { color: #CCCCCC; } }

/* Otra opción... */ body:nth-of-type(1) .selector{ color: #CCCCCC; }

Todas las versiones de Firefox

@-moz-document url-prefix() { www.racotecnic.com/2010/02/css-hacks-para-firefox-internet-explorer-chrome-opera-safari/print/ 2/4 19/03/13 Racó tècnic » CSS hacks para Firefox, Internet Explorer, Chrome, Opera, Safari… » Print .selector { color: #CCCCCC; } }

Cualquier (incluido Firefox)

*>.selector { color: #CCCCCC; }

Firefox 1.5+

.selector, x:-moz-any-link, x:only-child { color: #CCCCCC; }

Firefox 2 y versiones anteriores

body:empty .selector { color: #CCCCCC; }

/* Otra opción... */ html>/**/body .selector, x:-moz-any-link { color: #CCCCCC; }

Firefox 3 (y quizás más nuevos)

html>/**/body .selector, x:-moz-any-link, x:default { color: #CCCCCC; }

No he probado todos ellos así que si veis alguno que no funciona, por favor, hacédmelo saber para que pueda buscar alguna alternativa (o eliminarlo…).

Además os invito a que añadáis cualquier hack de CSS que no haya puesto comentando esta entrada

Páginas de referencia:

Otro hack CSS para Safari @ Anieto [1] CSS hacks for differents versions of Firefox @ Perishable Press [2] CSS hack for and Safari 3.1 @ Evotech [3] CSS hack for Internet Explorer 8 @ Acid Martin [4] Hacks CSS para todos los navegadores… @ Drauta [5]

Entrades relacionades:

1. Color Explorer [6] 2. Spoon App Studio: Cuelga tus aplicaciones en internet para usarlas con el navegador [7] 3. Smashing magazine: Diferencias entre IE6, IE7 e IE8 [8] 4. Cracking cuenta premium de Megaupload vía Firefox [9] 5. Pantalla completa con HTML5 [10]

Article printed from Racó tècnic: http://www.racotecnic.com www.racotecnic.com/2010/02/css-hacks-para-firefox-internet-explorer-chrome-opera-safari/print/ 3/4 19/03/13 Racó tècnic » CSS hacks para Firefox, Internet Explorer, Chrome, Opera, Safari… » Print URL to article: http://www.racotecnic.com/2010/02/css-hacks-para-firefox-internet- explorer-chrome-opera-safari/

URLs in this post:

[1] Otro hack CSS para Safari @ Anieto: http://www.anieto2k.com/2008/01/23/otro-css- hack-para-safari/ [2] CSS hacks for differents versions of Firefox @ Perishable Press: http://perishablepress.com/press/2009/06/28/css-hacks-for-different-versions-of- firefox/ [3] CSS hack for Google Chrome and Safari 3.1 @ Evotech: http://www.evotech.net/blog/2008/09/css-hack-for-google-chrome-and-safari-31/ [4] CSS hack for Internet Explorer 8 @ Acid Martin: http://acidmartin.wordpress.com/2009/06/04/css-hack-for-internet-explorer-8/ [5] Hacks CSS para todos los navegadores… @ Drauta: http://www.drauta.com/articulos/hacks-css-para-todos-los-navegadores-incluido- explorer-8/ [6] Color Explorer: http://www.racotecnic.com/2009/05/color-explorer/ [7] Spoon App Studio: Cuelga tus aplicaciones en internet para usarlas con el navegador: http://www.racotecnic.com/2009/10/spoon-app-studio-cuelga-tus-aplicaciones-en- internet-para-usarlas-con-el-navegador/ [8] Smashing magazine: Diferencias entre IE6, IE7 e IE8: http://www.racotecnic.com/2010/02/smashing-magazine-diferencias-entre-ie6-ie7-e- ie8/ [9] Cracking cuenta premium de Megaupload vía Firefox: http://www.racotecnic.com/2009/03/cracking-cuenta-premium-de-megaupload-via- firefox/ [10] Pantalla completa con HTML5: http://www.racotecnic.com/2012/05/pantalla- completa-con-html5/

Racó Tècnic by underave.net is licensed under a Creative Commons Reconocimiento-No comercial- Compartir bajo la misma licencia 3.0 España License. 2009 Racó tècnic. Some rights reserved

www.racotecnic.com/2010/02/css-hacks-para-firefox-internet-explorer-chrome-opera-safari/print/ 4/4