Dieses Handbuch bietet eine umfassende Referenz für die Unterstützung von CSS-Eigenschaften in verschiedenen Browsern. Es richtet sich an Entwickler, die eine plattformübergreifende Kompatibilität sicherstellen möchten. Die Übersicht deckt grundlegende CSS-Eigenschaften, CSS3- und moderne CSS4-Funktionen, Flexbox und Grid sowie Pseudo-Klassen ab. Für jede Eigenschaft werden die unterstützten Versionen von Chrome, Firefox, Safari, Edge, Internet Explorer, iOS Safari und Android angegeben, einschließlich nützlicher Hinweise zu Präfixen und Besonderheiten älterer Browser. Die tabellarische Struktur erlaubt ein schnelles Nachschlagen und erleichtert die Planung von Cross-Browser-Designs und -Layouts effizient und zuverlässig.
📊 Basic CSS Properties Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| color |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
Universelle Unterstützung |
| background-color |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Universelle Unterstützung |
| font-family |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
Universelle Unterstützung |
| margin |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
Universelle Unterstützung |
| padding |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
Universelle Unterstützung |
| border |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Universelle Unterstützung |
| width |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Universelle Unterstützung |
| height |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Universelle Unterstützung |
| display |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Universelle Unterstützung |
| position |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 2 |
Universelle Unterstützung |
| float |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Universelle Unterstützung |
📊 CSS3 Properties Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| border-radius |
5 |
4 |
5 |
12 |
9 |
4 |
2.1 |
CSS3 |
In älteren Versionen -webkit-Präfix erforderlich |
| box-shadow |
10 |
4 |
5.1 |
12 |
9 |
5 |
4 |
CSS3 |
In älteren Versionen -webkit-Präfix erforderlich |
| text-shadow |
2 |
3.5 |
4 |
12 |
10 |
4 |
2.1 |
CSS3 |
Kein Präfix erforderlich |
| opacity |
1 |
1 |
2 |
12 |
9 |
2 |
1 |
CSS3 |
IE8 benötigt filter: alpha() als Fallback |
| rgba() |
1 |
3 |
3.1 |
12 |
9 |
3.2 |
2.1 |
CSS3 |
Fallback auf Hex-Wert für ältere Browser |
| transform |
36 |
16 |
9 |
12 |
9 |
9 |
3 |
CSS3 |
In älteren Versionen -webkit-Präfix erforderlich |
| transition |
26 |
16 |
9 |
12 |
10 |
9 |
4 |
CSS3 |
In älteren Versionen -webkit-Präfix erforderlich |
| linear-gradient |
26 |
16 |
7 |
12 |
10 |
7 |
4.4 |
CSS3 |
Erfordert umfangreiche Präfixe |
📊 Flexbox Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| display: flex |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE10-11 nutzt -ms-flex |
| flex-direction |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE verwendet andere Syntax |
| flex-wrap |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
Nur IE11+ |
| justify-content |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE nutzt -ms-flex-pack |
| align-items |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE nutzt -ms-flex-align |
| flex-grow |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE nutzt -ms-flex-positive |
| flex-shrink |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE nutzt -ms-flex-negative |
| order |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE nutzt -ms-flex-order |
📊 CSS Grid Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| display: grid |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE10-11 verwendet alte Syntax mit -ms- |
| grid-template-columns |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE nutzt -ms-grid-columns |
| grid-template-rows |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE nutzt -ms-grid-rows |
| grid-gap |
57 |
52 |
10.1 |
16 |
No |
10.3 |
57 |
CSS3 |
Neuere Syntax: gap verwenden |
| grid-column |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE nutzt -ms-grid-column |
| grid-row |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE nutzt -ms-grid-row |
| justify-items |
57 |
52 |
10.1 |
16 |
11 |
10.3 |
57 |
CSS3 |
Begrenzter Support in IE |
📊 Modern CSS Features Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| custom properties |
49 |
31 |
9.1 |
16 |
No |
9.3 |
49 |
CSS3 |
Nicht in IE unterstützt |
| calc() |
26 |
16 |
7 |
12 |
9 |
7 |
4.4 |
CSS3 |
Limitierte Funktionsunterstützung in älteren Versionen |
| clamp() |
79 |
75 |
13.1 |
79 |
No |
13.4 |
79 |
CSS4 |
Nur moderne Browser |
| filter |
53 |
35 |
9.1 |
12 |
No |
9.3 |
53 |
CSS3 |
Limitierter IE-Support mit -ms-filter |
| clip-path |
55 |
3.5 |
13.1 |
12 |
No |
13.1 |
55 |
CSS3 |
Erfordert -webkit-Präfix |
| object-fit |
32 |
36 |
10 |
16 |
No |
10 |
32 |
CSS3 |
Nicht in IE unterstützt |
| aspect-ratio |
88 |
89 |
15 |
88 |
No |
15 |
88 |
CSS4 |
Nur moderne Browser |
📊 Pseudo-class Support
| Selector |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| :hover |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS1 |
Universeller Support |
| :focus |
1 |
1 |
1 |
12 |
8 |
1 |
1 |
CSS2 |
Universeller Support |
| :first-child |
1 |
1 |
3 |
12 |
7 |
1 |
1 |
CSS2 |
Universeller Support |
| :last-child |
1 |
1 |
3 |
12 |
9 |
1 |
1 |
CSS3 |
Nur IE9+ |
| :nth-child() |
1 |
3.5 |
3 |
12 |
9 |
3.2 |
1 |
CSS3 |
Nur IE9+ |
| :not() |
1 |
1 |
3.2 |
12 |
9 |
3.2 |
1 |
CSS3 |
Nur eingeschränkter IE9+ Support |
| :focus-visible |
86 |
85 |
15.4 |
86 |
No |
15.4 |
86 |
CSS4 |
Nur moderne Browser |
| :has() |
105 |
121 |
15.4 |
105 |
No |
15.4 |
105 |
CSS4 |
Nur sehr moderne Browser |
/* Cross-Browser Reset */
* {
box-sizing: border-box;
}
/* Flexbox mit Fallbacks */
.flex-container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
/* Grid mit IE-Fallback */
.grid {
display: -ms-grid;
display: grid;
}
Für maximale Kompatibilität sollten immer Fallbacks für neue CSS-Eigenschaften bereitgestellt werden. Verwenden Sie eine progressive Enhancement-Strategie und testen Sie gezielt auf relevanten Browsern, insbesondere Mobile Safari und IE. CSS-Präprozessoren wie SASS oder Tools wie Autoprefixer erleichtern die automatische Erstellung von Vendor-Präfixen. Mit der @supports-Regel lassen sich moderne CSS-Funktionen bedingt einsetzen. Behalten Sie die Browser-Marktanteile Ihrer Zielgruppe im Auge und verwenden Sie leichte Alternativen bei Bedarf. Tools wie „Can I Use“ liefern aktuelle Support-Daten und unterstützen eine konsistente Darstellung über alle Geräte und Browser hinweg.
