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

Geoffrey Crofte

May 08, 2018
Tweet

More Decks by Geoffrey Crofte

Other Decks in Programming

Transcript

  1. CSS Custom Properties


    Add Variables to Your CSS

    View full-size slide

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

    View full-size 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 full-size slide

  4. What are Custom Properties?

    View full-size slide

  5. What are Custom Properties?
    CSS Variables
    IIIIIIII

    View full-size slide

  6. $color: #bada55;


    @color: #bada55;
    This not about…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. currentColor
    But this is not about…

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

  13. 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 full-size slide

  14. Do the fu%€


    you want with them.
    In other words…

    View full-size slide

  15. How to use CSS Variables?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. Quick Example of use

    View full-size slide

  20. Why CSS instead of Sass Variables?

    View full-size slide

  21. The main issue with Sass (or LESS) variables:


    They have to be computed to get their value.
    Computation

    View full-size slide

  22. CSS Variables are alive

    View full-size slide

  23. CSS Variables are alive

    View full-size slide

  24. JavaScript can access them

    View full-size slide

  25. Media Queries ❤ CSS Variables

    View full-size slide

  26. Media Queries ❤ CSS Variables

    View full-size slide

  27. CSS Variables are inherited

    View full-size slide

  28. CSS Variables are inherited

    View full-size slide

  29. CSS Variables are inherited

    View full-size slide

  30. CSS Variables are inherited

    View full-size slide

  31. CSS Variables are inherited

    View full-size slide

  32. CSS Variables are inherited

    View full-size slide

  33. Demos & Use Cases

    View full-size slide

  34. http://bit.ly/cssvargradient

    View full-size slide

  35. http://bit.ly/cssvargradient

    View full-size slide

  36. Mouse position

    View full-size slide

  37. CSS Transformation

    View full-size slide

  38. CSS Transformation

    View full-size slide

  39. CSS Transformation

    View full-size slide

  40. CSS Transformation

    View full-size slide

  41. CSS Transformation

    View full-size slide

  42. CSS Transformation

    View full-size slide

  43. CSS Transformation

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    style=“transform…” is dirty. Period.

    View full-size slide

  47. 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 full-size 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.
    It’s a philosophy

    CSS is for styling. JS is not.

    View full-size 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.

    Futur proof

    Let the CSS engine handle that part.

    View full-size slide

  50. http://bit.ly/cssvargradient2

    View full-size slide

  51. http://bit.ly/cssvargradient2

    View full-size slide

  52. CSS Transformation

    View full-size slide

  53. Themable interfaces

    View full-size slide

  54. Themable interfaces

    View full-size slide

  55. Themable interfaces

    View full-size slide

  56. Themable interfaces

    View full-size slide

  57. Themable interfaces

    View full-size slide

  58. Themable interfaces

    View full-size slide

  59. Accessibility Example

    View full-size slide

  60. Accessibility Example

    View full-size slide

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

    View full-size slide

  62. Further Takeaways

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  69. Fallback value

    View full-size slide

  70. Fallback value
    Doesn’t support var()

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  78. You can’t cycle with variables

    View full-size slide

  79. You can’t cycle with variables

    View full-size slide

  80. @supports (color: var(--)) {





    }
    Support Testing

    View full-size slide

  81. Compatibility

    View full-size slide

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

    View full-size slide

  83. “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 full-size slide

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

    View full-size slide