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
   

   View Slide

2. “CSS Custom Properties” — @geoffreycrofte 2
   Geoffrey Crofte
   geoffrey.crofte.fr/en
   creativejuiz.fr/en
   Lead Designer at Foyer Group
   @geoffreycrofte
   

   View Slide

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
   

   View Slide

4. What are Custom Properties?
   

   View Slide

5. What are Custom Properties?
   CSS Variables
   IIIIIIII
   

   View Slide

6. $color: #bada55;
   
   
   @color: #bada55;
   This not about…
   

   View Slide

7. This is more about…
   http://bit.ly/csscurrentcolor
   

   View Slide

8. This is more about…
   http://bit.ly/csscurrentcolor
   

   View Slide

9. currentColor
   But this is not about…
   

   View Slide

10. “CSS Custom Properties” — @geoffreycrofte
    A custom property is any
    property whose name starts
    with two dashes […] like --foo
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

13. View Slide

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…
    

    View Slide

15. Do the fu%€
    
    
    you want with them.
    In other words…
    

    View Slide

16. How to use CSS Variables?
    

    View Slide

17. --variableName: value;
    CSS Declaration
    :root {
    }
    

    View Slide

18. --variableName: value;
    CSS Declaration
    .element {
    }
    

    View Slide

19. property: var(--variableName);
    .element {
    }
    CSS Use
    

    View Slide

20. Quick Example of use
    

    View Slide

21. Why CSS instead of Sass Variables?
    

    View Slide

22. The main issue with Sass (or LESS) variables:
    
    
    They have to be computed to get their value.
    Computation
    

    View Slide

23. CSS Variables are alive
    

    View Slide

24. CSS Variables are alive
    

    View Slide

25. JavaScript can access them
    

    View Slide

26. Media Queries ❤ CSS Variables
    

    View Slide

27. Media Queries ❤ CSS Variables
    

    View Slide

28. CSS Variables are inherited
    

    View Slide

29. CSS Variables are inherited
    

    View Slide

30. CSS Variables are inherited
    

    View Slide

31. CSS Variables are inherited
    

    View Slide

32. CSS Variables are inherited
    

    View Slide

33. CSS Variables are inherited
    

    View Slide

34. Demos & Use Cases
    

    View Slide

35. http://bit.ly/cssvargradient
    

    View Slide

36. http://bit.ly/cssvargradient
    

    View Slide

37. Mouse position
    

    View Slide

38. CSS Transformation
    

    View Slide

39. CSS Transformation
    

    View Slide

40. CSS Transformation
    

    View Slide

41. CSS Transformation
    

    View Slide

42. CSS Transformation
    

    View Slide

43. CSS Transformation
    

    View Slide

44. CSS Transformation
    

    View Slide

45. Why not pushing transformations directly in JavaScript?
    Now you’re wondering…
    

    View Slide

46. Why not pushing transformations directly in JavaScript?
    Now you’re wondering…
    

    View Slide

47. Why not pushing transformations directly in JavaScript?
    Now you’re wondering…
    Maintainability / Portability
    

    style=“transform…” is dirty. Period.
    

    

    View Slide

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.
    

    View Slide

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.
    

    

    View Slide

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.
    

    View Slide

51. http://bit.ly/cssvargradient2
    

    View Slide

52. http://bit.ly/cssvargradient2
    

    View Slide

53. CSS Transformation
    

    View Slide

54. Themable interfaces
    

    View Slide

55. Themable interfaces
    

    View Slide

56. Themable interfaces
    

    View Slide

57. Themable interfaces
    

    View Slide

58. Themable interfaces
    

    View Slide

59. Themable interfaces
    

    View Slide

60. Accessibility Example
    

    View Slide

61. Accessibility Example
    

    View Slide

62. Responsive
    

    View Slide

63. Responsive
    

    View Slide

64. Customization
    https://blog.fontawesome.com/introducing-duotone/
    

    View Slide

65. Further Takeaways
    

    View Slide

66. --variableName: value !important;
    :root {
    }
    CSS Variables are CSS properties
    

    View Slide

67. --variableName: lolilol;
    :root {
    }
    (kind of) Silent error
    

    View Slide

68. --spacing: 20;
    :root {
    }
    You can’t “build up” values.
    margin: var(--spacing)px;
    :root {
    }
    

    View Slide

69. --spacing: 20;
    :root {
    }
    You can’t “build up” values.
    margin: var(--spacing)px;
    :root {
    }
    Doesn’t work
    

    View Slide

70. --spacing:;
    :root {
    }
    Strange behaviour
    --spacing: ;
    :root {
    }
    Invalid
    Valid
    Yeah, that’s a space caracter.
    

    View Slide

71. Fallback value
    var(--variableName, default);
    

    View Slide

72. Fallback value
    

    View Slide

73. Fallback value
    Doesn’t support var()
    

    View Slide

74. Fallback value
    Doesn’t support var()
    Fallback is there
    

    View Slide

75. Fallback value
    Doesn’t support var()
    Fallback is there
    

    View Slide

76. Fallback value
    Doesn’t support var()
    Fallback is there
    --bgColor Value
    

    View Slide

77. Fallback value
    Doesn’t support var()
    Fallback is there
    --bgColor Value
    

    View Slide

78. Fallback value
    Doesn’t support var()
    Fallback is there
    --bgColor Value
    Transparent
    

    View Slide

79. Variable as Fallback
    var(--var1, var(--var2, default));
    

    View Slide

80. Variable as Fallback
    var(--var1, var(--var2, var(--var3,
    var(--var4, var(--var5,
    default)))));
    

    View Slide

81. You can’t cycle with variables
    

    View Slide

82. You can’t cycle with variables
    

    View Slide

83. @supports (color: var(--)) {
    
    
    …
    
    
    }
    Support Testing
    

    View Slide

84. Compatibility
    

    View Slide

85. Polyfills
    https://github.com/aaronbarker/css-variables-polyfill
    

    View Slide

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)
    

    View Slide

87. Thanks!
    

    View Slide

88. “CSS Custom Properties” — @geoffreycrofte 56
    Geoffrey Crofte
    geoffrey.crofte.fr/en
    creativejuiz.fr/en
    Lead Designer at Foyer Group
    @geoffreycrofte
    

    View Slide