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

Démystifions les CSS Custom Properties

Démystifions les CSS Custom Properties

928b54a6ffa62a308e58b8fde460b74b?s=128

Audrey Garreau

June 13, 2018
Tweet

Transcript

  1. Démystifions les CSS Custom properties

  2. CSS Variables Non, on dit CSS Custom Properties ! 1

  3. Déclaration // Déclaration * { --myvar : #FFF; } //

    Utilisation body { background : var(--myvar); }
  4. Déclaration // Déclaration * { --myvar : #FFF; } //

    Utilisation body { background : var(--myvar); }
  5. Demo Time ! Attention, vous allez en avoir plein le

    css ! https://bit.ly/2LCyfK8
  6. Compatibilité des navigateurs Custom Properties 49 31 16 9.1 @Support

    28 22 13 9 Polyfill IE 11 : ShadyCSS
  7. Gestion avec @Support body { background : red; } @support(--color)

    { :root { --color : #FFF; } body { background : var(--color, red); } }
  8. Gestion avec @Support body { background : red; } @support(--color)

    { :root { --color : #FFF; } body { background : var(--color, red); } }
  9. Limites Et oui, on peut pas tout faire avec... 2

  10. Demo Time ! C’est aussi par ce qu’on aime le

    risque https://bit.ly/2kWlIWy
  11. Les utilisations avancées = Et vos pages sont plus réactives

    3
  12. Demo Time ! Une démo qui ne plante pas n’est

    pas une vrai démo ! https://bit.ly/2Jrg3X6
  13. Et ensuite C’est quoi la suite ? 4

  14. Le problème de surchage <my-component> #shadow-root <!-- Overridable part--> <div>

    <span>...</span> </div> <!-- Non overridable part--> <section>...</section> </my-component> Override Me Don’t Override Me
  15. Le problème de surchage // Style my-component :root { --a-color

    : orange; } span { color : var(--a-color); } <my-component> #shadow-root <!-- Overridable part--> <div> <span>...</span> </div> <!-- Non overridable part--> <section>...</section> </my-component> Override Me Don’t Override Me
  16. Le problème de surchage // index.css my-component span:hover { --a-color

    : red } <my-component> #shadow-root <!-- Overridable part--> <div> <span>...</span> </div> <!-- Non overridable part--> <section>...</section> </my-component> Override Me Don’t Override Me
  17. Le problème de surchage // Style my-component :root { --a-color

    : orange; } span { color : var(--a-color); } :root span:hover { color : var(--a-color-hover); //red } <my-component> #shadow-root <!-- Overridable part--> <div> <span>...</span> </div> <!-- Non overridable part--> <section>...</section> </my-component> Override Me Don’t Override Me
  18. Le problème de surchage // index.css my-component{ --a-color-hover : red

    } <my-component> #shadow-root <!-- Overridable part--> <div> <span>...</span> </div> <!-- Non overridable part--> <section>...</section> </my-component> Override Me Don’t Override Me
  19. Le problème de surchage // index.css my-component:focus span:hover { --a-color

    : blue } <my-component> #shadow-root <!-- Overridable part--> <div> <span>...</span> </div> <!-- Non overridable part--> <section>...</section> </my-component> Override Me Don’t Override Me
  20. Le problème de surchage // Style my-component :root { --a-color

    : orange;} span { color : var(--a-color); } :root:hover span { color : var(--a-color-hover); } :root:focus span:hover { color : var(--a-color-hover-focus); //blue } <my-component> #shadow-root <!-- Overridable part--> <div> <span>...</span> </div> <!-- Non overridable part--> <section>...</section> </my-component> Override Me Don’t Override Me
  21. Le problème de surchage // index.css my-component{ --a-color-hover : red;

    --a-color-hover-focus : blue; } <my-component> #shadow-root <!-- Overridable part--> <div> <span>...</span> </div> <!-- Non overridable part--> <section>...</section> </my-component> Override Me Don’t Override Me
  22. ::part & ::theme la relève <my-component> #shadow-root <!-- Overridable part-->

    <div> <span>...</span> </div> <!-- Non overridable part--> <section>...</section> </my-component> Override Me Don’t Override Me
  23. ::part & ::theme la relève <my-component> #shadow-root <!-- Overridable part-->

    <div part=”part-name”> <span>...</span> </div> <!-- Non overridable part--> <section>...</section> </my-component> Override Me Don’t Override Me
  24. ::part & ::theme la relève <my-component> #shadow-root <!-- Overridable part-->

    <div part=”part-name”> <span>...</span> </div> <!-- Non overridable part--> <section>...</section> </my-component> Override Me Don’t Override Me
  25. ::part & ::theme la relève // index.css my-component::part(part-name) { --my-color:

    blue; } my-component::part(part-name):hover { --my-color: red; font-style: italic; } Override Me Don’t Override Me Override Me Don’t Override Me
  26. Custom Type le problème // main.css body { --my-color: orange;

    --my-color: url("https://web2day.co/logo.svg"); color: var(--my-color); }
  27. Custom Type pour typer // main.js CSS.registerProperty({ name: "--my-color", syntax:

    "<color>", initialValue: "black" });
  28. Merci ! Des questions ? Audrey Garreau CEO Yumigo -

    @garreau_audrey - @yumigoteam Jean-François Garreau CTO Sfeir Nantes / GDE Web Technology - @jefbinomed