Future layouts
Upcoming SlideShare
Loading in...5
×
 

Future layouts

on

  • 3,052 views

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 ...

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.

Statistics

Views

Total Views
3,052
Views on SlideShare
2,972
Embed Views
80

Actions

Likes
10
Downloads
32
Comments
0

3 Embeds 80

https://twitter.com 51
http://eventifier.co 15
http://127.0.0.1 14

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Future layouts Future layouts Presentation Transcript

  • Future LayoutsThursday, 14 March 13
  • Find me... ✴ cmills@opera.com/cmills@w3.org ✴ @chrisdavidmills ✴ slideshare.net/chrisdavidmillsThursday, 14 March 13
  • In the early days ✴ We thought the Web was print ✴ Limited device landscape meant limited outlook ✴ Limited toolsetThursday, 14 March 13
  • Print means ✴ Designer has full control ✴ Technologies will be supported ✴ Canvases are fixedThursday, 14 March 13
  • Web means ✴ Designer has less control ✴ Technologies won’t necessarily be supported ✴ Canvases are variableThursday, 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 GIFsThursday, 14 March 13
  • Consistent CSS support ✴ Was very welcome... ✴ Still didn’t give us much in the way of layoutThursday, 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: Its 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 columnsThursday, 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 HopeThursday, 14 March 13
  • New tools on the horizon ✴ CSS WG + browser vendors ✴ Hard at workThursday, 14 March 13
  • Media queriesThursday, 14 March 13
  • Media queries ✴ Same content, different layouts ✴ Polyfills/fixed layouts for old IEThursday, 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 queriesThursday, 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
  • More on Media queries http://dev.opera.com/articles/view/ love-your -devices-adaptive-web- design-with-media-queries-viewport- and-more/Thursday, 14 March 13
  • viewport/CSS device adaptationThursday, 14 March 13
  • Mobile browsers lie ✴ About viewport width ✴ Some also lie about the resolution ✴ So media queries alone don’t cut itThursday, 14 March 13
  • Mobile misbehaviorThursday, 14 March 13
  • Viewport <meta name="viewport" content="width=device-width">Thursday, 14 March 13
  • BetterThursday, 14 March 13
  • @viewport ✴ Because viewport is more of a style thing ✴ Specify viewport inside the @viewport rule ✴ Opera Presto, IE10, WebKitThursday, 14 March 13
  • Viewport @viewport { width: device-width; }Thursday, 14 March 13
  • More on viewport and @ viewport http://dev.opera.com/articles/view/an- introduction-to-meta-viewport-and- viewport/Thursday, 14 March 13
  • FlexboxThursday, 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 youThursday, 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 axisThursday, 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 DOMThursday, 14 March 13
  • Ordinal groups nav { order: 1; }Thursday, 14 March 13
  • Gives youThursday, 14 March 13
  • Flexing our muscle ✴ The flex property ✴ Set what proportion of available space child elements occupy ✴ Unit-less proportion valuesThursday, 14 March 13
  • Flex property nav { flex: 1; } article { flex: 3; }Thursday, 14 March 13
  • Gives youThursday, 14 March 13
  • But there’s more article { flex: 3 2 400px; } /* flex-grow shares out positive space flex-shrink shares out overflow reduction flex-basis initially applied = CAN GET BLOODY COMPLICATED */Thursday, 14 March 13
  • A case studyThursday, 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
  • More on Flexbox http://dev.opera.com/articles/view/ flexbox-basics/Thursday, 14 March 13
  • Multi-columnThursday, 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 thisThursday, 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 youThursday, 14 March 13
  • Controlling column breaks article h2 { break-before: column; break-after: avoid-column; }Thursday, 14 March 13
  • Gives youThursday, 14 March 13
  • Column-spanning headings article h2 { break-after: avoid-column; column-span: all; }Thursday, 14 March 13
  • Gives youThursday, 14 March 13
  • Can also specify column width article { column-width: 20rem; column-gap: 2rem; }Thursday, 14 March 13
  • Gives youThursday, 14 March 13
  • Not so great at other things ✴ No proper multi-column layouts ✴ break properties are fiddly ✴ Only works for simple layoutsThursday, 14 March 13
  • More on Multi-col http://dev.opera.com/articles/view/ css3-multi-column-layout/Thursday, 14 March 13
  • GridsThursday, 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 fluxThursday, 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 grid contents header { grid-column-position: 1; grid-row-position: 1; grid-column-span: 7; }Thursday, 14 March 13
  • Thursday, 14 March 13
  • More on grids http://24ways.org/2012/css3-grid- layout/ (out of date syntax, but gives good overview)Thursday, 14 March 13
  • RegionsThursday, 14 March 13
  • CSS regions ✴ Turn containers into vessels to flow content into ✴ Flexible complex layouts ✴ IE10 and Chrome Canary only at the momentThursday, 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 to flow it into .content { -webkit-flow-into: article; } .text-container, .text-overflow { -webkit-flow-from: article; }Thursday, 14 March 13
  • A little something I cooked upThursday, 14 March 13
  • Exclusions and shapesThursday, 14 March 13
  • CSS exclusions ✴ Create really complex floats ✴ Flow content around (and inside) complex shapes ✴ Chrome Canary/IE only at the momentThursday, 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 both start end Text minimum maximum clearThursday, 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/outsideThursday, 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 on CSS unitsThursday, 14 March 13
  • rems ✴ rem units used throughout my examples ✴ size relative to the root (html) font- size, not the parent font size. ✴ Much easier mathsThursday, 14 March 13
  • vh, vw, and vmin ✴ Percentage of viewport size ✴ 1vw = 1% of viewport width ✴ 1vh = 1% of viewport height ✴ 1vmin = 1vw or 1vh, whatever is smallestThursday, 14 March 13
  • vh, vw, and vmin ✴ Supported in IE10, FF Chrome, iOS, , Blackberry? ✴ text-size relative to viewport = accessibility problem?Thursday, 14 March 13
  • New responsive capabilitiesThursday, 14 March 13
  • Fallbacks and alternativesThursday, 14 March 13
  • In truth ✴ A lot of this stuff doesn’t degrade very gracefully ✴ Not a surprise, as layout is a pretty big dealThursday, 14 March 13
  • So do we just wait until support is everywhere and IE6-9 is destroyed?Thursday, 14 March 13
  • Hell no! ✴ Intelligent alternatives via feature detection ✴ @supports: native feature detection ✴ Modernizr is still an excellent solutionThursday, 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 layoutThursday, 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
  • “Subtle” advertisement Buy my bookThursday, 14 March 13
  • Thanks!Thursday, 14 March 13
  • Find me... ✴ cmills@opera.com/cmills@w3.org ✴ @chrisdavidmills ✴ slideshare.net/chrisdavidmillsThursday, 14 March 13
  • Photo credits ✴ Star wars adidas posters by Dorothy Tang: http:// www.flickr .com/photos/adifans/ 4265441265/Thursday, 14 March 13