Podpora vlastností CSS3 v moderních prohlížečích: tabulka kompatibility
Vlastnosti CSS3 jsou částečně implementovány v aktuálních verzích prohlížečů, přestože chybí úplný standard W3C. Vývojáři musí brát v úvahu předpony a minimální verze pro křížovou kompatibilitu. Níže uvedená tabulka podrobně popisuje stav implementace klíčových vlastností, včetně požadavků na předpony (-ms-, -moz-, -webkit-, -o-) a verze prohlížečů. To umožňuje přesné plánování použití funkcí v projektech.
Označení v tabulce:
- Ikonky ukazují podporu v IE, Firefox, Chrome, Safari, Opera.
- Čísla označují minimální verzi prohlížeče.
- Varianty s předponami jsou označeny zvlášť.
(Zde je umístěna rychlou přehledovou tabulka podpory CSS3 ve formátu obrázku pro rychlý pohled.)
Podrobnosti podpory podle prohlížečů
Internet Explorer podporuje vlastnosti s předponou -ms- od verze 9 a vyšší, např. border-radius, box-shadow. Firefox používá předponu -moz- do verze 16, poté mnoho vlastností přechází na standardní názvy. Chrome a Safari spoléhají na -webkit-, s podporou od verzí 4–5, postupně se od předpon odklánějí ve prospěch finálních specifikací.
Opera používá -o- a vzácněji -xv-, od verze 10.5. Kompletní tabulka pokrývá vlastnosti:
- Animace a transformace: transition, animation, transform.
- Okraje a stíny: border-radius, box-shadow.
- Pozadí a gradienty: background-clip, linear-gradient.
- Písma a text: @font-face, text-shadow.
- Rozložení: flexbox (display: flex), multi-column.
| Vlastnost | IE (verze) | Firefox (verze) | Chrome (verze) | Safari (verze) | Opera (verze) |
|---------------|-------------|-----------------|----------------|---------------|---------------|
| border-radius | 9 (-ms-) | 4 (-moz-) | 4 (-webkit-) | 5 (-webkit-) | 10.5 (-o-) |
| box-shadow | 9 (-ms-) | 4 (-moz-) | 10 (-webkit-) | 5.1 (-webkit-)| 10.5 (-o-) |
| transition | 10 | 16 | 26 | 6.1 | 12.5 |
Tato tabulka vychází z dat z roku 2012, ale principy předpon zůstávají aktuální pro starší projekty.
Strategie práce s předponami
- Automatizace: Používejte Autoprefixer v build nástrojích (Webpack, Gulp) pro přidávání předpon na základě dat z Can I Use.
- Polyfily: Pro slabou podporu aplikujte JS knihovny jako Modernizr pro detekci a fallback.
- Postprocesing: Nástroje jako PostCSS generují vendor předpony dynamicky.
- Testování: Ověřujte v emulátorech a reálných zařízeních, zaměřte se na mobilní Safari/Chrome.
- Graceful degradation: Zajistěte základní vykreslení bez CSS3 pro starší IE.
Příklad kódu s předponami pro transformaci:
.element {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}Aktualizace a zdroje
Data se vyvíjela: dnes většina vlastností funguje bez předpon v Chrome 111+, Firefox 115+, Safari 17+. Pro aktuální informace se řiďte databázemi kompatibility. Tabulka je užitečná pro audit starého kódu nebo migraci na moderní standardy.
Co je důležité
- Předpony nutné pro starší projekty: -webkit- v 80 % případů pro mobilní prohlížeče do roku 2020.
- Minimální verze: Chrome 4+, Firefox 4+, IE 9+ pokrývají 95 % uživatelů v době publikace.
- Automatizace usnadňuje: Autoprefixer eliminuje ruční přidávání.
- Testování je klíčové: Rozdíly v vykreslování stínů a gradientů mezi enginy.
- Budoucnost bez předpon: Standardizace W3C urychluje opuštění vendor-specifickích rozšíření.
— Editorial Team
Zatím žádné komentáře.