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