Talk given at Future of Web Design, Prague, 28 Nov 2012. #fowa #fowd
CSS3:Layoutsfor theMulti-screenWorld
View Slide
Peter Gasston@stopsatgreen
1. The webhas changed2. Our toolsare outdated
What is CSS3going to doabout it?
The webhas changed
By Anna Debenham: http://www.flickr.com/photos/anna_debenham/8190771122/
http://www.thinkwithgoogle.com/insights/featured/new-multi-screen-world-insight/
1633320x480768x1024
Device-centricdevelopment
Media Queries
@media screen {}@media screen and (min-width: 800px) {}@media (orientation: portrait) {}Media Queries
widthdevice-widthorientationaspect-ratiodevice-aspect-ratioMedia Queries
@media (min-resolution: 1.5dppx) {}Media Queries
@media (max-width: 480px) {...@media (orientation: portrait) {...}}Media Queries
scriptpointerhoverluminosity(Possible) Media Queries
content="width=500, initial-scale=1,maximum-scale=2">Device Adaptation
Device Adaptation@viewport {initial-scale: 1;maximum-scale: 2;width: 500px;}
Device Adaptation@viewport {width: device-width;}@media (max-device-width: 420px) {@viewport {width: 500px;}}
Our toolsare outdated
●●float: leftHTML & CSS1
●position: absolute●display: inline-block●display: tableCSS2
The Three Stages of RWD
New layoutmethods
Multi-columnsarticle { column-count: 3; }article { column-width: 20em; }
AB .b { flow-from: 'foo'; }fooRegions.a { flow-into: 'foo'; }
BC D.b, .c, .d {flow-from: 'foo';}fooRegions
Flexbox
Flexbox.parent { display: flex; }.child { width: 30%; }.child { flex: 1; }
FlexboxA B .a { flex: 2; }.b { flex: 1; }AB.parent {flex-direction: column;}.a { flex: 2; }.b { flex: 1; }
Flexbox.parent {align-items: center;justify-content: center;}.parent {flex-direction: column;}.a { order: 2; }.b { order: 1; }AB
Sod this,let'slive code!
Grid Layout.parent {display: grid;grid-definition-columns:1fr 1fr 2fr;}.parent {grid-definition-columns:1fr 1fr 2fr;grid-definition-rows:10em auto 40px;}
Grid LayoutAB.child {grid-column-position: 2;grid-row-position: 2;}.a { grid-column: 2 2; }.b { grid-row-span: 3; }
.child {position: absolute;wrap-flow: both;}Exclusions
.child {shape-outside:circle(50%,50%,400px);}Shaped Exclusions
.child {shape-inside:circle(50%,50%,400px);}Shaped Exclusions
Conclusion
1. The web iseverywhere
2. Web designis constrainedby the toolswe have
3. Better toolsare on the way
4. Let's makebeautifulwebsitesthat workeverywhere
Konec.* Some of the CSS properties shown in thistalk are experimental and subject to change.Always check http://caniuse.com andhttp://html5please.com for latestimplementation status.