23. COMPATIBILITY
W3C Candidate Recommendation, 03 December 2015
Firefox >= 31
Chrome >= 49
Safari >= 9.1
Edge: Under Consideration
Global support 26.01%, data from Can I Use...
24. .Box {
// Default value for all browsers
color: blue;
// Override default with variable for new browsers
color: var(--color-accent, blue) !important;
}
PROGRESSIVE ENHANCEMENT
USE DOUBLE DECLARATION
A small example on Codepen
25. .hide@cp {
// Ignored by old browsers
display: var(--fake-unset-custom-prop, none);
}
.show@cp {
// Hidden for all browsers
display: none;
// And set visible just for new browsers
display: var(--fake-unset-custom-prop, initial);
}
CUSTOM PROPERTIES MEDIA QUERY
30. LINKS
: Try the color picker
My on Codepen
: tool for css statistics
This slides:
W3C Speci cation
Can I Use... CSS Variables
Giko.it
custom properties playground
StyleStats
goo.gl/cItM4J