This guide provides a comprehensive reference for CSS browser support, designed to help developers plan cross-browser compatible designs efficiently. Covering everything from basic CSS properties to modern features like Grid, Flexbox, and CSS4 pseudo-classes, it presents practical version numbers for major browsers including Chrome, Firefox, Safari, Edge, Internet Explorer, iOS Safari, and Android. By consulting this guide, developers can quickly determine which CSS features require fallbacks, prefixes, or polyfills. Organized by feature categories, it allows rapid lookups and ensures robust styling strategies for both desktop and mobile environments. Whether building responsive layouts or leveraging cutting-edge CSS, this reference supports informed, efficient development.
📊 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 |
Universal support |
| background-color |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Universal support |
| font-family |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
Universal support |
| margin |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
Universal support |
| padding |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
Universal support |
| border |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Universal support |
| width |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Universal support |
| height |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Universal support |
| display |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Universal support |
| position |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 2 |
Universal support |
| float |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Universal support |
📊 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 |
Requires -webkit- prefix in older versions |
| box-shadow |
10 |
4 |
5.1 |
12 |
9 |
5 |
4 |
CSS3 |
Requires -webkit- prefix in older versions |
| text-shadow |
2 |
3.5 |
4 |
12 |
10 |
4 |
2.1 |
CSS3 |
No prefix needed |
| opacity |
1 |
1 |
2 |
12 |
9 |
2 |
1 |
CSS3 |
filter: alpha() fallback for IE8 |
| rgba() |
1 |
3 |
3.1 |
12 |
9 |
3.2 |
2.1 |
CSS3 |
Fallback to hex needed for older browsers |
| transform |
36 |
16 |
9 |
12 |
9 |
9 |
3 |
CSS3 |
Requires -webkit- prefix in older versions |
| transition |
26 |
16 |
9 |
12 |
10 |
9 |
4 |
CSS3 |
Requires -webkit- prefix in older versions |
| linear-gradient |
26 |
16 |
7 |
12 |
10 |
7 |
4.4 |
CSS3 |
Heavy prefix requirements |
📊 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 use -ms-flex |
| flex-direction |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE uses different syntax |
| flex-wrap |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE11+ only |
| justify-content |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE uses -ms-flex-pack |
| align-items |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE uses -ms-flex-align |
| flex-grow |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE uses -ms-flex-positive |
| flex-shrink |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE uses -ms-flex-negative |
| order |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE uses -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 use old syntax with -ms- prefix |
| grid-template-columns |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE uses -ms-grid-columns |
| grid-template-rows |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE uses -ms-grid-rows |
| grid-gap |
57 |
52 |
10.1 |
16 |
No |
10.3 |
57 |
CSS3 |
Use gap instead newer syntax |
| grid-column |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE uses -ms-grid-column |
| grid-row |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE uses -ms-grid-row |
| justify-items |
57 |
52 |
10.1 |
16 |
11 |
10.3 |
57 |
CSS3 |
Limited IE support |
📊 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 |
Not supported in IE |
| calc() |
26 |
16 |
7 |
12 |
9 |
7 |
4.4 |
CSS3 |
Limited function support in older versions |
| clamp() |
79 |
75 |
13.1 |
79 |
No |
13.4 |
79 |
CSS4 |
Modern browsers only |
| filter |
53 |
35 |
9.1 |
12 |
No |
9.3 |
53 |
CSS3 |
Limited IE support with -ms-filter |
| clip-path |
55 |
3.5 |
13.1 |
12 |
No |
13.1 |
55 |
CSS3 |
Requires -webkit- prefix |
| object-fit |
32 |
36 |
10 |
16 |
No |
10 |
32 |
CSS3 |
Not supported in IE |
| aspect-ratio |
88 |
89 |
15 |
88 |
No |
15 |
88 |
CSS4 |
Modern browsers only |
📊 Pseudo-class Support
| Selector |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| :hover |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS1 |
Universal support |
| :focus |
1 |
1 |
1 |
12 |
8 |
1 |
1 |
CSS2 |
Universal support |
| :first-child |
1 |
1 |
3 |
12 |
7 |
1 |
1 |
CSS2 |
Universal support |
| :last-child |
1 |
1 |
3 |
12 |
9 |
1 |
1 |
CSS3 |
IE9+ only |
| :nth-child() |
1 |
3.5 |
3 |
12 |
9 |
3.2 |
1 |
CSS3 |
IE9+ only |
| :not() |
1 |
1 |
3.2 |
12 |
9 |
3.2 |
1 |
CSS3 |
IE9+ only limited selector support |
| :focus-visible |
86 |
85 |
15.4 |
86 |
No |
15.4 |
86 |
CSS4 |
Modern browsers only |
| :has() |
105 |
121 |
15.4 |
105 |
No |
15.4 |
105 |
CSS4 |
Very modern browsers only |
/* Cross-browser reset */
* {
box-sizing: border-box;
}
/* Flexbox with fallbacks */
.flex-container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
/* Grid with IE fallback */
.grid {
display: -ms-grid;
display: grid;
}
To ensure maximum cross-browser compatibility, always provide fallbacks for newer CSS properties and use a progressive enhancement strategy. Testing across target browsers, particularly mobile Safari and older IE versions, is crucial. Employ CSS preprocessors or autoprefixer tools to automatically handle vendor prefixes for older browsers. Use the @supports rule to conditionally apply modern features like Grid or Flexbox without breaking older layouts. Keep in mind your audience’s browser usage statistics and consider lightweight fallbacks where needed. Tools like “Can I Use” help track support trends, and combining these practices ensures reliable, future-proof styling for real-world projects.
