Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Custom Property (aka CSS Variables)

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

5b6a2bd86ef643786a381a212e0ef2f1?s=128

Geoffrey Crofte

May 08, 2018
Tweet

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.
  13. None
  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