CSS Variables (Custom Properties)
CSS Variables (Custom Properties)
Permits the declaration and usage of cascading variables in stylesheets.
Spec | https://drafts.csswg.org/css-variables/ |
---|---|
Status | W3C Candidate Recommendation |
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
57 | 62 | ||||
56 | 61 | TP | 48 | ||
16 (2) | 55 | 60 | 11 | 47 | |
11 | 15 (2) | 54 | 59 | 10.1 | 46 |
10 | 14 | 53 | 58 | 10 | 45 |
9 | 13 | 52 | 57 | 9.1 | 44 |
8 | 12 | 51 | 56 | 9 | 43 |
Show all | |||||
7 | 50 | 55 | 8 | 42 | |
6 | 49 | 54 | 7.1 | 41 | |
5.5 | 48 | 53 | 7 | 40 | |
47 | 52 | 6.1 | 39 | ||
46 | 51 | 6 | 38 | ||
45 | 50 | 5.1 | 37 | ||
44 | 49 | 5 | 36 | ||
43 | 48 (1) | 4 | 35 (1) | ||
42 | 47 | 3.2 | 34 | ||
41 | 46 | 3.1 | 33 | ||
40 | 45 | 32 | |||
39 | 44 | 31 | |||
38 | 43 | 30 | |||
37 | 42 | 29 | |||
36 | 41 | 28 | |||
35 | 40 | 27 | |||
34 | 39 | 26 | |||
33 | 38 | 25 | |||
32 | 37 | 24 | |||
31 | 36 | 23 | |||
30 | 35 | 22 | |||
29 | 34 | 21 | |||
28 | 33 | 20 | |||
27 | 32 | 19 | |||
26 | 31 | 18 | |||
25 | 30 | 17 | |||
24 | 29 | 16 | |||
23 | 28 | 15 | |||
22 | 27 | 12.1 | |||
21 | 26 | 12 | |||
20 | 25 | 11.6 | |||
19 | 24 | 11.5 | |||
18 | 23 | 11.1 | |||
17 | 22 | 11 | |||
16 | 21 | 10.6 | |||
15 | 20 | 10.5 | |||
14 | 19 | 10.0-10.1 | |||
13 | 18 | 9.5-9.6 | |||
12 | 17 | 9 | |||
11 | 16 | ||||
10 | 15 | ||||
9 | 14 | ||||
8 | 13 | ||||
7 | 12 | ||||
6 | 11 | ||||
5 | 10 | ||||
4 | 9 | ||||
3.6 | 8 | ||||
3.5 | 7 | ||||
3 | 6 | ||||
2 | 5 | ||||
4 |
iOS Safari | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Android Chrome | Android Firefox | IE Mobile | Android UC Browser | Samsung Internet | QQ Browser | Baidu Browser |
---|---|---|---|---|---|---|---|---|---|---|---|
11 | |||||||||||
10.3 | all | 56 | 10 | 37 | 59 | 54 | 11 | 11.4 | 5 | 1.2 | 7.12 |
10.0-10.2 | 4.4.3-4.4.4 | 7 | 12.1 | 10 | 4 | ||||||
9.3 | 4.4 | 12 | |||||||||
9.0-9.2 | 4.2-4.3 | 11.5 | |||||||||
Show all | |||||||||||
8.1-8.4 | 4.1 | 11.1 | |||||||||
8 | 4 | 11 | |||||||||
7.0-7.1 | 3 | 10 | |||||||||
6.0-6.1 | 2.3 | ||||||||||
5.0-5.1 | 2.2 | ||||||||||
4.2-4.3 | 2.1 | ||||||||||
4.0-4.1 | |||||||||||
3.2 |
Notes
Enabled through the "Experimental Web Platform features" flag in
chrome://flags
Partial support is due to bugs present (see known issues)
Bugs
In Edge 15 is not possible to use css variables in pseudo elements see bug
In Edge 15 animations with css variables may cause the webpage to crash see bug
Resources
- Mozilla hacks article (older syntax)
- Mozilla Developer Network (MDN) documentation - Using CSS variables
- Edge Dev Blog post
Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
http://caniuse.com/#feat=css-variables