Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Le futur du positionnement CSS
Raphael Goetter
June 15, 2012
Design
0
180
Le futur du positionnement CSS
Web Event Lyon 2012
Raphael Goetter
June 15, 2012
Tweet
Share
More Decks by Raphael Goetter
See All by Raphael Goetter
Ah, tu peux faire ça en CSS maintenant ? (version listing)
goetter
2
1.8k
Tu fais du Web et tu ne connais pas les Layout Shifts ?! Nan mais...
goetter
2
200
Conventions de nommage en CSS
goetter
0
1.1k
50 nuances de grilles
goetter
9
7.3k
Flexbox fallait pas l'inviter
goetter
1
930
L'épopée des polices web, de Comic Sans aux variable fonts
goetter
0
1.2k
Atelier CSS Grid Layout
goetter
3
1.4k
Flexbox, place à la gueule de bois !
goetter
6
6k
Le quotidien d'une agence web du futur
goetter
1
490
Other Decks in Design
See All in Design
Odyssey Design
rkendrick25
0
140
保育中心設計でつくる保育ICTの裏側
hiro93n
0
220
Upper Hand
ruthbaraz
PRO
1
940
サービスピボット時におけるデザイナーの役割
vivion
0
920
Presentation_JM22.pdf
amritdevta
0
110
Functionalism Architecture: according to Wikipedia
juliaso
0
100
本質を理解してデザインに取り組む / Hatena Engineer Seminar #23 aoym_05
hatena
0
380
戦略コンサル出身者のUXデザイン録/Spectrum Tokyo Design Fest 2022
atamaplus
0
230
モデルとダイアグラムの活用の本質
akiramotomura
0
410
「プロダクトとユーザーをつなぐ」BtoB SaaSデザインの面白さ
sizucca
2
1.6k
プロダクトマネジメントと人間中心設計 - デザイナーからPMへのキャリアシフト -
hiromasa_yoshikawa
1
990
(Selection) Tanuki And Tangerine
greensmile
0
130
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
49
7.9k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
182
15k
Statistics for Hackers
jakevdp
785
210k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
31
20k
Scaling GitHub
holman
453
140k
Embracing the Ebb and Flow
colly
75
3.6k
Debugging Ruby Performance
tmm1
67
11k
Build your cross-platform service in a week with App Engine
jlugia
221
17k
Side Projects
sachag
451
37k
GitHub's CSS Performance
jonrohan
1020
430k
Making the Leap to Tech Lead
cromwellryan
117
7.7k
Transcript
Positionnement CSS : l’avenir du futur 15 juin 2012 Raphaël
Goetter Cheerleader Alsacréations
Où en est-on ? position: relative <br><br><br> frames spacer.gif marges
négatives float position: absolute <table> colspan hacks clear bidouilles flux bugs rowspan reset commentaires conditionnels calques frameworks CSS IE6 must die !
Temps 1 : imparfait ▪ display : block ▪ display
: inline ▪ margin / padding ▪ frames / framesets ▪ calques « Dreamweaver » ▪ tableaux HTML
Temps 2 : Présent de l'indicatif ▪ float + clear
▪ position absolute + position relative
Web Event Lyon 2012 http://event.lafermeduweb.net ▪ float : 66x ▪
clear : 8x ▪ position absolute : 27x ▪ position relative : 20x
Temps 3 : Futur simple ▪ display : inline-block ▪
display : table-cell
display : inline-block
display inline-block
None
None
display inline-block
display : table
display table-*
display table-*
display table-*
Répartition auto
Centrage vertical
display table-*
Temps 4 : Futur antérieur ▪ CSS3 Multicolumns
Multicolumns
Multi-columns
Multi-columns
Distribution
Listes ordonnées
CSS Multi-columns
Temps 5 : Futur du subjonctif ▪ flexible box model
▪ grid layout model ▪ regions ▪ exclusions
Flexbox
None
Flex en action
Lignes et Colonnes
Reverse
Fluidité
Alignements
None
None
None
CSS Flexbox
Grid Layout
CSS3 Grid Layout « Représentation virtuelle composée de lignes, de
colonnes et de cellules. »
body { display: grid } Et hop ! La Grille
Colonnes body { display: grid ; grid-columns: 250px 1fr; }
Colonnes body { display: grid ; grid-columns: 250px 1fr; }
nav { grid-column: 1; } section { grid-column: 2; }
body { display: grid ; grid-columns: 250px 1fr; grid-rows: 100px
300px; } nav { grid-column: 1; grid-row: 1; } article { grid-column: 1; grid-row: 2; } …
body { display: grid ; grid-columns: 10px (1fr 10px)[4]; }
… correspond à 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px Répétitions
body { display: grid; grid-columns: 250px 1fr; grid-rows: 100px 300px;
} header { grid-column: 1; grid-row: 1; grid-column-span: 2; } … Distribution
body { display: grid; grid-template: "hh" "nc" "ff"; } header
{ grid-cell: "h"; } nav { grid-cell: "n"; } … Template syntax Template
section { grid-row-align: center; } article { grid-column-align: center; }
aside { grid-row-align: center; grid-column-align: center; } Alignements
Adaptatif ! body { display: grid; grid-template: "abcd"; } body
{ display: grid; grid-template: "a" "b" "c" "d"; }
CSS Grid Layout
CSS regions
None
<div id="origin"><p>Lorem Salu bissame ! Wie geht's les samis ?
Hans apporte moi une Wurschtsalad avec un picon bitte, s'il te plaît. […]</p></div> <div id="layout"> <p>1)</p> <p>2)</p> <img src="img.jpg" alt=""> <p>3)</p> <p>4)</p> <p>5)</p> <p>6)</p> </div>
<div id="origin"><p>Lorem Salu bissame ! Wie geht's les samis ?
Hans apporte moi une Wurschtsalad avec un picon bitte, s'il te plaît. […]</p></div> <div id="layout"> <p>1)</p> <p>2)</p> <img src="img.jpg" alt=""> <p>3)</p> <p>4)</p> <p>5)</p> <p>6)</p> </div> #origin { flow-into: kiwi; } #layout p { flow-from: kiwi; }
None
CSS regions
CSS exclusions
#exclusion {float :positionned ; wrap-flow: auto}
#exclusion {float :positionned ; wrap-flow: both}
#exclusion {float :positionned ; shape-inside: circle} ‘rectangle’, ‘circle’, ‘ellipse’ or
‘polygon’
▪ http://labs.adobe.com/downloads/cssregions.html Démo !
Et ensuite ? CSS 4 ?
CSS evolution frames <table> float / position display table inline-block
multicolumns flexbox / grid regions / exclusions CSS4 ?
Crédits photos ▪ http://www.flickr.com/photos/
[email protected]
/6919795175/ ▪ http://www.flickr.com/photos/
[email protected]
/2484684062/ ▪ http://www.flickr.com/photos/
[email protected]
/2220008689/ ▪ http://www.flickr.com/photos/please/131241808/
▪ www.GdeFon.ru (CSS evolution) ▪ http://www.flickr.com/photos/
[email protected]
/3084329562/ ▪ http://www.toutsaufsarkozy.com
Merci ! www.alsacreations.com www.goetter.fr www.ie7nomore.com @goetter Raphaël Goetter