laying out the future
DESCRIPTION
This version of my main presentation for 2013, first given at the Camp Digital event in Manchester, provides an overview of the most interesting new layout features available in CSS3, along with advice on supporting older browsers, and some context around why they are important.TRANSCRIPT
Laying outThe future
Friday, 8 March 13
Find me...
✴ [email protected]/[email protected]✴ @chrisdavidmills✴ slideshare.net/chrisdavidmills
Friday, 8 March 13
In the early days
✴ We thought the Web was print✴ Limited device landscape meant
limited outlook✴ Limited toolset
Friday, 8 March 13
Consistent CSS support
✴ Was very welcome...✴ Still didn’t give us much in the way
of layout
Friday, 8 March 13
CSS2 gave us
✴ floats: limiting, and kind of abused.✴ positioning: feh.✴ margins, padding: pfffff.✴ borders.✴ meh.
Friday, 8 March 13
We still have problems
At this point, there was still a raft of design problems that were absurdly difficult to solve on the web.
Friday, 8 March 13
What about
✴ Centering stuff? ✴ Same height columns?✴ Flexible multiple columns?✴ Complex floats?✴ Shrinkwrapping contents?✴ etc.
Friday, 8 March 13
Same height columns
Friday, 8 March 13
Same height columns
✴ We can fix this with faux columns✴ Or JavaScript✴ But really? Should we need to?
Friday, 8 March 13
Fortunately we have
A New Hope
Friday, 8 March 13
New tools on the horizon
✴ CSS WG + browser vendors✴ Hard at work
Friday, 8 March 13
Media queries
Friday, 8 March 13
Media queries
✴ Same content, different layouts✴ Optimized UIs!✴ Polyfills/fixed layouts for old IE
Friday, 8 March 13
Media queries
/* Mobile first - make your mobile layout the default... */
@media screen and (min-width: 481px) { /* ...then do amazing stuff for wider screens */}
Friday, 8 March 13
Media queries
Friday, 8 March 13
matchMedia
✴ matchMedia = media queries inside script
✴ For IE<10 and Opera Presto, polyfill github.com/paulirish/matchMedia.js/
Friday, 8 March 13
matchMedia example
if (window.matchMedia("(min-width: 480px)").matches) { /* Do stuff for wider screens */} else { /* Do stuff for narrow screens */}
Friday, 8 March 13
http://dev.opera.com/articles/view/love-your-devices-adaptive-web-design-with-media-queries-viewport-and-more/
More on Media queries
Friday, 8 March 13
viewport/CSS device
adaptation
Friday, 8 March 13
Mobile browsers lie
✴ About viewport width✴ Some also lie about the resolution✴ So media queries alone don’t cut it
Friday, 8 March 13
Mobile misbehavior
Friday, 8 March 13
Viewport
<meta name="viewport" content="width=device-width">
Friday, 8 March 13
Better
Friday, 8 March 13
@viewport
✴ Because viewport is more of a style thing
✴ Specify viewport inside the @viewport rule
✴ Opera Presto, IE10, WebKit
Friday, 8 March 13
Viewport
@viewport { width: device-width;}
Friday, 8 March 13
http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
More on viewportand @ viewport
Friday, 8 March 13
Flexbox
Friday, 8 March 13
Flexbox rocks
✴ Allows easy flexible layouts✴ Content reordering✴ Same height columns✴ Cure for cancer?✴ Chrome, Opera Presto, FF, IE (old
syntax)
Friday, 8 March 13
An example
<section> <nav> ... </nav> <article> ... </article> <article> ... </article></section>
Friday, 8 March 13
An example
section { display: flex;}
Friday, 8 March 13
Gives you
Friday, 8 March 13
Rows and columns
section { display: flex; flex-direction: row; flex-wrap: nowrap;}
/* flex-flow is shorthand for flex-direction/ wrap */
Friday, 8 March 13
Main and cross axis
Friday, 8 March 13
align items on main axis
section { justify-content: center;}
/* can take other values such as flex-start, flex-end, space-between and space-around */
Friday, 8 March 13
Friday, 8 March 13
align items on cross axis
section { align-items: stretch;}
/* can take other values such as flex-start, flex-end, and center; */
Friday, 8 March 13
Friday, 8 March 13
Ordering elements
✴ Reorder child elements easily and quickly
✴ Without screwing with the DOM
Friday, 8 March 13
Ordinal groups
nav { order: 1;}
Friday, 8 March 13
Gives you
Friday, 8 March 13
Flexing our muscle
✴ The flex property✴ Set what proportion of available
space child elements occupy✴ Unit-less proportion values
Friday, 8 March 13
Flex property
nav { flex: 1;}
article { flex: 3;}
Friday, 8 March 13
Gives you
Friday, 8 March 13
But there’s more
article { flex: 3 2 400px;}
/* flex-grow shares out positive spaceflex-shrink shares out overflow reductionflex-basis initially applied = CAN GET BLOODY COMPLICATED */
Friday, 8 March 13
A case study
Friday, 8 March 13
Placing the nav
section { display: flex; flex-flow: row wrap;}
nav { flex: 1 100%;}
Friday, 8 March 13
Flexible awesome nav!
Friday, 8 March 13
Making awesome
nav { display: flex; justify-content: center; }
nav ul { display: flex; flex-flow: row wrap; justify-content: center; width: 80%;}
Friday, 8 March 13
Making awesome
nav ul li { flex: auto; min-width: 5rem;}
Friday, 8 March 13
http://dev.opera.com/articles/view/flexbox-basics/
More on Flexbox
Friday, 8 March 13
Multi-column
Friday, 8 March 13
Multi-col layouts
✴ Break content into multi-col✴ Cut down on markup cruft✴ Specify column breaks, column
rules and heading span✴ Most modern browsers have this
Friday, 8 March 13
Great at some things
<article>...</article>
article { column-count: 2; column-gap: 1rem; column-rule: 2px solid rgba(0,0,255,0.25);}
Friday, 8 March 13
Gives you
Friday, 8 March 13
Controlling columnbreaks
article h2 { break-before: column; break-after: avoid-column;}
Friday, 8 March 13
Gives you
Friday, 8 March 13
Column-spanning headings
article h2 { break-after: avoid-column; column-span: all;}
Friday, 8 March 13
Gives you
Friday, 8 March 13
Can also specifycolumn width
article { column-width: 20rem; column-gap: 2rem;}
Friday, 8 March 13
Gives you Friday, 8 March 13
http://dev.opera.com/articles/view/css3-multi-column-layout/
More on Multi-col
Friday, 8 March 13
Regions
Friday, 8 March 13
CSS regions
✴ Turn containers into vessels to flow content into
✴ Flexible complex layouts✴ IE10 and Chrome Canary only at the
moment
Friday, 8 March 13
Put your content in a separate block
<article class="content"> <h2>Introduction</h2> <p>Hello, dear readers...</article>
Friday, 8 March 13
Then create your layout blocks
<div class="layout"> <div class="text-container"></div> <div class="text-container"></div> <div class="image-container"> ... </div> <div class="text-container"></div></div><div class="text-overflow"></div>
Friday, 8 March 13
Specify where toflow it into
.content { -webkit-flow-into: article;}
.text-container, .text-overflow { -webkit-flow-from: article;}
Friday, 8 March 13
A little something I cooked up
Friday, 8 March 13
Exclusions and shapes
Friday, 8 March 13
CSS exclusions
✴ Create really complex floats✴ Flow content around (and inside)
complex shapes✴ Chrome Canary/IE only at the
moment
Friday, 8 March 13
Friday, 8 March 13
Position your exclusion
<article class="content"> <header> ... </header> ...</article>
header { position: absolute; etc. }
Friday, 8 March 13
Then exclude it!
header { position: absolute; etc. wrap-flow: both; /* Can also take values of start, end, minimum, maximum, clear */}
Friday, 8 March 13
Different effects
Text
both start end
minimum maximum clear
Friday, 8 March 13
Shape your exclusion
shape-inside: rectangle(0, 0, 100%, 100%, 25%, 25%);
shape-inside: polygon( ... )
shape-outside: polygon( ... )
Friday, 8 March 13
shape inside/outside
Friday, 8 March 13
A note onCSS units
Friday, 8 March 13
✴ rem units used throughout my examples
✴ size relative to the root (html) font-size, not the parent font size.
✴ Much easier maths
rems
Friday, 8 March 13
✴ Percentage of viewport size✴ 1vw = 1% of viewport width✴ 1vh = 1% of viewport height✴ 1vmin = 1vw or 1vh, whatever is
smallest
vh, vw, and vmin
Friday, 8 March 13
✴ Supported in IE10, FF, Chrome, iOS, Blackberry?
✴ text-size relative to viewport = accessibility problem?
vh, vw, and vmin
Friday, 8 March 13
New responsive capabilities
Friday, 8 March 13
Fallbacks and alternatives
Friday, 8 March 13
So do we just wait until support is everywhere and IE6-9 is destroyed?
Friday, 8 March 13
✴ Intelligent alternatives via feature detection
✴ @supports: native feature detection
✴ Modernizr is still an excellent solution
Hell no!
Friday, 8 March 13
Modernizr
<html lang="en-US" class="no-js"><head> <script src="modernizr.js"></script></head>
Friday, 8 March 13
Modernizr
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio ... ">
Friday, 8 March 13
Modernizr CSS
.feature-no-regions .layout, .feature-no-regions .text-overflow { display: none;}
.feature-no-regions .content { float: left; width: 48%; padding: 1%;}
Friday, 8 March 13
Fallback basic layout
Friday, 8 March 13
Modernizr JS
function rotateForm() { if(Modernizr.cssanimations && Modernizr.csstransforms3d) { form.setAttribute("class","form-rotate"); form.style.left = "0rem"; } else { back.style.zIndex = "5"; } }
Friday, 8 March 13
Buy my book“Subtle” advertisement
Friday, 8 March 13
Thanks!
Friday, 8 March 13
Photo credits
✴ Star wars adidas posters by Dorothy Tang: http://www.flickr.com/photos/adifans/4265441265/
Friday, 8 March 13