le futur du positionnement css
DESCRIPTION
Parce qu’un jour CSS nous promet de ne plus avoir à nous torturer avec des bidouilles de positionnement, des bugs d’affichage, des hacks, des flottants mal employés, des position: absolute tordues, des position: relative ou des clear: both sortis de nulle part, du centrage vertical intuitif, toussa. Un jour vous pourrez dire : j’y étais, c’était le bon vieux temps. Mais pas encore. On y parlera de diverses spécifications (en plein brouillon ou non) telles que : inline-block, CSS table, multicolonnes, flexbox, grid layout, float : position, regions, exclusions, CSS4, etc.TRANSCRIPT
![Page 1: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/1.jpg)
Positionnement CSS :l’avenir du futur
15 juin 2012Raphaël GoetterCheerleader Alsacréations
![Page 2: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/2.jpg)
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
calques
frameworks CSS
IE6 must die !
![Page 3: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/3.jpg)
Temps 1 : imparfait
▪ display : block▪ display : inline▪ margin / padding▪ frames / framesets▪ calques « Dreamweaver »▪ tableaux HTML
![Page 4: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/4.jpg)
Temps 2 : Présent de l'indicatif
▪ float + clear▪ position absolute + position relative
![Page 5: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/5.jpg)
Web Event Lyon 2012http://event.lafermeduweb.net
▪ float : 66x▪ clear : 8x▪ position absolute : 27x▪ position relative : 20x
![Page 6: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/6.jpg)
Temps 3 : Futur simple
▪ display : inline-block▪ display : table-cell
![Page 7: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/7.jpg)
display : inline-block
![Page 8: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/8.jpg)
display inline-block
![Page 9: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/9.jpg)
![Page 10: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/10.jpg)
![Page 11: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/11.jpg)
display inline-block
![Page 12: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/12.jpg)
display : table
![Page 13: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/13.jpg)
display table-*
![Page 14: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/14.jpg)
display table-*
![Page 15: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/15.jpg)
display table-*
![Page 16: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/16.jpg)
Répartition auto
![Page 17: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/17.jpg)
Centrage vertical
![Page 18: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/18.jpg)
display table-*
![Page 19: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/19.jpg)
Temps 4 : Futur antérieur
▪ CSS3 Multicolumns
![Page 20: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/20.jpg)
Multicolumns
![Page 21: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/21.jpg)
Multi-columns
![Page 22: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/22.jpg)
Multi-columns
![Page 23: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/23.jpg)
Distribution
![Page 24: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/24.jpg)
Listes ordonnées
![Page 25: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/25.jpg)
CSS Multi-columns
![Page 26: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/26.jpg)
Temps 5 : Futur du subjonctif
▪ flexible box model▪ grid layout model▪ regions▪ exclusions
![Page 27: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/27.jpg)
Flexbox
![Page 28: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/28.jpg)
![Page 29: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/29.jpg)
Flex en action
![Page 30: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/30.jpg)
Lignes et Colonnes
![Page 31: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/31.jpg)
Reverse
![Page 32: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/32.jpg)
Fluidité
![Page 33: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/33.jpg)
Alignements
![Page 34: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/34.jpg)
![Page 35: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/35.jpg)
![Page 36: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/36.jpg)
![Page 37: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/37.jpg)
CSS Flexbox
![Page 38: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/38.jpg)
Grid Layout
![Page 39: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/39.jpg)
CSS3 Grid Layout« Représentation virtuelle composée de lignes, de colonnes et de cellules. »
![Page 40: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/40.jpg)
body {display: grid
}Et hop !
La Grille
![Page 41: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/41.jpg)
Colonnes
body {display: grid ;grid-columns: 250px 1fr;
}
![Page 42: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/42.jpg)
Colonnes
body {display: grid ;grid-columns: 250px 1fr;
}nav { grid-column: 1; }section { grid-column: 2; }
![Page 43: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/43.jpg)
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;
}…
![Page 44: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/44.jpg)
body {display: grid ;grid-columns: 10px (1fr 10px)[4];
}…
correspond à10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px
Répétitions
![Page 45: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/45.jpg)
body {display: grid;grid-columns: 250px 1fr;grid-rows: 100px 300px;
}header {
grid-column: 1;grid-row: 1;grid-column-span: 2;
}…
Distribution
![Page 46: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/46.jpg)
body {display: grid;grid-template: "hh"
"nc""ff";
}header {
grid-cell: "h";}nav {
grid-cell: "n";}…
Template syntax
Template
![Page 47: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/47.jpg)
section {grid-row-align: center;
}article {
grid-column-align: center;}aside {
grid-row-align: center;grid-column-align: center;
}
Alignements
![Page 48: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/48.jpg)
Adaptatif !
body {display: grid;grid-template: "abcd";
}
body {display: grid;grid-template:
"a" "b"
"c""d";
}
![Page 49: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/49.jpg)
CSS Grid Layout
![Page 50: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/50.jpg)
CSS regions
![Page 51: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/51.jpg)
![Page 52: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/52.jpg)
<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>
![Page 53: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/53.jpg)
<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;}
![Page 54: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/54.jpg)
![Page 55: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/55.jpg)
CSS regions
![Page 56: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/56.jpg)
CSS exclusions
![Page 57: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/57.jpg)
#exclusion {float :positionned ; wrap-flow: auto}
![Page 58: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/58.jpg)
#exclusion {float :positionned ; wrap-flow: both}
![Page 59: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/59.jpg)
#exclusion {float :positionned ; shape-inside: circle}
‘rectangle’, ‘circle’, ‘ellipse’ or ‘polygon’
![Page 60: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/60.jpg)
▪ http://labs.adobe.com/downloads/cssregions.html
Démo !
![Page 61: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/61.jpg)
Et ensuite ? CSS 4 ?
![Page 62: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/62.jpg)
CSS evolution
frames<table>
float / positio
n
display table
inline-blockmultico
lumns
flexbox / grid
regions /
exclusions CSS4 ?
![Page 63: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/63.jpg)
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
![Page 64: Le Futur du positionnement CSS](https://reader030.vdocuments.mx/reader030/viewer/2022013111/5560b655d8b42afe3b8b4a60/html5/thumbnails/64.jpg)
Merci !
www.alsacreations.comwww.goetter.frwww.ie7nomore.com@goetter
Raphaël Goetter