CSS3-Unterstützung in Browsern: Präfixe-Tabelle

CSS3-Funktionen in modernen Browsern: Kompatibilitätstabelle

CSS3-Eigenschaften sind in aktuellen Browsern teilweise implementiert, auch ohne vollständige W3C-Standardisierung. Entwickler müssen Vendor-Präfixe und Mindestversionen für Cross-Browser-Kompatibilität berücksichtigen. Die folgende Tabelle zeigt den Status wichtiger Eigenschaften inklusive Präfix-Anforderungen (-ms-, -moz-, -webkit-, -o-) und Browser-Versionen. So können Sie die Nutzung von Features in Projekten präzise planen.

Tabellenlegende:

• Symbole zeigen Unterstützung in IE, Firefox, Chrome, Safari, Opera an.
• Zahlen geben die Mindestbrowser-Version an.
• Präfix-Varianten werden separat vermerkt.

(Hier CSS3-Unterstützungstabelle als Bild für schnellen Überblick einfügen.)

Browser-Unterstützungsdetails

Internet Explorer unterstützt Features mit dem -ms-Präfix ab Version 9+, z. B. border-radius und box-shadow. Firefox nutzte -moz- bis Version 16, danach wechselten viele Eigenschaften zu Standardnamen. Chrome und Safari setzen auf -webkit-, unterstützt ab Versionen 4–5, mit schrittweisem Wegfall der Präfixe für finale Spezifikationen.

Opera verwendet -o- (selten -xv-) ab Version 10.5. Die vollständige Tabelle umfasst Eigenschaften wie:

• Animationen und Transformationen: transition, animation, transform.
• Rahmen und Schatten: border-radius, box-shadow.
• Hintergründe und Verläufe: background-clip, linear-gradient.
• Schriften und Text: @font-face, text-shadow.
• Layouts: flexbox (display: flex), multi-column.

| Eigenschaft | IE (Version) | Firefox (Version) | Chrome (Version) | Safari (Version) | Opera (Version) |

|----------------|--------------|-------------------|------------------|------------------|-----------------|

| 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 |

Diese Tabelle basiert auf Daten aus 2012, doch die Prinzipien der Präfixe bleiben für Legacy-Projekte relevant.

Arbeiten mit Vendor-Präfixen

• Automatisierung: Nutzen Sie Autoprefixer in Build-Tools (Webpack, Gulp), um Präfixe basierend auf Can I Use-Daten hinzuzufügen.
• Polyfills: Bei schwacher Unterstützung JS-Bibliotheken wie Modernizr für Erkennung und Fallbacks einsetzen.
• Nachbearbeitung: Tools wie PostCSS erzeugen Vendor-Präfixe dynamisch.
• Tests: In Emulatoren und realen Geräten prüfen, Fokus auf mobile Safari/Chrome.
• Graceful Degradation: Sicherstellen, dass Basis-Rendering ohne CSS3 in älteren IE funktioniert.

Beispielcode mit Präfixen für Transformationen:

.element {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

Updates und Ressourcen

Die Unterstützung hat sich weiterentwickelt: Heute funktionieren die meisten Eigenschaften ohne Präfixe in Chrome 111+, Firefox 115+, Safari 17+. Prüfen Sie Kompatibilitätsdatenbanken für aktuelle Infos. Die Tabelle eignet sich hervorragend zum Auditieren alter Codes oder Migration zu modernen Standards.

Wichtige Erkenntnisse

• Präfixe für Legacy essenziell: -webkit- deckt 80 % der mobilen Browser vor 2020 ab.
• Mindestversionen: Chrome 4+, Firefox 4+, IE 9+ erreichen 95 % der Nutzer zum Veröffentlichungszeitpunkt.
• Automatisierung vereinfacht: Autoprefixer spart manuelle Arbeit.
• Tests entscheidend: Rendering-Unterschiede bei Schatten und Verläufen über Engine hinweg.
• Präfix-freie Zukunft: W3C-Standardisierung beschleunigt Verzicht auf Vendor-Erweiterungen.

— Editorial Team