1 Jue Mayo 13, 2010 7:16 pm
Muchos webmasters sabemos que el diseño de una página web es muy importante, por lo tanto el diseñar correctamente a veces se vuelve un dolor de cabeza ya que no todos los navegadores llevan el mismo estandar y tenemos que recurrir a "trucos" para que se vea bien en todos ellos, para aminorar un poco ese dolor de cabeza les dejo aqui unos hacks que sirven para varios navegadores y otros especificamente para algunos (por ejemplo IE):
Para IE 6:
* html {}
Para IE 7:
* + html/*/ * /**/ body {}
Para IE 8:
head/*/+body/**/ {}
Para IE7 y superiores:
*:first-child+html {}
Para navegadores modernos incluyendo IE 7 y 8:
html>body {}
Para navegadores modernos incluyendo IE 8:
html>/**/body {}
Para todos los navegadores modernos (excluyendo IE en todas sus versiones):
html>/*/*/body {}
Para Opera del 7.2 al 9.2:
html:first-child {}
Para Opera 9.5, Konqueror 3.5.x y Safari 3:
body:only-of-type {}
Para Safari 2, 3 y Konqueror:
html[xmlns*=""] body:last-child {}
Para Safari 3 y basados en Webkit (al parecer no funciona en Chrome):
body:not(:root:root) {}
Para Safari 4 y Google Chrome:
@media screen and (-webkit-min-device-pixel-ratio:0) {
.myClass { background-color: #FF0000; }
#myId {color: #0000FF;}
p, a, li {text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
}
Aquí pueden ver una tabla comparativa de otros Hacks CSS, incluyendo algunos anteriores:
http://uninstallme.com/ejemplos/tabla-soporte-css/
Despues veremos aquellos hacks que usan un guion, un punto, etc. antes de la propiedad o en el valor.
Saludos!
Para IE 6:
* html {}
Para IE 7:
* + html/*/ * /**/ body {}
Para IE 8:
head/*/+body/**/ {}
Para IE7 y superiores:
*:first-child+html {}
Para navegadores modernos incluyendo IE 7 y 8:
html>body {}
Para navegadores modernos incluyendo IE 8:
html>/**/body {}
Para todos los navegadores modernos (excluyendo IE en todas sus versiones):
html>/*/*/body {}
Para Opera del 7.2 al 9.2:
html:first-child {}
Para Opera 9.5, Konqueror 3.5.x y Safari 3:
body:only-of-type {}
Para Safari 2, 3 y Konqueror:
html[xmlns*=""] body:last-child {}
Para Safari 3 y basados en Webkit (al parecer no funciona en Chrome):
body:not(:root:root) {}
Para Safari 4 y Google Chrome:
@media screen and (-webkit-min-device-pixel-ratio:0) {
.myClass { background-color: #FF0000; }
#myId {color: #0000FF;}
p, a, li {text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
}
Aquí pueden ver una tabla comparativa de otros Hacks CSS, incluyendo algunos anteriores:
http://uninstallme.com/ejemplos/tabla-soporte-css/
Despues veremos aquellos hacks que usan un guion, un punto, etc. antes de la propiedad o en el valor.
Saludos!