The presentation of CSS Variables for the Milano Frontend meetup of 26 January 2016

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