Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Le futur du positionnement CSS
Raphael Goetter
June 15, 2012
Design
0
160
Le futur du positionnement CSS
Web Event Lyon 2012
Raphael Goetter
June 15, 2012
Tweet
Share
More Decks by Raphael Goetter
See All by Raphael Goetter
Conventions de nommage en CSS
goetter
0
750
50 nuances de grilles
goetter
8
6.9k
Flexbox fallait pas l'inviter
goetter
0
810
L'épopée des polices web, de Comic Sans aux variable fonts
goetter
0
1.1k
Atelier CSS Grid Layout
goetter
3
1.3k
Flexbox, place à la gueule de bois !
goetter
6
5.8k
Le quotidien d'une agence web du futur
goetter
1
470
Mini Convention CSS
goetter
8
21k
FlexRox
goetter
20
6.9k
Other Decks in Design
See All in Design
Driveline: Arizona (Storyboards)
8sided
PRO
0
170
The Triangle
wallabites
0
130
tsunasapo_branch-concept202007
tsunasapo
0
180
今から始めるFigma超入門
448jp
0
590
dnd board
emmamsketches
0
160
Rakuma Developers
nojirakuten
0
1.5k
Meep
vincentwu
PRO
1
290
The Party! - Story Sequence
diablicos_
0
140
Love Diana-Mermaid Song Sequence
ivettetwin
0
130
ダークモード対応に困ったときの便利な処方箋 / Color scheme for dark mode
featherplain
3
590
Design System ガイドライン策定のススメ
tadaking
4
1.2k
Storyboard: Midnight Cookie
luchiianita
0
220
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
303
40k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
Thoughts on Productivity
jonyablonski
43
2.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
315
19k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Designing for humans not robots
tammielis
241
23k
Optimizing for Happiness
mojombo
365
63k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
Intergalactic Javascript Robots from Outer Space
tanoku
261
25k
Robots, Beer and Maslow
schacon
152
7.1k
Code Reviewing Like a Champion
maltzj
506
37k
Transcript
Positionnement CSS : l’avenir du futur 15 juin 2012 Raphaël
Goetter Cheerleader Alsacréations
Où en est-on ? position: relative <br><br><br> frames spacer.gif marges
négatives float position: absolute <table> colspan hacks clear bidouilles flux bugs rowspan reset 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 2012 http://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
None
None
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
None
Flex en action
Lignes et Colonnes
Reverse
Fluidité
Alignements
None
None
None
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
None
<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; }
None
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 / position display table inline-block
multicolumns 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.com www.goetter.fr www.ie7nomore.com @goetter Raphaël Goetter