Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Démystifions les CSS Custom Properties
Audrey Garreau
June 13, 2018
Programming
0
29
Démystifions les CSS Custom Properties
Audrey Garreau
June 13, 2018
Tweet
Share
More Decks by Audrey Garreau
See All by Audrey Garreau
agarreau
0
170
Other Decks in Programming
See All in Programming
n1215
1
430
o0h
PRO
3
1.5k
manfredsteyer
PRO
0
280
ykpythemind
0
130
kaz29
2
120
thatjeffsmith
0
1.2k
yusuke57
0
120
fadis
3
1.8k
rukiadia
1
800
hanhan1978
14
3.4k
devinjeon
2
820
wafuwafu13
1
130
Featured
See All Featured
moore
125
21k
rocio
155
11k
deanohume
294
28k
shpigford
165
19k
phodgson
88
4k
shpigford
370
42k
jnunemaker
PRO
40
4.7k
kastner
54
2k
colly
188
14k
keithpitt
402
20k
sachag
445
36k
3n
163
22k
Transcript
Démystifions les CSS Custom properties
CSS Variables Non, on dit CSS Custom Properties ! 1
Déclaration // Déclaration * { --myvar : #FFF; } //
Utilisation body { background : var(--myvar); }
Déclaration // Déclaration * { --myvar : #FFF; } //
Utilisation body { background : var(--myvar); }
Demo Time ! Attention, vous allez en avoir plein le
css ! https://bit.ly/2LCyfK8
Compatibilité des navigateurs Custom Properties 49 31 16 9.1 @Support
28 22 13 9 Polyfill IE 11 : ShadyCSS
Gestion avec @Support body { background : red; } @support(--color)
{ :root { --color : #FFF; } body { background : var(--color, red); } }
Gestion avec @Support body { background : red; } @support(--color)
{ :root { --color : #FFF; } body { background : var(--color, red); } }
Limites Et oui, on peut pas tout faire avec... 2
Demo Time ! C’est aussi par ce qu’on aime le
risque https://bit.ly/2kWlIWy
Les utilisations avancées = Et vos pages sont plus réactives
3
Demo Time ! Une démo qui ne plante pas n’est
pas une vrai démo ! https://bit.ly/2Jrg3X6
Et ensuite C’est quoi la suite ? 4
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
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
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
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
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
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
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
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
::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
::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
::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
::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
Custom Type le problème // main.css body { --my-color: orange;
--my-color: url("https://web2day.co/logo.svg"); color: var(--my-color); }
Custom Type pour typer // main.js CSS.registerProperty({ name: "--my-color", syntax:
"<color>", initialValue: "black" });
Merci ! Des questions ? Audrey Garreau CEO Yumigo -
@garreau_audrey - @yumigoteam Jean-François Garreau CTO Sfeir Nantes / GDE Web Technology - @jefbinomed