Upload
chris-mills
View
132
Download
0
Tags:
Embed Size (px)
DESCRIPTION
This is the full version of my main presentation for 2013, providing 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.
Citation preview
FutureLayouts
Thursday, 14 March 13
Find me...
✴ [email protected]/[email protected]✴ @chrisdavidmills✴ slideshare.net/chrisdavidmills
Thursday, 14 March 13
In the early days
✴ We thought the Web was print✴ Limited device landscape meant
limited outlook✴ Limited toolset
Thursday, 14 March 13
Print means
✴ Designer has full control✴ Technologies will be supported✴ Canvases are fixed
Thursday, 14 March 13
Web means
✴ Designer has less control✴ Technologies won’t necessarily be
supported✴ Canvases are variable
Thursday, 14 March 13
Limited devices...
✴ We had desktops and laptops✴ Of around 480 x 320, 640 x 480...✴ ...or 800 x 600 if you were really
posh✴ (We’ve come a long way since
then)
Thursday, 14 March 13
...means limited outlook
✴ Designing for the page✴ Fixed, inflexible designs✴ Mobile needed a separate site?✴ WAP was a good idea?
Thursday, 14 March 13
Limited toolset
✴ We didn’t have a good toolset for layout
✴ CSS came along soon after...✴ ..but CSS support didn’t✴ So we got into HTML tables and
spacer GIFs
Thursday, 14 March 13
Consistent CSS support
✴ Was very welcome...✴ Still didn’t give us much in the way
of layout
Thursday, 14 March 13
CSS2 gave us
✴ floats: limiting, and kind of abused.✴ positioning: feh.✴ margins, padding: pfffff.✴ borders.✴ meh.
Thursday, 14 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.
Thursday, 14 March 13
What about
✴ Centering stuff? ✴ Same height columns?✴ Flexible multiple columns?✴ Complex floats?✴ Shrinkwrapping contents?✴ etc.
Thursday, 14 March 13
Centering stuff™
<figure> <div> <img src="../base-styles/grim-north.jpg" alt="A map of the North of England"> <figcaption>Figure 1.1: It's grim up North.</figcaption> </div></figure>
Thursday, 14 March 13
Centering stuff™
figure { text-align: center;}
figure div { display: inline-block; ...}
Thursday, 14 March 13
Same height columns
Thursday, 14 March 13
Same height columns
✴ We can fix this with faux columns✴ Or JavaScript✴ But really? Should we need to?
Thursday, 14 March 13
Fortunately we have
A New Hope
Thursday, 14 March 13
New tools on the horizon
✴ CSS WG + browser vendors✴ Hard at work
Thursday, 14 March 13
Media queries
Thursday, 14 March 13
Media queries
✴ Same content, different layouts✴ Polyfills/fixed layouts for old IE
Thursday, 14 March 13
Media queries
media="screen and (max-width: 480px)"
@media screen and (max-width: 480px) { /* do amazing stuff for narrow screens */}
Thursday, 14 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 */}
Thursday, 14 March 13
Media queries
Thursday, 14 March 13
matchMedia
✴ matchMedia = media queries inside script
✴ For IE<10 and Opera Presto, polyfill github.com/paulirish/matchMedia.js/
Thursday, 14 March 13
matchMedia example
if (window.matchMedia("(min-width: 480px)").matches) { /* Do stuff for wider screens */} else { /* Do stuff for narrow screens */}
Thursday, 14 March 13
http://dev.opera.com/articles/view/love-your-devices-adaptive-web-design-with-media-queries-viewport-and-more/
More on Media queries
Thursday, 14 March 13
viewport/CSS device
adaptation
Thursday, 14 March 13
Mobile browsers lie
✴ About viewport width✴ Some also lie about the resolution✴ So media queries alone don’t cut it
Thursday, 14 March 13
Mobile misbehavior
Thursday, 14 March 13
Viewport
<meta name="viewport" content="width=device-width">
Thursday, 14 March 13
Better
Thursday, 14 March 13
@viewport
✴ Because viewport is more of a style thing
✴ Specify viewport inside the @viewport rule
✴ Opera Presto, IE10, WebKit
Thursday, 14 March 13
Viewport
@viewport { width: device-width;}
Thursday, 14 March 13
http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
More on viewportand @ viewport
Thursday, 14 March 13
Flexbox
Thursday, 14 March 13
Flexbox rocks
✴ Allows easy flexible layouts✴ Content reordering✴ Same height columns✴ Cure for cancer?✴ Chrome, Opera Presto, FF, IE (old
syntax)
Thursday, 14 March 13
An example
<section> <nav> ... </nav> <article> ... </article> <article> ... </article></section>
Thursday, 14 March 13
An example
section { display: flex;}
Thursday, 14 March 13
Gives you
Thursday, 14 March 13
Rows and columns
section { display: flex; flex-direction: row; flex-wrap: nowrap;}
/* flex-flow is shorthand for flex-direction/ wrap */
Thursday, 14 March 13
Main and cross axis
Thursday, 14 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 */
Thursday, 14 March 13
Thursday, 14 March 13
align items on cross axis
section { align-items: stretch;}
/* can take other values such as flex-start, flex-end, and center; */
Thursday, 14 March 13
Thursday, 14 March 13
Ordering elements
✴ Reorder child elements easily and quickly
✴ Without screwing with the DOM
Thursday, 14 March 13
Ordinal groups
nav { order: 1;}
Thursday, 14 March 13
Gives you
Thursday, 14 March 13
Flexing our muscle
✴ The flex property✴ Set what proportion of available
space child elements occupy✴ Unit-less proportion values
Thursday, 14 March 13
Flex property
nav { flex: 1;}
article { flex: 3;}
Thursday, 14 March 13
Gives you
Thursday, 14 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 */
Thursday, 14 March 13
A case study
Thursday, 14 March 13
Placing the nav
section { display: flex; flex-flow: row wrap;}
nav { flex: 1 100%;}
Thursday, 14 March 13
Flexible awesome nav!
Thursday, 14 March 13
Making awesome
nav { display: flex; justify-content: center; }
nav ul { display: flex; flex-flow: row wrap; justify-content: center; width: 80%;}
Thursday, 14 March 13
Making awesome
nav ul li { flex: auto; min-width: 5rem;}
Thursday, 14 March 13
http://dev.opera.com/articles/view/flexbox-basics/
More on Flexbox
Thursday, 14 March 13
Multi-column
Thursday, 14 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
Thursday, 14 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);}
Thursday, 14 March 13
Gives you
Thursday, 14 March 13
Controlling columnbreaks
article h2 { break-before: column; break-after: avoid-column;}
Thursday, 14 March 13
Gives you
Thursday, 14 March 13
Column-spanning headings
article h2 { break-after: avoid-column; column-span: all;}
Thursday, 14 March 13
Gives you
Thursday, 14 March 13
Can also specifycolumn width
article { column-width: 20rem; column-gap: 2rem;}
Thursday, 14 March 13
Gives you Thursday, 14 March 13
Not so great at other things
✴ No proper multi-column layouts✴ break properties are fiddly✴ Only works for simple layouts
Thursday, 14 March 13
http://dev.opera.com/articles/view/css3-multi-column-layout/
More on Multi-col
Thursday, 14 March 13
Grids
Thursday, 14 March 13
CSS grid layout
✴ A proper grid system for the web✴ Completely remove content from
any layout concern✴ IE10 only at the moment✴ Spec in flux
Thursday, 14 March 13
Define your grid
body { display: grid; grid-columns: 4% 20% 20% 12% 20% 20% 4%; grid-rows: 300px 450px 450px 450px 300px;}
Thursday, 14 March 13
Define your gridcontents
header { grid-column-position: 1; grid-row-position: 1; grid-column-span: 7;}
Thursday, 14 March 13
Thursday, 14 March 13
http://24ways.org/2012/css3-grid-layout/ (out of date syntax, but gives good overview)
More on grids
Thursday, 14 March 13
Regions
Thursday, 14 March 13
CSS regions
✴ Turn containers into vessels to flow content into
✴ Flexible complex layouts✴ IE10 and Chrome Canary only at the
moment
Thursday, 14 March 13
Put your content in a separate block
<article class="content"> <h2>Introduction</h2> <p>Hello, dear readers...</article>
Thursday, 14 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>
Thursday, 14 March 13
Specify where toflow it into
.content { -webkit-flow-into: article;}
.text-container, .text-overflow { -webkit-flow-from: article;}
Thursday, 14 March 13
A little something I cooked up
Thursday, 14 March 13
Exclusions and shapes
Thursday, 14 March 13
CSS exclusions
✴ Create really complex floats✴ Flow content around (and inside)
complex shapes✴ Chrome Canary/IE only at the
moment
Thursday, 14 March 13
Thursday, 14 March 13
Position your exclusion
<article class="content"> <header> ... </header> ...</article>
header { position: absolute; etc. }
Thursday, 14 March 13
Then exclude it!
header { position: absolute; etc. wrap-flow: both; /* Can also take values of start, end, minimum, maximum, clear */}
Thursday, 14 March 13
Different effects
Text
both start end
minimum maximum clear
Thursday, 14 March 13
Shape your exclusion
shape-inside: rectangle(0, 0, 100%, 100%, 25%, 25%);
shape-inside: polygon( ... )
shape-outside: polygon( ... )
Thursday, 14 March 13
shape inside/outside
Thursday, 14 March 13
My examples...
✴ ...didn’t work✴ Apparently wrap-flow is in IE10✴ and shape-inside/outside in
Chrome Canary...
Thursday, 14 March 13
A note onCSS units
Thursday, 14 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
Thursday, 14 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
Thursday, 14 March 13
✴ Supported in IE10, FF, Chrome, iOS, Blackberry?
✴ text-size relative to viewport = accessibility problem?
vh, vw, and vmin
Thursday, 14 March 13
New responsive capabilities
Thursday, 14 March 13
Fallbacks and alternatives
Thursday, 14 March 13
✴ A lot of this stuff doesn’t degrade very gracefully
✴ Not a surprise, as layout is a pretty big deal
In truth
Thursday, 14 March 13
So do we just wait until support is everywhere and IE6-9 is destroyed?
Thursday, 14 March 13
✴ Intelligent alternatives via feature detection
✴ @supports: native feature detection
✴ Modernizr is still an excellent solution
Hell no!
Thursday, 14 March 13
@supports
/* Provide basic layout, e.g. with floats */
@supports (display:flex) { /* Provide Flexbox layout for supporting browsers */}
Thursday, 14 March 13
Modernizr
<html lang="en-US" class="no-js"><head> <script src="modernizr.js"></script></head>
Thursday, 14 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 ... ">
Thursday, 14 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%;}
Thursday, 14 March 13
Fallback basic layout
Thursday, 14 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"; } }
Thursday, 14 March 13
Buy my book“Subtle” advertisement
Thursday, 14 March 13
Thanks!
Thursday, 14 March 13
Find me...
✴ [email protected]/[email protected]✴ @chrisdavidmills✴ slideshare.net/chrisdavidmills
Thursday, 14 March 13
Photo credits
✴ Star wars adidas posters by Dorothy Tang: http://www.flickr.com/photos/adifans/4265441265/
Thursday, 14 March 13