hacks-css

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