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
140
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
goetter
0
140
goetter
8
6.2k
goetter
0
620
goetter
0
820
goetter
3
1k
goetter
6
5.2k
goetter
1
360
goetter
8
21k
goetter
19
6.4k
Other Decks in Design
See All in Design
tiagilles
0
240
juliannaromero
0
440
armrhjm
0
120
danpark001
0
3.1k
lizbethvic
0
120
smagallanes
0
100
ajanart
0
390
jtkang
0
210
mmueno
0
600
masakioka
1
140
ajanart
1
630
antondraws
0
170
Featured
See All Featured
garrettdimon
287
110k
colly
65
3k
shlominoach
176
7.4k
philnash
8
510
orderedlist
PRO
329
35k
eileencodes
113
25k
schacon
145
6.6k
jponch
103
5k
holman
461
280k
keathley
18
650
addyosmani
311
21k
ddemaree
274
31k
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/41597157@N00/6919795175/ ▪ http://www.flickr.com/photos/8070463@N03/2484684062/ ▪ http://www.flickr.com/photos/7762644@N04/2220008689/ ▪ http://www.flickr.com/photos/please/131241808/
▪ www.GdeFon.ru (CSS evolution) ▪ http://www.flickr.com/photos/7900943@N06/3084329562/ ▪ http://www.toutsaufsarkozy.com
Merci ! www.alsacreations.com www.goetter.fr www.ie7nomore.com @goetter Raphaël Goetter