CSS variables (custom properties) allow defining values that can be used throughout CSS code. This avoids duplicating values and makes themes easier to implement. Variables can be set globally or within specific scopes, and their values can cascade like regular properties. They also enable new techniques like responsive breakpoints based on variable values rather than fixed numbers. CSS variables are a W3C candidate recommendation supported in modern browsers via a double declaration approach for progressive enhancement.

1. ONE STEP IN THE FUTURE:
CSS VARIABLES
25 MARCH 2016

2. GIACOMO "GIKO" ZINETTI
NERD FRONTEND WEB DEVELOPER
@GIACOMOZINETTI

3. LET'S GO

4. CSS CUSTOM PROPERTIES
FOR CASCADING VARIABLES
MODULE LEVEL 1

5. WAT
ONE STEP BEYOND...

6. PROPERTIES
Thanks to for the imageStyleStats

7. CASCADING
The assigns a weight to each style rule. When
several rules apply, the one with the greatest weight takes
precedence.
CSS cascade

8. CSS VERSIONING
WHAT IS CSS3?
Everything after [7 June 2011]CSS 2.1
CSS4 EXISTS?
No, it's time to talk about modules

9. CSS CUSTOM PROPERTIES
FOR CASCADING VARIABLES
MODULE LEVEL 1

10. CUSTOM PROPERTIES
Possibility to de ne new properties with the -- pre x
--custom-property: value;
They are case sensitive!

11. CASCADING VARIABLES
A new primitive value type
property: var(--custom-property);
And you can set a default
var(--custom-property, default-value)

12. SOME EXAMPLES

13. .box {
background-color: white;
}
.button {
color: black;
}
.theme .box {
background-color: blue;
}
.theme .button {
color: yellow;
}
THEMING TODAY

14. // Deafult css
.box {
background-color: white;
}
.button {
color: black;
}
// Theme file
.box {
background-color: blue !important;
}
.button {
color: yellow !important;
}
THEMING TODAY V2

15. .theme {
--color-bg: blue;
--color-button: yellow;
}
.box {
background-color: var(--color-bg, white);
}
.button {
color: var(--color-button, black);
}
THEMING TOMORROW

16. body.class {
font-size: 14px;
}
@media (min-width: 960px) {
body {
font-size: 16px;
}
}
RESPONSIVE TODAY

17. body {
font-size: var(--base-font, 14px);
}
@media (min-width: 960px) {
body {
--base-font: 16px;
}
}
RESPONSIVE TOMORROW

18. .button {
color: red;
}
footer .button {
color: white;
}
footer .highlight .button {
color: yellow;
}
SPECIFICITY WARS TODAY

19. footer {
--button-color: white;
}
.highlight {
--button-color: yellow;
}
.button {
color: var(--button-color, red);
}
SPECIFICITY WARS TOMORROW

21. TODAY

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

26. BONUS TRACK

27. :root {
--custom-prop: value;
}
ROOT SCOPE

28. .box {
--color: red;
background-color: var(--color);
transition: all ease 500ms;
}
.box:hover {
--color: blue;
}
TRANSITION AND ANIMATION

29. $button-color: red;
.header { $button-color: blue; }
.button { color: $button-color; }
:root { --button-color: red; }
.header { --button-color: blue; }
.button { color: var(--button-color); }
CSS VS PREPROCESSORS
Preprocessor variables don’t inherit
Even CSSNext

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

31. QUESTIONS?

32. THANK YOU
SO LONG AND THANKS FOR ALL THE FEEDBACK!
@giacomozinetti
#betterweb