Le Futur du positionnement CSS

Positionnement CSS :l’avenir du futur

15 juin 2012Raphaël GoetterCheerleader Alsacréations

Où en est-on ?

position: relative

<br><br><br>frames

spacer.gif

marges négatives

float position: absolute<table>

colspan hacks

clearbidouilles

fluxbugs

rowspanreset

commentaires conditionnels

&nbsp;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 2012http://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

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

Flex en action

Lignes et Colonnes

Reverse

Fluidité

Alignements

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 !

Et ensuite ? CSS 4 ?

CSS evolution

frames<table>

float / positio

n

display table

inline-blockmultico

lumns

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.comwww.goetter.frwww.ie7nomore.com@goetter

Raphaël Goetter