Web Event Lyon 2012
Positionnement CSS :l’avenir du futur15 juin 2012Raphaël GoetterCheerleader Alsacréations
View Slide
Où en est-on ?position: relativeframesspacer.gifmarges négativesfloatposition: absolutecolspan hacksclearbidouillesfluxbugsrowspanresetcommentairesconditionnels calquesframeworks CSSIE6 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 : table
display table-*
Répartition auto
Centrage vertical
Temps 4 : Futur antérieur▪ CSS3 Multicolumns
Multicolumns
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éede lignes, de colonnes et de cellules. »
body {display: grid}Et hop !La Grille
Colonnesbody {display: grid ;grid-columns: 250px 1fr;}
Colonnesbody {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 10pxRé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";}…TemplatesyntaxTemplate
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
Lorem Salu bissame ! Wie geht's lessamis ? Hans apporte moi une Wurschtsalad avec un piconbitte, s'il te plaît. […]1)2)3)4)5)6)
Lorem Salu bissame ! Wie geht's lessamis ? Hans apporte moi une Wurschtsalad avec un piconbitte, s'il te plaît. […]1)2)3)4)5)6)#origin {flow-into: kiwi;}#layout p {flow-from: kiwi;}
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.htmlDémo !
Et ensuite ? CSS 4 ?
CSS evolutionframesfloat / positiondisplay tableinline-blockmulticolumnsflexbox / 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@goetterRaphaël Goetter