CSS triky

Přehled CSS triků a jejich kompatibility v prohlížečích:

Windows Mac OS X Macintosh Other
IE Mz Ns Op iC IE Mz Ns Om Op IE Mz Ns Op Ko
6 5 4 1 7 6 4 7 6 5 2 5 1 7 6 4 6 5 5 4 1 7 6 4 6 5 3
6 5 4 1 7 6 4 7 6 5 2 5 1 7 6 4 6 5 5 4 1 7 6 4 6 5 3
IE Mz Ns Op iC IE Mz Ns Om Op IE Mz Ns Op Ko
Windows Mac OS X Macintosh Other
<link media="All"> Y Y Y Y Y Y N Y Y Y Y Y Y Y Y N Y Y Y Y Y Y Y N Y Y Y
@import 'styles.css' Y Y N Y Y Y N Y Y Y Y N Y Y Y Y Y Y N N Y Y Y N Y Y Y
@import "styles.css" Y Y N Y Y Y N Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y N Y Y Y
@import url(styles.css) Y Y Y Y Y Y N Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y
@import url('styles.css') Y Y Y Y Y Y N Y Y Y Y N Y Y Y Y Y Y N N Y Y Y N Y Y Y
@import url("styles.css") Y Y Y Y Y Y N Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y
@media all{ …} Y Y N Y Y Y N Y Y Y N N Y Y Y N Y Y N N Y Y Y N Y Y Y
div#test Y Y Y Y Y Y N Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y
head:first-child+body div N N N Y Y Y N Y N N N Y Y Y Y N N N Y N Y Y Y N N N Y
body>div N N N Y Y Y N Y Y Y N Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y
html[xmlns] div N N N Y Y Y N Y Y Y N N Y Y Y N Y Y N N Y Y Y N Y Y Y
html*#test Y N N Y Y Y N N N N N Y Y Y Y N N Y Y N Y Y Y N ? Y N
p\roperty:value; Y N N Y Y Y N Y Y N N Y Y Y Y N Y N Y N Y Y Y N Y N N
voice-family:"\"}\"";
voice-family:inherit;
property:value;
Y N N Y Y Y N Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y N Y Y Y
i{content:"\"/*"}
div{property:value}
Y N N Y Y Y N Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y N Y Y N
@import "null?\"\{";
@import "styles.css";
Y N N Y Y Y N Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y N Y Y Y
/*/*/property:value;/* */ Y Y Y Y Y Y N Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y
/* \*/
div{property:value}
/* */
Y Y Y Y Y Y Y Y Y Y Y N Y Y Y Y Y Y N Y Y Y Y Y Y Y Y
/*/*//*/property:value;/* */ N N N N N N Y N N Y N N N N N N N Y N N N N N Y N Y N
* html div Y Y ? N N N N N N N N Y N N N N N N Y ? N N N N ? ? ?
_property:value YYY NNNNNNN NNN???NN NYN??NNNN

Poznámky k tabulce:

  • Při výběru triku vybírejte pouze ze skupiny triků validních a využívajících nedostatečné implementace CSS (jsou zvýrazněny). Vyhněte se trikům, které využívají chybné implementace CSS či dokonce nejsou validní (nejsou zvýrazněny).
  • Tabulka byla převzata s laskavým svolením autora — Kevin C Smith: css filters (css hacks) (centricle).
  • Tabulka funguje jako doplněk k sérii článků o problematice individualizace stylopisů — Jan Bien: Individualizace stylopisů k eliminaci chyb prohlížečů (Interval.cz, 8. prosince 2004).

Zdroje, souvislosti

  • Kevin C Smith: css filters (css hacks) (centricle) — původní, výše citovaná, tabulka.
  • CSS Filters and Hacks (dithered.com) — nejpodrobnější přehledy triků a jejich kompatibilit na světovém internet.
  • Hide CSS from browser — zevrubná tabulka komatibility at-pravidla @import.
  • CssHack (css-discuss) — rozcestník na další stránky o CSS tricích.

Správné cesty CSS individualizace v IE:

Zajímavé články:

Zdroje v češtině:


Copyright © Jan Bien.
W3C XHTML 1.0  | W3C CSS 2  | UAW adaptive  | Geo URL  | RDF RSS