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

Démystifions les CSS Custom Properties

Démystifions les CSS Custom Properties

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