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 | Y | Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y |
<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:"\"}\"";
|
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:"\"/*"}
|
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?\"\{";
|
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 |
/* \*/ |
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 |
Y | Y | Y | N | N | N | N | N | N | N | N | N | N | ? | ? | ? | N | N | N | Y | N | ? | ? | N | N | N | N |
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:
- About Conditional Comments (MSDN)
- Peter-Paul Koch: Conditional comments (QuirksMode)
- Arve Bersvendsen: Hack-free CSS for IE (Virtuelvis, 6. února 2004)
Zajímavé články:
- Peter-Paul Koch: Keep CSS Simple (Digital Web Magazine, 6 listopadu 2003) — skvělý článek o tom, proč nepoužívat CSS triky.
- Tantek Çelik: Box Model Hack — Patrně první stránka o CSS triku.
- Eric Meyer: Tricking Browsers and Hiding Styles (Eric Meyer on CSS)
- Peter-Paul Koch: CSS Hacks (QuirksMode)
- Molly Holzschlag: Integrated Web Design: Strategies for Long-Term CSS Hack Management (InformIT.com, 25. června 2004)
Zdroje v češtině:
- Jaroslav „Dero“ Polakovič:
IE Brouci (Chyby / Bugy IE)
(Web se věnuje implementačním chybám v prohlížečích. Je to jediný český web svého druhu u nás.) - Pavel Růžička: Podmíněné komentáře v Internet Exploreru (Interval.cz, 18. ledna 2002)
- Dušan Janovský: Různý CSS styl v různých prohlížečích (Jak psát web)
- Petr Weida: Rozlišení jednotlivých prohlížečů a jejich verzí (About Weblog 8. července 2004)
- Petr Staníček Explorerové síto (Pixylophone 28. června 2004)
- Petr Staníček The Underscore Hack (Dílna dobrého stylu)
- Publikováno: 8. prosince 2004
- Trvalý odkaz: http://www1.mraveniste.org/css/triky.html
- Autor: Jan Bien