Embed Size (px)
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.
Citation preview
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
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
