Démystifions les CSS Custom Properties

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