piotrpotera.com

Haki CSS dla przeglądarek WWW

Poniższa tabelka zawiera zestawienie selektorów CSS, które pomogą ci albo ukryć albo zaserwować pewne rzeczy konkretnym przeglądarkom. Zaznaczone na czerwono, to hacki, które wywalą ci walidator CSS i mogą zupełnie niespodziewanie przestać działać. Zwróć też uwagę na to, że niektóre sztuczki są wspólne dla różnych grup przeglądarek, np. body:first-of-type dla Firefoksa, Opery i Safari.

Jeśli zauważysz błedy lub masz inne pomysły, daj znać.

"See also..."

Firefox 2 Firefox 3 IE 6 IE 7 IE 8 Opera < 9.5 Opera 9.5/10 Safari 3 Safari 4 Safari iPhone
#foo, x:-moz-any-link { cssRule } #foo, x:-moz-any-link { cssRule } #foo { _cssRule } *:first-child+html #foo { cssRule } #foo { cssRule /*\**/: value\9 } html:first-child #foo { cssRule } body:first-of-type #foo { cssRule } @media screen and (-webkit-min-device-pixel-ratio:0) { #foo { cssRule } } body:first-of-type #foo { cssRule } @media screen and (max-device-width: 480px) { #foo { cssRule } }
@-moz-document domain('[twoja domena]') { #foo { cssRule } } #foo, x:-moz-any-link, x:default { cssRule } #foo { -cssRule } *+html #foo { -cssRule } @media screen and (-webkit-min-device-pixel-ratio:0) { #foo { cssRule } } html* #foo { cssRule }
@-moz-document domain('[twoja domena]') { #foo { cssRule } } * html #foo { cssRule } #foo { cssRule !important!; }
body:first-of-type #foo { cssRule } #foo { *cssRule } :root *> #foo { cssRule }
#foo { cssRule !important!; }
#foo { cssRule !ie; }

!ie jest traktowane jak
!important

html* #foo { cssRule }
#foo { cssRule: value\9 }