Positionnement CSS :
l’avenir du futur
13 novembre 2012
Raphaël Goetter
Cheerleader Alsacréations

Futur antérieur
▪ CSS3 Multicolumns

Multicolumns

Multi-columns

Multi-columns

Distribution

Listes ordonnées

CSS Multi-columns

Futur du subjonctif
▪ flexible box model
▪ grid layout model
▪ regions
▪ exclusions

Flexbox

Flex en action

Lignes et Colonnes

Reverse

Fluidité

Alignements

Ordre d'affichage

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

body {
display: grid ;
grid-columns: 250px 1fr;
}
Colonnes

body {
display: grid ;
grid-columns: 250px 1fr;
}
nav {
grid-column: 1;
}
section {
grid-column: 2;
}
Colonnes

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 { correspond à
10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px
display: grid ;
grid-columns: 10px (1fr 10px)[4];
}
…
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;
Template
grid-template: "hh" syntax
"nc"
"ff";
}
header {
grid-cell: "h";
}
nav {
grid-cell: "n";
}
…
Template

section {
grid-row-align: center;
}
article {
grid-column-align: center;
}
aside {
grid-row-align: center;
grid-column-align: center;
}
Alignements

body { body {
display: grid; display: grid;
grid-template: "abcd"; grid-template:
} "a"
"b"
"c"
"d";
}
Adaptatif !

CSS Grid Layout

CSS regions

<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;
}

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 !

CSS evolution
s n s d ?
me table> ositio e
abl k mn gri ions / S4
fra t lu / C S
< / p p lay bloc ultico b ox reg sions
loa
t dis ine- m flex lu
f
inl exc

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 !
Raphaël Goetter
www.alsacreations.com
www.goetter.fr
www.ie7nomore.com
@goetter