Démystifions les CSS Custom Properties

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