A veces un sitio web no se muestra bien en todos los navegadores (es decir, no es cross-browser). El navegador principal que crea problemas es Internet Explorer (u otro navegador, pero principalmente el que da más problemas es ese). Para resolver este problema se utilizan los hacks (o los comentarios condicionales, que no tienen nada que ver con los hacks). En esta entrada mostraremos varios tipos hacks con el uso de selectores:
Para Internet Explorer 6 y anteriores:
* html {}
Solo Internet Explorer 7
* + html/*/ * /**/ body {}
Internet Explorer 7 y superior:
*:first-child+html {}
Los dos selectores anteriores se utilizan para Internet Explorer 8 y anteriores:
*:first-child+html {}
* html {}
Solo Internet Explorer 8:
head/*/+body/**/ {}
Para Internet Explorer 5 y 5.5, se escribe el siguiente fragmento CSS dentro de una regla, de forma que lo que venga a continuación no podrá ser leido por estas versiones (5 y 5.5) :
voice-family: ""}""; voice-family:inherit;
No hace falta usar la propiedad CSS voice-family, se puede usar cualquier otra (Ejemplo: color y background).
Para navegadores modernos (Firefox, Opera…) e Internet Explorer 7 y 8:
html>body {}
Solo navegadores actuales excluyendo a Internet Explorer 7 pero no al 8:
html>/**/body {}
Solo navegadores actuales (se excluyen a todas las versiones de Internet Explorer):
html>/*/*/body {}
Para Opera 9.2x y anteriores (hasta el 7.2x):
html:first-child {}
Para Safari 2 y 3 y Konqueror (CSS3 válido):
html[xmlns*=""] body:last-child {}
Para Safari 3 y otros basados en Webkit (CSS3 válido):
body:not(:root:root) {}
Para Opera 9.5, Safari 3 y Konqueror 3.5.x:
body:only-of-type {}
Recordad que siempre podéis validar el código CSS que deseéis, usar esta tabla para ver mejor la compatibilidad de estos hacks, además de poder usar los comentarios condicionales. ¿Y tú, qué usas para “engañar” a IE?
Vía | OutBook
Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!
Interesante recopilatorio actualizado a la chapuza ie8, mucha información hay sobre hacks y apaños para usarlos solo en casos de extrema necesidad. Aunque alguna vez los usé me cansé de ellos y de no pasar validaciones, solucioné la mayoría con un par de trucos:
Empecé por no dar nunca mas soporte a ie5.5 o inferior incluyendo ie5mac, si hace falta solo tocar uno o dos atributos para ie6 basta con usar el backslash ‘\’ (antes de la primera letra mayor que f) así:
elemento{atributo: valor !important; a\tributo: valor;}
Divido la css en una general y a continuación por medio de condicionales unas con los ajustes para ie6, ie7 y si acaso ie8. Si safari, opera, chrome, etc. necesitasen también ajuste se los pongo en su respectiva css la cual añado por javascript en caso de detectarlos. Así en un futuro cuando mejoren las cosas y no haya necesidad de estos apaños basta con borrar esas css anexas.