CSS Custom Property (aka CSS Variables)

Dear (JS) Developers,
You now don’t have any excuses anymore: CSS brings custom properties to life, its own variables system, and they also have scope. No jealous! Let see together how to use them and some examples where JS and CSS variables are best friends forever.

Talk done at JavaScript Meetup Luxembourg in May 2018 (25min talk)
For a more detailed transcript, see: https://noti.st/geoffreycrofte/GsYGzw/slides

Transcript

1. CSS Custom Properties Add Variables to Your CSS
2. “CSS Custom Properties” — @geoffreycrofte 2 Geoffrey Crofte geoffrey.crofte.fr/en creativejuiz.fr/en Lead Designer at Foyer Group @geoffreycrofte
3. “CSS Custom Properties” — @geoffreycrofte Overview What are Custom Properties? Quick start with CSS Variables. Why CSS C.P. instead of Sass variables? Use cases & Demos Takeaways
4. What are Custom Properties?
5. What are Custom Properties? CSS Variables IIIIIIII
6. $color: #bada55; @color: #bada55; This not about…
7. This is more about… http://bit.ly/csscurrentcolor
8. This is more about… http://bit.ly/csscurrentcolor
9. currentColor But this is not about…
10. “CSS Custom Properties” — @geoffreycrofte A custom property is any property whose name starts with two dashes […] like --foo
11. “CSS Custom Properties” — @geoffreycrofte Custom properties are solely for use by authors and users; CSS will never give them a meaning beyond what is presented here.
12. “CSS Custom Properties” — @geoffreycrofte Custom properties are solely for use by authors and users; CSS will never give them a meaning beyond what is presented here.
14. Custom properties define variables Variables are referenced with the var() notation They are Case-Sensitive Their value is “extremely permissive” What the Spec says…
15. Do the fu%€ you want with them. In other words…
16. How to use CSS Variables?
17. --variableName: value; CSS Declaration :root { }
18. --variableName: value; CSS Declaration .element { }
19. property: var(--variableName); .element { } CSS Use
20. Quick Example of use
21. Why CSS instead of Sass Variables?
22. The main issue with Sass (or LESS) variables: They have to be computed to get their value. Computation
23. CSS Variables are alive
24. CSS Variables are alive
25. JavaScript can access them
26. Media Queries ❤ CSS Variables
27. Media Queries ❤ CSS Variables
28. CSS Variables are inherited
29. CSS Variables are inherited
30. CSS Variables are inherited
31. CSS Variables are inherited
32. CSS Variables are inherited
33. CSS Variables are inherited
34. Demos & Use Cases
35. http://bit.ly/cssvargradient
36. http://bit.ly/cssvargradient
37. Mouse position
38. CSS Transformation
39. CSS Transformation
40. CSS Transformation
41. CSS Transformation
42. CSS Transformation
43. CSS Transformation
44. CSS Transformation
45. Why not pushing transformations directly in JavaScript? Now you’re wondering…
46. Why not pushing transformations directly in JavaScript? Now you’re wondering…
47. Why not pushing transformations directly in JavaScript? Now you’re wondering… Maintainability / Portability 
 style=“transform…” is dirty. Period. 

48. Why not pushing transformations directly in JavaScript? Now you’re wondering… Maintainability / Portability 
 style=“transform…” is dirty. Period. 
 Inheritance 
 style=“transform…” do not make --x and --y inherited.
49. Why not pushing transformations directly in JavaScript? Now you’re wondering… Maintainability / Portability 
 style=“transform…” is dirty. Period. 
 Inheritance 
 style=“transform…” do not make --x and --y inherited. It’s a philosophy 
 CSS is for styling. JS is not. 

50. Why not pushing transformations directly in JavaScript? Now you’re wondering… Maintainability / Portability 
 style=“transform…” is dirty. Period. 
 Inheritance 
 style=“transform…” do not make --x and --y inherited. It’s a philosophy 
 CSS is for styling. JS is not. 
 Futur proof 
 Let the CSS engine handle that part.
51. http://bit.ly/cssvargradient2
52. http://bit.ly/cssvargradient2
53. CSS Transformation
54. Themable interfaces
55. Themable interfaces
56. Themable interfaces
57. Themable interfaces
58. Themable interfaces
59. Themable interfaces
60. Accessibility Example
61. Accessibility Example
62. Responsive
63. Responsive
64. Customization https://blog.fontawesome.com/introducing-duotone/
65. Further Takeaways
66. --variableName: value !important; :root { } CSS Variables are CSS properties
67. --variableName: lolilol; :root { } (kind of) Silent error
68. --spacing: 20; :root { } You can’t “build up” values. margin: var(--spacing)px; :root { }
69. --spacing: 20; :root { } You can’t “build up” values. margin: var(--spacing)px; :root { } Doesn’t work
70. --spacing:; :root { } Strange behaviour --spacing: ; :root { } Invalid Valid Yeah, that’s a space caracter.
71. Fallback value var(--variableName, default);
72. Fallback value
73. Fallback value Doesn’t support var()
74. Fallback value Doesn’t support var() Fallback is there
75. Fallback value Doesn’t support var() Fallback is there
76. Fallback value Doesn’t support var() Fallback is there --bgColor Value
77. Fallback value Doesn’t support var() Fallback is there --bgColor Value
78. Fallback value Doesn’t support var() Fallback is there --bgColor Value Transparent
79. Variable as Fallback var(--var1, var(--var2, default));
80. Variable as Fallback var(--var1, var(--var2, var(--var3, var(--var4, var(--var5, default)))));
81. You can’t cycle with variables
82. You can’t cycle with variables
83. @supports (color: var(--)) { … } Support Testing
84. Compatibility
85. Polyfills https://github.com/aaronbarker/css-variables-polyfill
86. “CSS Custom Properties” — @geoffreycrofte Some resources CSS Variable Secrets (Lea Verou Smashing Conf. 2017) CSS Custom Properties (CCSWG W3C documentation) CSS Mouse Tracking Gradient (Gradient on Text demonstration) CSS Variable Tutorials (A series of 4 short videos about CSS Variables)
87. Thanks!
88. “CSS Custom Properties” — @geoffreycrofte 56 Geoffrey Crofte geoffrey.crofte.fr/en creativejuiz.fr/en Lead Designer at Foyer Group @geoffreycrofte