Laying out the future

  • 1,910 views
Uploaded on

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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,910
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
24
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Laying out The futureFriday, 8 March 13
  • 2. Find me... ✴ cmills@opera.com/cmills@w3.org ✴ @chrisdavidmills ✴ slideshare.net/chrisdavidmillsFriday, 8 March 13
  • 3. In the early days ✴ We thought the Web was print ✴ Limited device landscape meant limited outlook ✴ Limited toolsetFriday, 8 March 13
  • 4. Consistent CSS support ✴ Was very welcome... ✴ Still didn’t give us much in the way of layoutFriday, 8 March 13
  • 5. CSS2 gave us ✴ floats: limiting, and kind of abused. ✴ positioning: feh. ✴ margins, padding: pfffff. ✴ borders. ✴ meh.Friday, 8 March 13
  • 6. 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
  • 7. What about ✴ Centering stuff? ✴ Same height columns? ✴ Flexible multiple columns? ✴ Complex floats? ✴ Shrinkwrapping contents? ✴ etc.Friday, 8 March 13
  • 8. Same height columnsFriday, 8 March 13
  • 9. Same height columns ✴ We can fix this with faux columns ✴ Or JavaScript ✴ But really? Should we need to?Friday, 8 March 13
  • 10. Fortunately we have A New HopeFriday, 8 March 13
  • 11. New tools on the horizon ✴ CSS WG + browser vendors ✴ Hard at workFriday, 8 March 13
  • 12. Media queriesFriday, 8 March 13
  • 13. Media queries ✴ Same content, different layouts ✴ Optimized UIs! ✴ Polyfills/fixed layouts for old IEFriday, 8 March 13
  • 14. 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
  • 15. Media queriesFriday, 8 March 13
  • 16. matchMedia ✴ matchMedia = media queries inside script ✴ For IE<10 and Opera Presto, polyfill github.com/paulirish/matchMedia.js/Friday, 8 March 13
  • 17. matchMedia example if (window.matchMedia("(min-width: 480px)").matches) { /* Do stuff for wider screens */ } else { /* Do stuff for narrow screens */ }Friday, 8 March 13
  • 18. More on Media queries http://dev.opera.com/articles/view/ love-your -devices-adaptive-web- design-with-media-queries-viewport- and-more/Friday, 8 March 13
  • 19. viewport/CSS device adaptationFriday, 8 March 13
  • 20. Mobile browsers lie ✴ About viewport width ✴ Some also lie about the resolution ✴ So media queries alone don’t cut itFriday, 8 March 13
  • 21. Mobile misbehaviorFriday, 8 March 13
  • 22. Viewport <meta name="viewport" content="width=device-width">Friday, 8 March 13
  • 23. BetterFriday, 8 March 13
  • 24. @viewport ✴ Because viewport is more of a style thing ✴ Specify viewport inside the @viewport rule ✴ Opera Presto, IE10, WebKitFriday, 8 March 13
  • 25. Viewport @viewport { width: device-width; }Friday, 8 March 13
  • 26. More on viewport and @ viewport http://dev.opera.com/articles/view/an- introduction-to-meta-viewport-and- viewport/Friday, 8 March 13
  • 27. FlexboxFriday, 8 March 13
  • 28. 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
  • 29. An example <section> <nav> ... </nav> <article> ... </article> <article> ... </article> </section>Friday, 8 March 13
  • 30. An example section { display: flex; }Friday, 8 March 13
  • 31. Gives youFriday, 8 March 13
  • 32. Rows and columns section { display: flex; flex-direction: row; flex-wrap: nowrap; } /* flex-flow is shorthand for flex-direction/ wrap */Friday, 8 March 13
  • 33. Main and cross axisFriday, 8 March 13
  • 34. 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
  • 35. Friday, 8 March 13
  • 36. 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
  • 37. Friday, 8 March 13
  • 38. Ordering elements ✴ Reorder child elements easily and quickly ✴ Without screwing with the DOMFriday, 8 March 13
  • 39. Ordinal groups nav { order: 1; }Friday, 8 March 13
  • 40. Gives youFriday, 8 March 13
  • 41. Flexing our muscle ✴ The flex property ✴ Set what proportion of available space child elements occupy ✴ Unit-less proportion valuesFriday, 8 March 13
  • 42. Flex property nav { flex: 1; } article { flex: 3; }Friday, 8 March 13
  • 43. Gives youFriday, 8 March 13
  • 44. 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 */Friday, 8 March 13
  • 45. A case studyFriday, 8 March 13
  • 46. Placing the nav section { display: flex; flex-flow: row wrap; } nav { flex: 1 100%; }Friday, 8 March 13
  • 47. Flexible awesome nav!Friday, 8 March 13
  • 48. 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
  • 49. Making awesome nav ul li { flex: auto; min-width: 5rem; }Friday, 8 March 13
  • 50. More on Flexbox http://dev.opera.com/articles/view/ flexbox-basics/Friday, 8 March 13
  • 51. Multi-columnFriday, 8 March 13
  • 52. 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 thisFriday, 8 March 13
  • 53. 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
  • 54. Gives youFriday, 8 March 13
  • 55. Controlling column breaks article h2 { break-before: column; break-after: avoid-column; }Friday, 8 March 13
  • 56. Gives youFriday, 8 March 13
  • 57. Column-spanning headings article h2 { break-after: avoid-column; column-span: all; }Friday, 8 March 13
  • 58. Gives youFriday, 8 March 13
  • 59. Can also specify column width article { column-width: 20rem; column-gap: 2rem; }Friday, 8 March 13
  • 60. Gives youFriday, 8 March 13
  • 61. More on Multi-col http://dev.opera.com/articles/view/ css3-multi-column-layout/Friday, 8 March 13
  • 62. RegionsFriday, 8 March 13
  • 63. CSS regions ✴ Turn containers into vessels to flow content into ✴ Flexible complex layouts ✴ IE10 and Chrome Canary only at the momentFriday, 8 March 13
  • 64. Put your content in a separate block <article class="content"> <h2>Introduction</h2> <p>Hello, dear readers... </article>Friday, 8 March 13
  • 65. 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
  • 66. Specify where to flow it into .content { -webkit-flow-into: article; } .text-container, .text-overflow { -webkit-flow-from: article; }Friday, 8 March 13
  • 67. A little something I cooked upFriday, 8 March 13
  • 68. Exclusions and shapesFriday, 8 March 13
  • 69. CSS exclusions ✴ Create really complex floats ✴ Flow content around (and inside) complex shapes ✴ Chrome Canary/IE only at the momentFriday, 8 March 13
  • 70. Friday, 8 March 13
  • 71. Position your exclusion <article class="content"> <header> ... </header> ... </article> header { position: absolute; etc. }Friday, 8 March 13
  • 72. Then exclude it! header { position: absolute; etc. wrap-flow: both; /* Can also take values of start, end, minimum, maximum, clear */ }Friday, 8 March 13
  • 73. Different effects both start end Text minimum maximum clearFriday, 8 March 13
  • 74. Shape your exclusion shape-inside: rectangle(0, 0, 100%, 100%, 25%, 25%); shape-inside: polygon( ... ) shape-outside: polygon( ... )Friday, 8 March 13
  • 75. shape inside/outsideFriday, 8 March 13
  • 76. A note on CSS unitsFriday, 8 March 13
  • 77. rems ✴ rem units used throughout my examples ✴ size relative to the root (html) font- size, not the parent font size. ✴ Much easier mathsFriday, 8 March 13
  • 78. vh, vw, and vmin ✴ Percentage of viewport size ✴ 1vw = 1% of viewport width ✴ 1vh = 1% of viewport height ✴ 1vmin = 1vw or 1vh, whatever is smallestFriday, 8 March 13
  • 79. vh, vw, and vmin ✴ Supported in IE10, FF Chrome, iOS, , Blackberry? ✴ text-size relative to viewport = accessibility problem?Friday, 8 March 13
  • 80. New responsive capabilitiesFriday, 8 March 13
  • 81. Fallbacks and alternativesFriday, 8 March 13
  • 82. So do we just wait until support is everywhere and IE6-9 is destroyed?Friday, 8 March 13
  • 83. Hell no! ✴ Intelligent alternatives via feature detection ✴ @supports: native feature detection ✴ Modernizr is still an excellent solutionFriday, 8 March 13
  • 84. Modernizr <html lang="en-US" class="no-js"> <head> <script src="modernizr.js"></script> </head>Friday, 8 March 13
  • 85. 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
  • 86. 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
  • 87. Fallback basic layoutFriday, 8 March 13
  • 88. 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
  • 89. “Subtle” advertisement Buy my bookFriday, 8 March 13
  • 90. Thanks!Friday, 8 March 13
  • 91. Photo credits ✴ Star wars adidas posters by Dorothy Tang: http:// www.flickr .com/photos/adifans/ 4265441265/Friday, 8 March 13