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

Démystifions les CSS Custom Properties

Démystifions les CSS Custom Properties

Avatar for Audrey Garreau

Audrey Garreau

June 13, 2018
Tweet

More Decks by Audrey Garreau

Other Decks in Programming

Transcript

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

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

    Utilisation body { background : var(--myvar); }
  3. Gestion avec @Support body { background : red; } @support(--color)

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

    { :root { --color : #FFF; } body { background : var(--color, red); } }
  5. Demo Time ! C’est aussi par ce qu’on aime le

    risque https://bit.ly/2kWlIWy
  6. Demo Time ! Une démo qui ne plante pas n’est

    pas une vrai démo ! https://bit.ly/2Jrg3X6
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. ::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
  16. ::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
  17. ::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
  18. ::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
  19. Custom Type le problème // main.css body { --my-color: orange;

    --my-color: url("https://web2day.co/logo.svg"); color: var(--my-color); }
  20. Merci ! Des questions ? Audrey Garreau CEO Yumigo -

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