a {
all : initial ;
}
Supported on chrome since version
37
Supported on edge since version
79
Supported on firefox since version
27
Supported on opera since version
24
Supported on safari since version
9.1
Supported on Chrome for Android since version
37
Supported on Firefox for Android since version
27
Supported on Opera Mobile since version
24
Supported on iOS Safari since version
9.3
Supported on samsung since version
3.0
Supported on android since version
37
Supported on oculus since version
5.0
Supported on WKWebview on iOS since version
9.3
h2 {
font-variant : small-caps ;
}
Supported on firefox since version
34
Supported on safari since version
9.1
Supported on Firefox for Android since version
34
Supported on iOS Safari since version
9.3
Supported on WKWebview on iOS since version
9.3
a {
break-inside : avoid ;
break-before : avoid-column ;
break-after : always ;
}
Supported on chrome since version
51
Supported on edge since version
12
Supported on firefox since version
92
Supported on opera since version
11.1
Supported on Chrome for Android since version
51
Supported on Firefox for Android since version
92
Supported on Opera Mobile since version
37
Supported on samsung since version
5.0
Supported on android since version
51
Supported on oculus since version
5.0
:root {
--some-length : 32px ;
height : var (--some-length ) ;
width : var (--some-length ) ;
}
Supported on chrome since version
49
Supported on edge since version
15
Supported on firefox since version
31
Supported on opera since version
36
Supported on safari since version
9.1
Supported on Chrome for Android since version
49
Supported on Firefox for Android since version
31
Supported on Opera Mobile since version
36
Supported on iOS Safari since version
9.3
Supported on samsung since version
5.0
Supported on android since version
50
Supported on oculus since version
5.0
Supported on WKWebview on iOS since version
9.3
.grid-1 {
gap : 20px ;
}
.grid-2 {
column-gap : 40px ;
row-gap : 20px ;
}
Supported on chrome since version
66
Supported on edge since version
16
Supported on firefox since version
61
Supported on opera since version
53
Supported on safari since version
12
Supported on Chrome for Android since version
66
Supported on Firefox for Android since version
61
Supported on Opera Mobile since version
47
Supported on iOS Safari since version
12
Supported on samsung since version
9.0
Supported on android since version
66
Supported on oculus since version
5.0
Supported on WKWebview on iOS since version
12
section {
display : grid ;
grid-template-columns : 100px 100px 100px ;
grid-gap : 10px ;
}
Supported on chrome since version
57
Supported on edge since version
16
Supported on firefox since version
52
Supported on opera since version
44
Supported on safari since version
10.1
Supported on Chrome for Android since version
57
Supported on Firefox for Android since version
52
Supported on Opera Mobile since version
43
Supported on iOS Safari since version
10.3
Supported on samsung since version
6.0
Supported on android since version
57
Supported on oculus since version
5.0
Supported on WKWebview on iOS since version
10.3
@media (width < 480px) {}
@media (480px <= width < 768px) {}
@media (width >= 768px) {}
Supported on chrome since version
104
Supported on edge since version
104
Supported on firefox since version
102
Supported on opera since version
90
Supported on safari since version
16.4
Supported on Chrome for Android since version
104
Supported on Firefox for Android since version
102
Supported on Opera Mobile since version
71
Supported on iOS Safari since version
16.4
Supported on samsung since version
20.0
Supported on android since version
104
Supported on oculus since version
23.0
Supported on WKWebview on iOS since version
16.4
div {
border-color : unset ;
color : unset ;
}
Supported on chrome since version
41
Supported on edge since version
13
Supported on firefox since version
27
Supported on opera since version
28
Supported on safari since version
9.1
Supported on Chrome for Android since version
41
Supported on Firefox for Android since version
27
Supported on Opera Mobile since version
28
Supported on iOS Safari since version
9.3
Supported on samsung since version
4.0
Supported on android since version
41
Supported on oculus since version
5.0
Supported on WKWebview on iOS since version
9.3
nav :any-link > span {
background-color : yellow ;
}
Supported on chrome since version
1
Supported on edge since version
79
Supported on firefox since version
1
Supported on opera since version
15
Supported on safari since version
3
Supported on Chrome for Android since version
18
Supported on Firefox for Android since version
4
Supported on Opera Mobile since version
14
Supported on iOS Safari since version
1
Supported on samsung since version
1.0
Supported on android since version
37
Supported on oculus since version
5.0
Supported on WKWebview on iOS since version
1
input:blank {
background-color : yellow ;
}
p {
font-size : calc (pow (e, pi) * 1rem) ;
}
Supported on chrome since version
110
Supported on edge since version
110
Supported on firefox since version
114
Supported on opera since version
96
Supported on safari since version
16
Supported on Chrome for Android since version
110
Supported on Firefox for Android since version
114
Supported on Opera Mobile since version
74
Supported on iOS Safari since version
16
Supported on samsung since version
21.0
Supported on android since version
110
Supported on WKWebview on iOS since version
16
a {
color : mediumvioletred ;
}
@layer defaults {
a { color : maroon ; }
}
Supported on chrome since version
99
Supported on edge since version
99
Supported on firefox since version
97
Supported on opera since version
85
Supported on safari since version
15.4
Supported on Chrome for Android since version
99
Supported on Firefox for Android since version
97
Supported on Opera Mobile since version
68
Supported on iOS Safari since version
15.4
Supported on samsung since version
18.0
Supported on android since version
99
Supported on oculus since version
21.0
Supported on WKWebview on iOS since version
15.4
[frame=hsides i] {
border-style : solid none ;
}
Supported on chrome since version
49
Supported on edge since version
79
Supported on firefox since version
47
Supported on opera since version
36
Supported on safari since version
9
Supported on Chrome for Android since version
49
Supported on Firefox for Android since version
47
Supported on Opera Mobile since version
36
Supported on iOS Safari since version
9
Supported on samsung since version
5.0
Supported on android since version
49
Supported on oculus since version
5.0
Supported on WKWebview on iOS since version
9
button {
font-size : clamp (1rem, 2.5vw, 2rem) ;
}
Supported on chrome since version
79
Supported on edge since version
79
Supported on firefox since version
75
Supported on opera since version
66
Supported on safari since version
13.1
Supported on Chrome for Android since version
79
Supported on Firefox for Android since version
79
Supported on Opera Mobile since version
57
Supported on iOS Safari since version
13.4
Supported on samsung since version
12.0
Supported on android since version
79
Supported on oculus since version
8.0
Supported on WKWebview on iOS since version
13.4
.background {
background-color :#ccc ;
}
.background.color-adjust {
color-adjust : economy ;
}
.background.color-adjust-exact {
color-adjust : exact ;
}
Supported on firefox since version
97
Supported on safari since version
15.4
Supported on Firefox for Android since version
97
Supported on iOS Safari since version
15.4
Supported on WKWebview on iOS since version
15.4
p {
color : color (display-p3 1 0.5 0) ;
color : color (display-p3 1 0.5 0 / .5) ;
}
Supported on chrome since version
111
Supported on edge since version
111
Supported on firefox since version
113
Supported on opera since version
97
Supported on safari since version
15
Supported on Chrome for Android since version
111
Supported on Firefox for Android since version
113
Supported on Opera Mobile since version
75
Supported on iOS Safari since version
15
Supported on samsung since version
22.0
Supported on android since version
111
Supported on WKWebview on iOS since version
15
em {
background-color : hsl (120deg 100% 25%) ;
color : rgb (0 255 0) ;
}
Supported on chrome since version
65
Supported on edge since version
79
Supported on firefox since version
52
Supported on opera since version
52
Supported on safari since version
12.1
Supported on Chrome for Android since version
65
Supported on Firefox for Android since version
52
Supported on Opera Mobile since version
47
Supported on iOS Safari since version
12.2
Supported on samsung since version
9.0
Supported on android since version
65
Supported on oculus since version
5.0
Supported on WKWebview on iOS since version
12.2
p {
color : color-mix (in lch, purple 50%, plum 50%) ;
}
Supported on chrome since version
111
Supported on edge since version
111
Supported on firefox since version
113
Supported on opera since version
97
Supported on safari since version
16.2
Supported on Chrome for Android since version
111
Supported on Firefox for Android since version
113
Supported on Opera Mobile since version
75
Supported on iOS Safari since version
16.2
Supported on samsung since version
22.0
Supported on android since version
111
.container {
contain : layout inline-size ;
}
@container (min-width: 700px) {
.container {
}
}
Supported on chrome since version
105
Supported on edge since version
105
Supported on firefox since version
110
Supported on opera since version
91
Supported on safari since version
16
Supported on Chrome for Android since version
105
Supported on Firefox for Android since version
110
Supported on Opera Mobile since version
72
Supported on iOS Safari since version
16
Supported on samsung since version
20.0
Supported on android since version
105
Supported on WKWebview on iOS since version
16
.element {
content : url (tree.jpg) / "image with a tree" ;
}
Supported on chrome since version
77
Supported on edge since version
79
Supported on firefox since version
128
Supported on opera since version
64
Supported on safari since version
17.4
Supported on Chrome for Android since version
77
Supported on Firefox for Android since version
128
Supported on Opera Mobile since version
55
Supported on iOS Safari since version
17.4
Supported on samsung since version
12.0
Supported on android since version
77
Supported on oculus since version
7.0
Supported on WKWebview on iOS since version
17.4
p {
color : contrast-color ( purple max ) ;
}
@custom-media --narrow-window (max-width: 30em) ;
@media (--narrow-window ) {}
blockquote:dir(rtl) {
margin-right : 10px ;
}
blockquote:dir(ltr) {
margin-left : 10px ;
}
Supported on chrome since version
120
Supported on edge since version
120
Supported on firefox since version
49
Supported on opera since version
106
Supported on safari since version
16.4
Supported on Chrome for Android since version
120
Supported on Firefox for Android since version
49
Supported on Opera Mobile since version
80
Supported on iOS Safari since version
16.4
Supported on samsung since version
25.0
Supported on android since version
120
Supported on WKWebview on iOS since version
16.4
.element {
display : inline flow-root ;
display : inline flex ;
display : block grid ;
}
Supported on chrome since version
115
Supported on edge since version
115
Supported on firefox since version
70
Supported on opera since version
101
Supported on safari since version
15
Supported on Chrome for Android since version
115
Supported on Firefox for Android since version
79
Supported on Opera Mobile since version
77
Supported on iOS Safari since version
15
Supported on samsung since version
23.0
Supported on android since version
115
Supported on WKWebview on iOS since version
15
.pie_chart {
background-image : conic-gradient (yellowgreen 40%, gold 0deg 75%, #f06 0deg) ;
}
Supported on chrome since version
72
Supported on edge since version
79
Supported on firefox since version
83
Supported on opera since version
60
Supported on safari since version
12.1
Supported on Chrome for Android since version
72
Supported on Firefox for Android since version
83
Supported on Opera Mobile since version
51
Supported on iOS Safari since version
12.2
Supported on samsung since version
11.0
Supported on android since version
72
Supported on oculus since version
6.0
Supported on WKWebview on iOS since version
12.2
p {
font-size : calc (pow (10, 12) * 1rem) ;
font-size : calc (sqrt (100) * 1rem) ;
font-size : calc (hypot (3, 4) * 1rem) ;
font-size : calc (log (10) * 1rem) ;
font-size : calc (exp (10) * 1rem) ;
}
Supported on chrome since version
120
Supported on edge since version
120
Supported on firefox since version
118
Supported on opera since version
106
Supported on safari since version
15.4
Supported on Chrome for Android since version
120
Supported on Firefox for Android since version
118
Supported on Opera Mobile since version
80
Supported on iOS Safari since version
15.4
Supported on samsung since version
25.0
Supported on android since version
120
Supported on WKWebview on iOS since version
15.4
body {
font-family : fangsong ;
}
span:first-child {
float : inline-start ;
}
Supported on chrome since version
118
Supported on edge since version
118
Supported on firefox since version
55
Supported on opera since version
104
Supported on safari since version
15
Supported on Chrome for Android since version
118
Supported on Firefox for Android since version
55
Supported on Opera Mobile since version
79
Supported on iOS Safari since version
15
Supported on samsung since version
25.0
Supported on android since version
118
Supported on WKWebview on iOS since version
15
:focus:not(:focus-visible) {
outline : 0 ;
}
Supported on chrome since version
86
Supported on edge since version
86
Supported on firefox since version
85
Supported on opera since version
72
Supported on safari since version
15.4
Supported on Chrome for Android since version
86
Supported on Firefox for Android since version
85
Supported on Opera Mobile since version
61
Supported on iOS Safari since version
15.4
Supported on samsung since version
14.0
Supported on android since version
86
Supported on oculus since version
12.0
Supported on WKWebview on iOS since version
15.4
form:focus-within {
background : rgb (0 128 0) ;
}
Supported on chrome since version
60
Supported on edge since version
79
Supported on firefox since version
52
Supported on opera since version
47
Supported on safari since version
10.1
Supported on Chrome for Android since version
60
Supported on Firefox for Android since version
52
Supported on Opera Mobile since version
44
Supported on iOS Safari since version
10.3
Supported on samsung since version
8.0
Supported on android since version
60
Supported on oculus since version
5.0
Supported on WKWebview on iOS since version
10.3
@font-face {
src : url (file.woff2) format (woff2) ;
}
Supported on chrome since version
108
Supported on edge since version
108
Supported on opera since version
94
Supported on safari since version
4
Supported on Chrome for Android since version
108
Supported on Opera Mobile since version
73
Supported on iOS Safari since version
5
Supported on samsung since version
21.0
Supported on android since version
108
Supported on WKWebview on iOS since version
5
@media (color-gamut: rec2020) {
p {
color : oklch (40% 0.234 0.39 / 0.5) ;
}
}
.pie_chart {
background-image : conic-gradient (in oklch, yellowgreen 40%, gold 0deg 75%, #f06 0deg) ;
}
Supported on chrome since version
111
Supported on edge since version
111
Supported on firefox since version
127
Supported on opera since version
97
Supported on safari since version
16.2
Supported on Chrome for Android since version
111
Supported on Firefox for Android since version
127
Supported on Opera Mobile since version
75
Supported on iOS Safari since version
16.2
Supported on samsung since version
22.0
Supported on android since version
111
Supported on WKWebview on iOS since version
16.2
a:has(> img) {
display : block ;
}
Supported on chrome since version
105
Supported on edge since version
105
Supported on firefox since version
121
Supported on opera since version
91
Supported on safari since version
15.4
Supported on Chrome for Android since version
105
Supported on Firefox for Android since version
121
Supported on Opera Mobile since version
72
Supported on iOS Safari since version
15.4
Supported on samsung since version
20.0
Supported on android since version
105
Supported on WKWebview on iOS since version
15.4
section {
background-color : #f3f3f3f3 ;
color : #0003 ;
}
Supported on chrome since version
62
Supported on edge since version
79
Supported on firefox since version
49
Supported on opera since version
49
Supported on safari since version
10
Supported on Chrome for Android since version
62
Supported on Firefox for Android since version
49
Supported on Opera Mobile since version
47
Supported on iOS Safari since version
9.3
Supported on samsung since version
8.0
Supported on android since version
62
Supported on oculus since version
5.0
Supported on WKWebview on iOS since version
9.3
p {
color : hwb (120 44% 50%) ;
}
Supported on chrome since version
101
Supported on edge since version
101
Supported on firefox since version
96
Supported on opera since version
87
Supported on safari since version
15
Supported on Chrome for Android since version
101
Supported on Firefox for Android since version
96
Supported on Opera Mobile since version
70
Supported on iOS Safari since version
15
Supported on samsung since version
19.0
Supported on android since version
101
Supported on oculus since version
22.0
Supported on WKWebview on iOS since version
15
p {
text-indent : 2ic ;
}
Supported on chrome since version
106
Supported on edge since version
106
Supported on firefox since version
97
Supported on opera since version
92
Supported on safari since version
15.4
Supported on Chrome for Android since version
106
Supported on Firefox for Android since version
97
Supported on Opera Mobile since version
72
Supported on iOS Safari since version
15.4
Supported on samsung since version
20.0
Supported on android since version
106
Supported on WKWebview on iOS since version
15.4
p {
background-image : image-set (
"foo.png" 1x,
"foo-2x.png" 2x,
"foo-print.png" 600dpi
) ;
}
Supported on chrome since version
21
Supported on edge since version
79
Supported on firefox since version
89
Supported on opera since version
15
Supported on safari since version
14
Supported on Chrome for Android since version
25
Supported on Firefox for Android since version
89
Supported on Opera Mobile since version
14
Supported on iOS Safari since version
14
Supported on samsung since version
1.5
Supported on android since version
4.4
Supported on oculus since version
5.0
Supported on WKWebview on iOS since version
17
input:in-range {
background-color : rgb (0 255 0 / 0.25) ;
}
input:out-of-range {
background-color : rgb (255 0 0 / 0.25) ;
border : 2px solid red ;
}
Supported on chrome since version
10
Supported on edge since version
13
Supported on firefox since version
29
Supported on opera since version
11
Supported on safari since version
5.1
Supported on Chrome for Android since version
18
Supported on Firefox for Android since version
16
Supported on Opera Mobile since version
11
Supported on iOS Safari since version
5
Supported on samsung since version
1.0
Supported on android since version
2.2
Supported on oculus since version
5.0
Supported on WKWebview on iOS since version
5
p:is(:first-child, .special) {
margin-top : 1em ;
}
Supported on chrome since version
88
Supported on edge since version
88
Supported on firefox since version
82
Supported on opera since version
74
Supported on safari since version
14
Supported on Chrome for Android since version
88
Supported on Firefox for Android since version
82
Supported on Opera Mobile since version
63
Supported on iOS Safari since version
14
Supported on samsung since version
15.0
Supported on android since version
88
Supported on oculus since version
14.0
Supported on WKWebview on iOS since version
14
body {
color : lab (80% 50 20) ;
}
Supported on chrome since version
116
Supported on edge since version
116
Supported on firefox since version
113
Supported on opera since version
102
Supported on safari since version
16.2
Supported on Chrome for Android since version
116
Supported on Firefox for Android since version
113
Supported on Opera Mobile since version
78
Supported on iOS Safari since version
16.2
Supported on samsung since version
24.0
Supported on android since version
116
Supported on WKWebview on iOS since version
16.2
body {
color : lch (53% 105 40) ;
}
Supported on chrome since version
116
Supported on edge since version
116
Supported on firefox since version
113
Supported on opera since version
102
Supported on safari since version
16.2
Supported on Chrome for Android since version
116
Supported on Firefox for Android since version
113
Supported on Opera Mobile since version
78
Supported on iOS Safari since version
16.2
Supported on samsung since version
24.0
Supported on android since version
116
Supported on WKWebview on iOS since version
16.2
body {
color : light-dark (cyan, magenta) ;
}
Supported on chrome since version
123
Supported on edge since version
123
Supported on firefox since version
120
Supported on opera since version
109
Supported on safari since version
17.5
Supported on Chrome for Android since version
123
Supported on Firefox for Android since version
120
Supported on Opera Mobile since version
82
Supported on iOS Safari since version
17.5
Supported on samsung since version
27.0
Supported on android since version
123
Supported on WKWebview on iOS since version
17.5
div {
overflow-block : scroll ;
}
Supported on firefox since version
69
Supported on Firefox for Android since version
79
div {
overscroll-behavior-block : scroll ;
}
Supported on chrome since version
77
Supported on edge since version
79
Supported on firefox since version
73
Supported on opera since version
64
Supported on safari since version
16
Supported on Chrome for Android since version
77
Supported on Firefox for Android since version
79
Supported on Opera Mobile since version
55
Supported on iOS Safari since version
16
Supported on samsung since version
12.0
Supported on android since version
77
Supported on oculus since version
7.0
Supported on WKWebview on iOS since version
16
span:first-child {
margin-inline-start : 10px ;
}
Supported on chrome since version
89
Supported on edge since version
89
Supported on firefox since version
66
Supported on opera since version
75
Supported on safari since version
15
Supported on Chrome for Android since version
89
Supported on Firefox for Android since version
66
Supported on Opera Mobile since version
63
Supported on iOS Safari since version
15
Supported on samsung since version
15.0
Supported on android since version
89
Supported on oculus since version
15.0
Supported on WKWebview on iOS since version
15
area {
resize : inline ;
}
Supported on chrome since version
118
Supported on edge since version
118
Supported on firefox since version
63
Supported on opera since version
104
Supported on safari since version
16
Supported on Chrome for Android since version
118
Supported on Firefox for Android since version
63
Supported on Opera Mobile since version
79
Supported on samsung since version
25.0
Supported on android since version
118
span:first-child {
width : 5vi ; height : 10vb ;
}
Supported on chrome since version
108
Supported on edge since version
108
Supported on firefox since version
101
Supported on opera since version
94
Supported on safari since version
15.4
Supported on Chrome for Android since version
108
Supported on Firefox for Android since version
101
Supported on Opera Mobile since version
73
Supported on iOS Safari since version
15.4
Supported on samsung since version
21.0
Supported on android since version
108
Supported on WKWebview on iOS since version
15.4
@media (aspect-ratio: 1.77) {
html {
background-color : cyan ;
}
}
Supported on chrome since version
110
Supported on edge since version
110
Supported on firefox since version
78
Supported on safari since version
16.4
Supported on Chrome for Android since version
110
Supported on Firefox for Android since version
78
Supported on iOS Safari since version
16.4
Supported on android since version
110
p {
padding : calc (1px + calc (4 / 3)) ;
}
Supported on chrome since version
51
Supported on edge since version
16
Supported on firefox since version
48
Supported on opera since version
38
Supported on safari since version
11
Supported on Chrome for Android since version
51
Supported on Firefox for Android since version
48
Supported on Opera Mobile since version
41
Supported on iOS Safari since version
11
Supported on samsung since version
5.0
Supported on android since version
51
Supported on oculus since version
5.0
Supported on WKWebview on iOS since version
11
article {
& p {
color : #333 ;
}
}
Supported on chrome since version
120
Supported on edge since version
120
Supported on firefox since version
117
Supported on opera since version
106
Supported on safari since version
17.2
Supported on Chrome for Android since version
120
Supported on Firefox for Android since version
117
Supported on Opera Mobile since version
80
Supported on iOS Safari since version
17.2
Supported on samsung since version
25.0
Supported on android since version
120
Supported on WKWebview on iOS since version
17.2
p:not(:first-child, .special) {
margin-top : 1em ;
}
Supported on chrome since version
88
Supported on edge since version
88
Supported on firefox since version
84
Supported on opera since version
74
Supported on safari since version
9
Supported on Chrome for Android since version
88
Supported on Firefox for Android since version
84
Supported on iOS Safari since version
9
Supported on samsung since version
15.0
Supported on android since version
88
Supported on oculus since version
14.0
Supported on WKWebview on iOS since version
9
p {
color : oklab (72.322% -0.0465 -0.1150) ;
color : oklch (72.322% 0.12403 247.996) ;
}
Supported on chrome since version
116
Supported on edge since version
116
Supported on firefox since version
113
Supported on opera since version
102
Supported on safari since version
16.2
Supported on Chrome for Android since version
116
Supported on Firefox for Android since version
113
Supported on Opera Mobile since version
78
Supported on iOS Safari since version
16.2
Supported on samsung since version
24.0
Supported on android since version
116
Supported on WKWebview on iOS since version
16.2
img {
opacity : 90% ;
}
Supported on chrome since version
78
Supported on edge since version
79
Supported on firefox since version
70
Supported on opera since version
65
Supported on safari since version
13.1
Supported on Chrome for Android since version
78
Supported on Firefox for Android since version
79
Supported on Opera Mobile since version
56
Supported on iOS Safari since version
13.4
Supported on samsung since version
12.0
Supported on android since version
78
Supported on oculus since version
8.0
Supported on WKWebview on iOS since version
13.4
html {
overflow : hidden auto ;
}
Supported on chrome since version
68
Supported on edge since version
79
Supported on firefox since version
61
Supported on opera since version
55
Supported on safari since version
13.1
Supported on Chrome for Android since version
68
Supported on Firefox for Android since version
61
Supported on Opera Mobile since version
48
Supported on iOS Safari since version
13.4
Supported on samsung since version
10.0
Supported on android since version
68
Supported on oculus since version
6.0
Supported on WKWebview on iOS since version
13.4
p {
overflow-wrap : break-word ;
}
Supported on chrome since version
23
Supported on edge since version
18
Supported on firefox since version
49
Supported on opera since version
12.1
Supported on safari since version
7
Supported on Chrome for Android since version
25
Supported on Firefox for Android since version
49
Supported on Opera Mobile since version
12.1
Supported on iOS Safari since version
7
Supported on samsung since version
1.5
Supported on android since version
4.4
Supported on oculus since version
5.0
Supported on WKWebview on iOS since version
7
.messages {
height : 220px ;
overflow : auto ;
overscroll-behavior-y : contain ;
}
body {
margin : 0 ;
overscroll-behavior : none ;
}
Supported on chrome since version
63
Supported on edge since version
18
Supported on firefox since version
59
Supported on opera since version
50
Supported on safari since version
16
Supported on Chrome for Android since version
63
Supported on Firefox for Android since version
59
Supported on Opera Mobile since version
46
Supported on iOS Safari since version
16
Supported on samsung since version
8.0
Supported on android since version
63
Supported on oculus since version
5.0
Supported on WKWebview on iOS since version
16
.example {
place-content : flex-end ;
place-items : center / space-between ;
place-self : flex-start / center ;
}
Supported on chrome since version
59
Supported on edge since version
79
Supported on firefox since version
53
Supported on opera since version
46
Supported on safari since version
11
Supported on Chrome for Android since version
59
Supported on Firefox for Android since version
53
Supported on Opera Mobile since version
43
Supported on iOS Safari since version
11
Supported on samsung since version
7.0
Supported on android since version
59
Supported on oculus since version
5.0
Supported on WKWebview on iOS since version
11
body {
background-color : white ;
color : black ;
}
@media (prefers-color-scheme: dark) {
body {
background-color : black ;
color : white ;
}
}
Supported on chrome since version
76
Supported on edge since version
79
Supported on firefox since version
67
Supported on opera since version
62
Supported on safari since version
12.1
Supported on Chrome for Android since version
76
Supported on Firefox for Android since version
67
Supported on Opera Mobile since version
54
Supported on iOS Safari since version
13
Supported on samsung since version
14.2
Supported on android since version
76
Supported on oculus since version
7.0
Supported on WKWebview on iOS since version
13
.animation {
animation : vibrate 0.3s linear infinite both ;
}
@media (prefers-reduced-motion: reduce) {
.animation {
animation : none ;
}
}
Supported on chrome since version
74
Supported on edge since version
79
Supported on firefox since version
63
Supported on opera since version
62
Supported on safari since version
10.1
Supported on Chrome for Android since version
74
Supported on Firefox for Android since version
64
Supported on Opera Mobile since version
53
Supported on iOS Safari since version
10.3
Supported on samsung since version
11.0
Supported on android since version
74
Supported on oculus since version
6.0
Supported on WKWebview on iOS since version
10.3
div {
color : oklch (0.7, 0.2, random (120deg, 240deg)) ;
}
input:read-only {
background-color : #ccc ;
}
Supported on chrome since version
1
Supported on edge since version
13
Supported on firefox since version
78
Supported on opera since version
9
Supported on safari since version
4
Supported on Chrome for Android since version
18
Supported on Firefox for Android since version
79
Supported on Opera Mobile since version
10.1
Supported on iOS Safari since version
3.2
Supported on samsung since version
1.0
Supported on android since version
37
Supported on oculus since version
5.0
Supported on WKWebview on iOS since version
3.2
html {
color : rebeccapurple ;
}
Supported on chrome since version
38
Supported on edge since version
12
Supported on firefox since version
33
Supported on ie since version
11
Supported on opera since version
25
Supported on safari since version
9
Supported on Chrome for Android since version
38
Supported on Firefox for Android since version
33
Supported on Opera Mobile since version
25
Supported on iOS Safari since version
8
Supported on samsung since version
3.0
Supported on android since version
38
Supported on oculus since version
5.0
Supported on WKWebview on iOS since version
8
p {
color : lch (from peru calc (l * 0.8) c h) ;
}
Supported on chrome since version
125
Supported on edge since version
125
Supported on firefox since version
128
Supported on opera since version
111
Supported on Chrome for Android since version
125
Supported on Firefox for Android since version
128
Supported on Opera Mobile since version
83
Supported on samsung since version
27.0
Supported on android since version
125
:scope {
background-color : pink ;
}
Supported on chrome since version
27
Supported on edge since version
79
Supported on firefox since version
32
Supported on opera since version
15
Supported on safari since version
7
Supported on Chrome for Android since version
27
Supported on Firefox for Android since version
32
Supported on Opera Mobile since version
15
Supported on iOS Safari since version
7
Supported on samsung since version
1.5
Supported on android since version
4.4
Supported on oculus since version
5.0
Supported on WKWebview on iOS since version
7
div {
order : abs (-10) ;
order : sign (-10) ;
}
Supported on firefox since version
118
Supported on safari since version
15.4
Supported on Firefox for Android since version
118
Supported on iOS Safari since version
15.4
div {
background : src ('./image.jpg') ;
}
div {
left : mod (18px, 5px) ;
top : rem (18px, 5px) ;
right : round (2.5px, 1px) ;
bottom : round (up, 15px, 7px) ;
}
Supported on chrome since version
125
Supported on edge since version
125
Supported on firefox since version
118
Supported on opera since version
111
Supported on safari since version
15.4
Supported on Chrome for Android since version
125
Supported on Firefox for Android since version
118
Supported on Opera Mobile since version
83
Supported on iOS Safari since version
15.4
Supported on samsung since version
27.0
Supported on android since version
125
Supported on WKWebview on iOS since version
15.4
body {
font-family : system-ui ;
}
Supported on chrome since version
56
Supported on edge since version
79
Supported on firefox since version
92
Supported on opera since version
43
Supported on safari since version
11
Supported on Chrome for Android since version
56
Supported on Firefox for Android since version
92
Supported on Opera Mobile since version
43
Supported on iOS Safari since version
11
Supported on samsung since version
6.0
Supported on android since version
56
Supported on oculus since version
5.0
Supported on WKWebview on iOS since version
11
p {
text-decoration : green wavy underline 2px ;
}
Supported on chrome since version
87
Supported on edge since version
87
Supported on firefox since version
70
Supported on opera since version
73
Supported on Chrome for Android since version
87
Supported on Firefox for Android since version
79
Supported on Opera Mobile since version
62
Supported on samsung since version
14.0
Supported on android since version
87
Supported on oculus since version
13.0
body {
left : sin (45deg) ;
left : cos (45deg) ;
left : tan (45deg) ;
left : asin (0.5) ;
left : acos (0.5) ;
left : atan (10) ;
left : atan2 (-1, 1) ;
}
Supported on chrome since version
111
Supported on edge since version
111
Supported on firefox since version
108
Supported on opera since version
97
Supported on safari since version
15.4
Supported on Chrome for Android since version
111
Supported on Firefox for Android since version
108
Supported on Opera Mobile since version
75
Supported on iOS Safari since version
15.4
Supported on samsung since version
22.0
Supported on android since version
111
Supported on WKWebview on iOS since version
15.4
@when media (width >= 640px) and (supports (display: flex) or supports (display: grid)) {
} @else media (pointer: coarse) {
} @else {
}
a:where(:not(:hover)) {
text-decoration : none ;
}
Supported on chrome since version
88
Supported on edge since version
88
Supported on firefox since version
82
Supported on opera since version
74
Supported on safari since version
14
Supported on Chrome for Android since version
88
Supported on Firefox for Android since version
82
Supported on Opera Mobile since version
63
Supported on iOS Safari since version
14
Supported on samsung since version
15.0
Supported on android since version
88
Supported on oculus since version
14.0
Supported on WKWebview on iOS since version
14
@custom-selector :--heading h1, h2, h3, h4, h5, h6 ;
article :--heading + p {}
@media (max-width: env (--brand-small )) {
body {
padding : env (--brand-spacing ) ;
}
}
The Staging Process
Staging processes allow developers to accomplish real things and get involved
in the creation of standards, testing, feedback, and new use cases.
This staging process reflects the real-life stability of new CSS features.
You can read an inside view of the
CSSWG to learn about the official
(and unofficial) development stages of CSS specifications. In reality,
specifications and browser implementations happen out of sync. For example,
there have been stable CSS features missing in all browsers, while other CSS
features developed outside the W3C have appeared in browsers. This is too
ambiguous for the web development community, and a more accountable process
is desired.
Stage 0: Aspirational
“This is a silly idea.”
An Unofficial Draft or Editor’s Draft championed by a
W3C Working Group Member. It should be considered highly unstable and
subject
to change. Stage 0 features are open to ideas and discussion, but may not be
considered serious.
Stage 1: Experimental
“This idea might not be silly.”
An Editor’s Draft or early Working Draft championed by a
W3C Working Group . It should be considered highly unstable and subject to
change. Stage 1 features are recognized as a real problem, but they may not be
tied to any particular solution.
Stage 2: Allowable
“This idea is not silly.”
A Working Draft championed by a W3C Working Group . It should be
considered relatively unstable and subject to change. Stage 2 features are tied
to a particular way of solving a problem.
Stage 3: Embraced
“This idea is becoming part of the web.”
A Candidate Recommendation championed by a W3C Working Group , usually
implemented by at least 2 recognized browser vendors , possibly behind a
flag.
It should be considered stable and subject to little change. Stage 3 features
will likely become a standard.
Stage 4: Standardized
“This idea is part of the web.”
A Recommendation championed by the W3C . It should be implemented by all
recognized browser vendors . Stage 4 features are web standards.
Rejected
“I had no idea what I was doing.”
Any specification that has been rejected or neglected by its editor, or
formally rejected by a W3C Working Group .
Terminology
Recognized Browser Vendors
Recognized browser vendors include, in alphabetical order; Apple (Safari/Webkit), Google (Chrome/Chromium) and
Mozilla (Firefox/Gecko).
What is a champion?
A champion is the person or group responsible for advocating a new feature to
completion, performing the legwork necessary to ensure the concerns of
interested parties are identified and incorporated into the proposal.