C S S IS AWESOME! DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
$ whoami #1 I g or L ab or or ie E xp e rt J a v a & W eb , @ ilab or ie ✉ ig or @ m o nke yp a t ch . i o ⚠ J e ne su i s p a s u n de s igne r DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
#2 � � � T he R u le o f L ea st P ow e r “ When designing computer systems, one is often faced with a choice between using a more or less powerful language for publishing information, for expressing constraints, or for solving some problem. This finding explores tradeoffs relating the choice of language to reusability of information. The "Rule of Least Power" suggests choosing the least powerful language suitable for a given purpose. DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
#3 R ègle s d u je u 1. T e xt e 2 . H T ML ( s éman t i qu e ) 3 . C SS ( la yout , sty le , anima t i o n s s im p le s ) 4. SV G ( f or me s e t anima t i o n s c o m p le x e s ) 5. J a v a S c r i pt , W eb A ss embl y ( ge st i o n d ' é t a ts , a pp el backend , calc u l s ) ⚠ ... mai s il y a tou j ours de b o nne s r ai so n s pour ne p a s su i vr e ce s r ègle s DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
#4 L e C SS c ' e st v a st e S elec tors R e spo n s i v e D e s ign B ox m o del M edia F l o a t V a r iable s M edia Q u e ry C o l ors A nima t i o n s S ha p e s G r adien ts ... DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
#5 P lan I . U t ili s e r u n pr é ‑ pro ce ss e ur ? II . U ni t é s III . F le x b ox e t G r id I V . P s e u d o élémen ts V . A nima t i o n s V I . P s e u d o cla ss e s d ' é t a t V II . H T ML V III . C o ncl us i o n DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
#6 Utiliser un pré ‑ processeur ? DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
#7 B or d ur e de s b outo n s button { background: lightblue; color: purple; ��border: medium solid currentColor;�� border: medium solid rgba(0,0,0,.42); } button.danger { background: salmon; color: rebeccapurple; } P l op D ange r ! DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
#8 A l ors ut ili s e ‑ t ‑ o n u n pr é ‑ pro ce ss e urs ? O u i , mai s pr i v ilégie z : le C SS le s post ‑ pro ce ss e urs ✽ currentColor background�origin � � � C SS V a r iable s ( aka C usto m P rop e rt ie s ) � � � C SS C o l or M o d u le L e v el 4 DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
#9 C o m p a t ibili t é N a v iga t e urs , us age ≥ 0,4 % en F r ance � � � 26,6 % 18,6 % 15,8 % 11,5 % 4,7 % 4,4 % 3,4 % 0,6 % 0,5 % � C SS 11 10 49 58 48 52 14 9.3 c urr en t C o l or 61 11 9.1 4.4 46 10.0‑10.2 v al u e 59 60 54 55 15 10.1 10.3 � C SS 3 11 10 49 58 48 52 14 9.3 B ackg rou nd ‑ 61 11 9.1 4.4 46 10.0‑10.2 image 59 60 54 55 15 10.1 opt i o n s 10.3 � C SS 11 10 49 58 48 52 14 9.3 V a r iable s 61 11 9.1 4.4 46 10.0‑10.2 ( C usto m 59 60 54 55 15 10.1 P rop e rt ie s ) 10.3 DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
#10 Unités DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
#11 U ne hi sto i r e d ’ u ni t é s C SS � C o mmi t S tr i p DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
#12 L e s u ni t é s de l o ng u e ur px , cm , pt , ... l o ng u e urs ab so l u e s ( me sur e p h ys i qu e ) f o nc t i o n de la font�size em , r em ha ut e ur d ' u n x , la r ge ur d ' u n 0 e x , ch v h , vw (100 v h , 100 vw ) = ( ha ut e ur , la r ge ur ) d u v ie wport v min , v ma x min (1 v h , 1 vw ), ma x (1 v h , 1 vw ) DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
H o l y G r ail a v ec calc #13 <body> H eade r <header>Header��header> L or em i psu m d o l or s i t ame t , c o n s ec t e tur adi p i s icing eli t . C o n s e qu a tur c orpor i s dic t a libe ro p lacea t qu a s ? <div> D ic t a d o l or e eligendi e t in i st e i usto lab or i os am , la u dan t i u m p e r fe r endi s qu ae so l ut a u nde v el vo l upt a s ! <nav>Menu��nav> I d ? <main>Content��main> M en u S ide <aside>Side��aside> ��div> <footer>Footer��footer> ��body> F oot e r DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
#14 B ilan u ni t é s U ni t é s � � � T ru c e t a stu ce s calc ✽ F u n w i t h V ie wport U ni ts DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
#15 C o m p a t ibili t é N a v iga t e urs , us age ≥ 0,4 % en F r ance � � � 26,6 % 18,6 % 15,8 % 11,5 % 4,7 % 4,4 % 3,4 % 0,6 % 0,5 % � r em 11 10 49 58 48 52 14 ( root em ) 9.3 61 11 9.1 4.4 46 u ni ts 10.0‑10.2 59 60 54 55 15 10.1 10.3 � 11 10 49 58 48 52 14 V ie wport 9.3 61 11 9.1 4.4 46 u ni ts : vw , 10.0‑10.2 v h , v min , 59 60 54 55 15 10.1 10.3 v ma x � calc () a s 11 10 49 58 48 52 14 C SS u ni t 9.3 61 11 9.1 4.4 46 v al u e 10.0‑10.2 59 60 54 55 15 10.1 10.3 DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
#16 Flexbox et Grid DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
H o l y G r ail a v ec flexbox #17 <body> H eade r <header>Header��header> L or em i psu m d o l or s i t ame t , c o n s ec t e tur adi p i s icing eli t . C o n s e qu a tur c orpor i s dic t a libe ro p lacea t qu a s ? <div> D ic t a d o l or e eligendi e t in i st e i usto lab or i os am , la u dan t i u m p e r fe r endi s qu ae so l ut a u nde v el vo l upt a s ! <nav>Menu��nav> I d ? <main>Content��main> M en u S ide <aside>Side��aside> ��div> <footer>Footer��footer> ��body> F oot e r DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
H o l y G r ail a v ec grid #18 <body> H eade r <header>Header��header> L or em i psu m d o l or s i t ame t , c o n s ec t e tur adi p i s icing eli t . C o n s e qu a tur c orpor i s dic t a libe ro p lacea t qu a s ? <div> D ic t a d o l or e eligendi e t in i st e i usto lab or i os am , la u dan t i u m p e r fe r endi s qu ae so l ut a u nde v el vo l upt a s ! <nav>Menu��nav> I d ? <main>Content��main> M en u S ide <aside>Side��aside> ��div> <footer>Footer��footer> ��body> F oot e r DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
#19 B ilan F le x b ox & G r id F le x b ox F le x b ox , e t le C SS r ede v ien t f u n ! ( H u be rt S ABLONNIÈRE ) S o l v ed b y F le x b ox � F le x b ox F ro gg y G r id @supports ⌗ G r id b y e x am p le s C SS G r id C hange s E v e ryt hing ( A b out W eb L a youts ) b y M ort en R and ‑ H end r ik s en � G r id G a r den DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
#20 C o m p a t ibili t é N a v iga t e urs , us age ≥ 0,4 % en F r ance � � � 26,6 % 18,6 % 15,8 % 11,5 % 4,7 % 4,4 % 3,4 % 0,6 % 0,5 % � C SS 11 10 49 58 48 52 14 9.3 F le x ible 61 11 9.1 4.4 46 10.0‑10.2 B ox L a yout 59 60 54 55 15 10.1 M o d u le 10.3 � C SS 11 10 49 58 48 52 14 9.3 G r id L a yout 61 11 9.1 4.4 46 10.0‑10.2 59 60 54 55 15 10.1 10.3 � C SS 11 10 49 58 48 52 14 9.3 F ea tur e 61 11 9.1 4.4 46 10.0‑10.2 Q u e r ie s 59 60 54 55 15 10.1 10.3 DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
#21 Pseudo éléments DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
#22 L e dîne r d ' u n p hil osop he <div class="table"> .table��before, .table��after { <div class="plate">��div> color: gray; ��div> font�size: 2rem; content: ' ⋔ '; transform: rotate(180deg); } ⋔ ⋔ DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
#23 T r iangle a v ec de s b or d ur e s div.top, div.right, div.bottom, div.left { border: 2em solid transparent; display: inline�block; box�shadow: 0 0 0 .1em red; } div.top { border�top�color: cyan; } div.right { border�right�color: purple; } div.bottom { border�bottom�color: green; } div.left { border�left�color: gold; } DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
#24 I nf o ‑ b u lle .popover { position: relative; background: teal; } .popover��before { position: absolute; z�index: -1; content: ''; top: 1.25em; left: 1em; border: .8em solid transparent; border�top�color: teal; transform: skew(-30deg); } H ell o D e v F e st T ou l ous e ! DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
#25 B ilan ps e u d o éléme men ts � � � T he : bef or e and : af t e r ps e u d o ‑ elemen ts mai s a uss i ��first�letter , ��first�line , ��selection , ��backdrop � A n U l t ima t e G u ide T o C SS P s e u d o ‑ C la ss e s A nd P s e u d o ‑ E lemen ts ⚠ ��before e t ��after ne ma r chen t p a s sur input , img , iframe ( p a s enc or e sp écifié ) T able e t a ss ie tt e de C SS D ine r ⓦ D îne r de s p hil osop he s DevFest #DevFestToulouse @ilaborie #CSS # � Toulouse 2017
Recommend
More recommend
