CSS hacky – přehled
Tabulka uvádí nejznámější CSS hacky (někdy bývají též označovány „CSS triky“) a jejich použitelnost v různých prohlížečích na různých operačních systémech.
V prvním sloupci tabulky je uvedena speciální CSS konstrukce a další sloupce ukazují, zda je určitý prohlížeč (verze) na určitém operačním systému bude či nebude aplikovat. Kliknutím na konkrétní CSS hack si můžete otestovat, jak se s ním vypořádá váš prohlížeč (anglicky).
Pokud není uvedeno jinak, platí údaje v tabulce většinou i pro vyšší verze téhož prohlížeče.
CSS zápis | Windows | Mac OS X | Macintosh | Jiný | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
IE | Mz | Op | IE | Mz | Op | Sf | IE | Mz | Op | Ko | |||
7 | 6 | 5.5 | 1 | 8 | 5 | 1 | 8 | 2 | 5 | 1 | 6 | 3 | |
CSS zápis | 7 | 6 | 5.5 | 1 | 8 | 5 | 1 | 8 | 2 | 5 | 1 | 6 | 3 |
IE | Mz | Op | IE | Mz | Op | Sf | IE | Mz | Op | Ko | |||
Windows | Mac OS X | Macintosh | Jiný | ||||||||||
voice-family:“\“}\““;voice-family:inherit;property:value; |
Y | Y | N | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y |
p\roperty:value; |
Y | Y | N | Y | Y | Y | Y | Y | Y | Y | Y | Y | N |
/*/*/property:value;/* */ |
Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y |
/*/*//*/property:value;/* */ |
N | N | N | N | N | N | N | N | N | N | N | N | N |
div#test |
Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y |
head:first-child+body div |
Y | N | N | Y | Y | Y | Y | Y | Y | Y | Y | N | Y |
body>div |
Y | N | N | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y |
html[xmlns] div |
Y | N | N | Y | Y | N | Y | Y | Y | N | Y | Y | Y |
@import „styles.css“ |
Y | Y | Y | Y | Y | N | Y | Y | Y | N | Y | Y | Y |
@import „styles.css“ |
Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y |
@import url(styles.css) |
Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y |
@import url(„styles.css“) |
Y | Y | Y | Y | Y | N | Y | Y | Y | N | Y | Y | Y |
@import url(„styles.css“) |
Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y |
@import „null?\“\{„;@import „styles.css“; |
Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y |
@media all{/* rules */} |
Y | Y | Y | Y | Y | N | Y | Y | Y | N | Y | Y | Y |
<link media=“all“> |
Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y |
<link media=“All“> |
Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y |
* html div |
N | Y | Y | N | N | Y | N | N | N | Y | N | N | N |
*+html div |
Y | N | N | N | ? | ? | ? | ? | ? | ? | ? | ? | ? |
i{content:“\“/*“}div{property:value} |
Y | Y | N | Y | Y | Y | Y | Y | Y | Y | Y | Y | N |
/* \*/div{property:value}/* */ |
Y | Y | Y | Y | Y | N | Y | Y | Y | N | Y | Y | Y |
html*#test |
Y | Y | Y | Y | N | Y | Y | N | Y | Y | Y | ? | N |
_property:value |
N | Y | Y | N | N | N | N | N | N | Y | N | N | N |
*property:value |
Y | Y | Y | N | ? | ? | ? | ? | ? | ? | ? | ? | ? |
@media tty {i{content:“\“;/*“ „*/}} @import „styles.css“; /*“;}}/* */ |
N | N | Y | N | N | N | N | N | N | N | N | N | N |
@media tty {i{content:“\“;/*“ „*/}}; @import „styles.css“; {;}/*“;}}/* */ |
N | N | N | N | N | N | N | N | N | N | N | N | N |
@media tty {i{content:“\“;/*“ „*/}}@m; @import „styles.css“; /*“;}}/* */ |
N | N | Y | N | N | N | N | N | N | N | N | N | N |
/*\*//*/@import „styles.css“;/**/ |
N | N | N | N | N | Y | N | N | N | Y | N | N | N |
Poznámky k tabulce
- Při výběru CSS hacku vybírejte raději ze skupiny hacků validních a využívajících nedostatečné implementace CSS. U těchto hacků lze předpokládat jejich spolehlivou funkčnost. Vyhněte se hackům, které využívají chybné implementace CSS nebo nejsou validní. Ušetříte si řadu těžko předvídatelných problémů.
- Tabulka je založena na originální tabulce css filters (css hacks) (Kevin C. Smith), která byla převzata s laskavým svolením autora. Vzhledem k velkému rozsahu původní tabulky byly vypuštěny některé prohlížeče, které se již v praxi nepoužívají (podle údajů serveru W3Schools).
- Český popis některých CSS hacků naleznete v sérii článků Individualizace stylopisů k eliminaci chyb prohlížečů.
Odkazy a zdroje
Nejdůležitější informace
- css filters (css hacks) – původní, výše citovaná, tabulka – Kevin C. Smith (Centricle.com, 15. 4. 2007)
- Hide CSS from browser – zevrubná tabulka komatibility at-pravidla (@import, 23. 9. 2004)
- CssHack – rozcestník na další stránky o hackování kaskádových stylů (css-discuss, 2. 12. 2006)
Správné cesty CSS individualizace v IE
- About Conditional Comments (MSDN)
- Conditional comments – Peter-Paul Koch (QuirksMode)
- Hack-free CSS for IE – Arve Bersvendsen (Virtuelvis)
- IE5 is IE5 except when it isn“t – Arve Bersvendsen (Virtuelvis)
Zajímavé články
- Keep CSS Simple – skvělý článek o tom, proč nepoužívat CSS hacky – Peter-Paul Koch (Digital Web Magazine, 6. 11. 2003
- Box Model Hack – patrně první stránka o CSS hacku – Tantek Çelik (Tantek“s Thoughts)
- Tricking Browsers and Hiding Styles – Eric Meyer (Eric Meyer on CSS)
- CSS Hacks – Peter-Paul Koch (QuirksMode)
- Integrated Web Design: Strategies for Long-Term CSS Hack Management – Molly Holzschlag (InformIT.com, 25. 6. 2004)
Zdroje v češtině
- IE Brouci (Chyby / Bugy IE) – web se věnuje implementačním chybám v prohlížečích jako jediný český web svého druhu – Jaroslav „Dero“ Polakovič
- Podmíněné komentáře v Internet Exploreru – Pavel Růžička (Interval.cz, 18. ledna 2002)
- Různý CSS styl v různých prohlížečích – Dušan Janovský (Jak psát web)
- Rozlišení jednotlivých prohlížečů a jejich verzí – Petr Weida (About Weblog, 8. 7. 2004)
- Explorerové síto – Petr Staníček (Pixylophone, 28. 6. 2004)
Mohlo by vás také zajímat
-
inPage AI: Jak na generování obsahu
18. července 2024 -
Certifikáty Entrust ztratí důvěru Google Chrome
8. července 2024 -
10 nejpopulárnějších programovacích jazyků a jejich využití
9. listopadu 2023 -
Zvýšení výkonu WiFi signálu: Jak a proč používat WiFi zesilovače
28. června 2023
Nejnovější
-
Doména .io v ohrožení: Co přinese předání Čagoských ostrovů?
10. října 2024 -
Jak se chránit před podvody na internetu – část 1
8. října 2024