Download - Futur du-positionnement-css
Positionnement CSS :l’avenir du futur
13 novembre 2012Raphaël GoetterCheerleader 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
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
<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
frames<table>
float / positio
n
display table
inline-blockmultico
lumns
flexbox / gridregions /
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.comwww.goetter.frwww.ie7nomore.com@goetter
Raphaël Goetter