FutureLayoutsThursday, 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 meantlimited outlook✴ Limited toolsetThursday, 1...
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 besupported✴ 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 reallyposh...
...means limited outlook✴ Designing for the page✴ Fixed, inflexible designs✴ Mobile needed a separate site?✴ WAP was a goo...
Limited toolset✴ We didn’t have a good toolset forlayout✴ CSS came along soon after...✴ ..but CSS support didn’t✴ So we go...
Consistent CSS support✴ Was very welcome...✴ Still didn’t give us much in the wayof layoutThursday, 14 March 13
CSS2 gave us✴ floats: limiting, and kind of abused.✴ positioning: feh.✴ margins, padding: pfffff.✴ borders.✴ meh.Thursday,...
We still have problemsAt this point, there was still a raft ofdesign problems that were absurdlydifficult to solve on the ...
What about✴ Centering stuff?✴ Same height columns?✴ Flexible multiple columns?✴ Complex floats?✴ Shrinkwrapping contents?✴...
Centering stuff™<figure><div><img src="../base-styles/grim-north.jpg" alt="A map of the North ofEngland"><figcaption>Figur...
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 haveA 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 queriesmedia="screen and (max-width: 480px)"@media screen and (max-width: 480px) {/* do amazing stuff fornarrow scre...
Media queries/* Mobile first - make your mobile layoutthe default... */@media screen and (min-width: 481px) {/* ...then do...
Media queriesThursday, 14 March 13
matchMedia✴ matchMedia = media queries insidescript✴ For IE<10 and Opera Presto, polyfillgithub.com/paulirish/matchMedia.j...
matchMedia exampleif (window.matchMedia("(min-width:480px)").matches) {/* Do stuff for wider screens */} else {/* Do stuff...
http://dev.opera.com/articles/view/love-your-devices-adaptive-web-design-with-media-queries-viewport-and-more/More on Medi...
viewport/CSSdeviceadaptationThursday, 14 March 13
Mobile browsers lie✴ About viewport width✴ Some also lie about the resolution✴ So media queries alone don’t cut itThursday...
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 astyle thing✴ Specify viewport inside the@viewport rule✴ Opera Presto, IE10, WebKit...
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 @ viewportThursday, 1...
FlexboxThursday, 14 March 13
Flexbox rocks✴ Allows easy flexible layouts✴ Content reordering✴ Same height columns✴ Cure for cancer?✴ Chrome, Opera Pres...
An example<section><nav> ... </nav><article> ... </article><article> ... </article></section>Thursday, 14 March 13
An examplesection {display: flex;}Thursday, 14 March 13
Gives youThursday, 14 March 13
Rows and columnssection {display: flex;flex-direction: row;flex-wrap: nowrap;}/* flex-flow is shorthand for flex-direction...
Main and cross axisThursday, 14 March 13
align items on main axissection {justify-content: center;}/* can take other values such as flex-start,flex-end, space-betw...
Thursday, 14 March 13
align items on cross axissection {align-items: stretch;}/* can take other values such as flex-start,flex-end, and center; ...
Thursday, 14 March 13
Ordering elements✴ Reorder child elements easily andquickly✴ Without screwing with the DOMThursday, 14 March 13
Ordinal groupsnav {order: 1;}Thursday, 14 March 13
Gives youThursday, 14 March 13
Flexing our muscle✴ The flex property✴ Set what proportion of availablespace child elements occupy✴ Unit-less proportion v...
Flex propertynav {flex: 1;}article {flex: 3;}Thursday, 14 March 13
Gives youThursday, 14 March 13
But there’s morearticle {flex: 3 2 400px;}/* flex-grow shares out positive spaceflex-shrink shares out overflow reductionf...
A case studyThursday, 14 March 13
Placing the navsection {display: flex;flex-flow: row wrap;}nav {flex: 1 100%;}Thursday, 14 March 13
Flexible awesome nav!Thursday, 14 March 13
Making awesomenav {display: flex;justify-content: center;}nav ul {display: flex;flex-flow: row wrap;justify-content: cente...
Making awesomenav ul li {flex: auto;min-width: 5rem;}Thursday, 14 March 13
http://dev.opera.com/articles/view/flexbox-basics/More on FlexboxThursday, 14 March 13
Multi-columnThursday, 14 March 13
Multi-col layouts✴ Break content into multi-col✴ Cut down on markup cruft✴ Specify column breaks, columnrules and heading ...
Great at some things<article>...</article>article {column-count: 2;column-gap: 1rem;column-rule: 2px solid rgba(0,0,255,0....
Gives youThursday, 14 March 13
Controlling columnbreaksarticle h2 {break-before: column;break-after: avoid-column;}Thursday, 14 March 13
Gives youThursday, 14 March 13
Column-spanningheadingsarticle h2 {break-after: avoid-column;column-span: all;}Thursday, 14 March 13
Gives youThursday, 14 March 13
Can also specifycolumn widtharticle {column-width: 20rem;column-gap: 2rem;}Thursday, 14 March 13
Gives youThursday, 14 March 13
Not so great at otherthings✴ No proper multi-column layouts✴ break properties are fiddly✴ Only works for simple layoutsThu...
http://dev.opera.com/articles/view/css3-multi-column-layout/More on Multi-colThursday, 14 March 13
GridsThursday, 14 March 13
CSS grid layout✴ A proper grid system for the web✴ Completely remove content fromany layout concern✴ IE10 only at the mome...
Define your gridbody {display: grid;grid-columns: 4% 20% 20% 12% 20% 20% 4%;grid-rows: 300px 450px 450px 450px 300px;}Thur...
Define your gridcontentsheader {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 givesgood overview)More on gridsThursday, 14 March 13
RegionsThursday, 14 March 13
CSS regions✴ Turn containers into vessels toflow content into✴ Flexible complex layouts✴ IE10 and Chrome Canary only at th...
Put your content in aseparate block<article class="content"><h2>Introduction</h2><p>Hello, dear readers...</article>Thursd...
Then create your layoutblocks<div class="layout"><div class="text-container"></div><div class="text-container"></div><div ...
Specify where toflow it into.content {-webkit-flow-into: article;}.text-container, .text-overflow {-webkit-flow-from: arti...
A little something Icooked upThursday, 14 March 13
Exclusions andshapesThursday, 14 March 13
CSS exclusions✴ Create really complex floats✴ Flow content around (and inside)complex shapes✴ Chrome Canary/IE only at the...
Thursday, 14 March 13
Position your exclusion<article class="content"><header>...</header>...</article>header {position: absolute;etc.}Thursday,...
Then exclude it!header {position: absolute;etc.wrap-flow: both;/* Can also take values of start, end,minimum, maximum, cle...
Different effectsTextboth start endminimum maximum clearThursday, 14 March 13
Shape your exclusionshape-inside: rectangle(0, 0, 100%, 100%,25%, 25%);shape-inside: polygon( ... )shape-outside: polygon(...
shape inside/outsideThursday, 14 March 13
My examples...✴ ...didn’t work✴ Apparently wrap-flow is in IE10✴ and shape-inside/outside inChrome Canary...Thursday, 14 M...
A note onCSS unitsThursday, 14 March 13
✴ rem units used throughout myexamples✴ size relative to the root (html) font-size, not the parent font size.✴ Much easier...
✴ Percentage of viewport size✴ 1vw = 1% of viewport width✴ 1vh = 1% of viewport height✴ 1vmin = 1vw or 1vh, whatever issma...
✴ Supported in IE10, FF, Chrome, iOS,Blackberry?✴ text-size relative to viewport =accessibility problem?vh, vw, and vminTh...
New responsivecapabilitiesThursday, 14 March 13
Fallbacks andalternativesThursday, 14 March 13
✴ A lot of this stuff doesn’t degradevery gracefully✴ Not a surprise, as layout is apretty big dealIn truthThursday, 14 Ma...
So do we just wait until support iseverywhere and IE6-9 is destroyed?Thursday, 14 March 13
✴ Intelligent alternatives via featuredetection✴ @supports: native featuredetection✴ Modernizr is still an excellentsoluti...
@supports/* Provide basic layout, e.g. with floats */@supports (display:flex) {/* Provide Flexbox layout for supportingbro...
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 canvastextwebgl no-touch geolocation postmessage no-websqldatabase indexeddb hash...
Modernizr CSS.feature-no-regions .layout, .feature-no-regions .text-overflow {display: none;}.feature-no-regions .content ...
Fallback basic layoutThursday, 14 March 13
Modernizr JSfunction rotateForm() {if(Modernizr.cssanimations &&Modernizr.csstransforms3d) {form.setAttribute("class","for...
Buy my book“Subtle” advertisementThursday, 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 byDorothy Tang: http://www.flickr.com/photos/adifans/4265441265/Thursday, 14 March...
Upcoming SlideShare
Loading in...5
×

Future Web Layouts with Chris Mills

1,664

Published on

We’ve been publishing documents, pages, apps, books and cat pictures on the Web for around 20 years now, so it is very surprising that we’ve never really had much in the way of easily manipulable, proper tools for creating web layouts. For years we relied on spacer gifs and horrible abuses of table markup, because nothing else had anything approaching cross browser support. Yes, we’ve had CSS for a long time, but positioning doesn’t have all the answers, and using floats for multiple columns is a hack. In 2012/2013, we are just starting to see proper layout tools for the web emerge and get support in browsers.

In this talk Chris Mills will take you through what’s available in the CSS3/4 layout specs, what can be used now in production projects, and what’s coming up on the horizon, including media queries, flexible box, multi-column layout, grids, regions, and more. Your cat pictures will never have looked better.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,664
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Future Web Layouts with Chris Mills

  1. 1. FutureLayoutsThursday, 14 March 13
  2. 2. Find me...✴ cmills@opera.com/cmills@w3.org✴ @chrisdavidmills✴ slideshare.net/chrisdavidmillsThursday, 14 March 13
  3. 3. In the early days✴ We thought the Web was print✴ Limited device landscape meantlimited outlook✴ Limited toolsetThursday, 14 March 13
  4. 4. Print means✴ Designer has full control✴ Technologies will be supported✴ Canvases are fixedThursday, 14 March 13
  5. 5. Web means✴ Designer has less control✴ Technologies won’t necessarily besupported✴ Canvases are variableThursday, 14 March 13
  6. 6. Limited devices...✴ We had desktops and laptops✴ Of around 480 x 320, 640 x 480...✴ ...or 800 x 600 if you were reallyposh✴ (We’ve come a long way sincethen)Thursday, 14 March 13
  7. 7. ...means limited outlook✴ Designing for the page✴ Fixed, inflexible designs✴ Mobile needed a separate site?✴ WAP was a good idea?Thursday, 14 March 13
  8. 8. Limited toolset✴ We didn’t have a good toolset forlayout✴ CSS came along soon after...✴ ..but CSS support didn’t✴ So we got into HTML tables andspacer GIFsThursday, 14 March 13
  9. 9. Consistent CSS support✴ Was very welcome...✴ Still didn’t give us much in the wayof layoutThursday, 14 March 13
  10. 10. CSS2 gave us✴ floats: limiting, and kind of abused.✴ positioning: feh.✴ margins, padding: pfffff.✴ borders.✴ meh.Thursday, 14 March 13
  11. 11. We still have problemsAt this point, there was still a raft ofdesign problems that were absurdlydifficult to solve on the web.Thursday, 14 March 13
  12. 12. What about✴ Centering stuff?✴ Same height columns?✴ Flexible multiple columns?✴ Complex floats?✴ Shrinkwrapping contents?✴ etc.Thursday, 14 March 13
  13. 13. Centering stuff™<figure><div><img src="../base-styles/grim-north.jpg" alt="A map of the North ofEngland"><figcaption>Figure 1.1: Its grim upNorth.</figcaption></div></figure>Thursday, 14 March 13
  14. 14. Centering stuff™figure {text-align: center;}figure div {display: inline-block;...}Thursday, 14 March 13
  15. 15. Same height columnsThursday, 14 March 13
  16. 16. Same height columns✴ We can fix this with faux columns✴ Or JavaScript✴ But really? Should we need to?Thursday, 14 March 13
  17. 17. Fortunately we haveA New HopeThursday, 14 March 13
  18. 18. New tools on the horizon✴ CSS WG + browser vendors✴ Hard at workThursday, 14 March 13
  19. 19. Media queriesThursday, 14 March 13
  20. 20. Media queries✴ Same content, different layouts✴ Polyfills/fixed layouts for old IEThursday, 14 March 13
  21. 21. Media queriesmedia="screen and (max-width: 480px)"@media screen and (max-width: 480px) {/* do amazing stuff fornarrow screens */}Thursday, 14 March 13
  22. 22. Media queries/* Mobile first - make your mobile layoutthe default... */@media screen and (min-width: 481px) {/* ...then do amazing stuff forwider screens */}Thursday, 14 March 13
  23. 23. Media queriesThursday, 14 March 13
  24. 24. matchMedia✴ matchMedia = media queries insidescript✴ For IE<10 and Opera Presto, polyfillgithub.com/paulirish/matchMedia.js/Thursday, 14 March 13
  25. 25. matchMedia exampleif (window.matchMedia("(min-width:480px)").matches) {/* Do stuff for wider screens */} else {/* Do stuff for narrow screens */}Thursday, 14 March 13
  26. 26. http://dev.opera.com/articles/view/love-your-devices-adaptive-web-design-with-media-queries-viewport-and-more/More on Media queriesThursday, 14 March 13
  27. 27. viewport/CSSdeviceadaptationThursday, 14 March 13
  28. 28. Mobile browsers lie✴ About viewport width✴ Some also lie about the resolution✴ So media queries alone don’t cut itThursday, 14 March 13
  29. 29. Mobile misbehaviorThursday, 14 March 13
  30. 30. Viewport<meta name="viewport"content="width=device-width">Thursday, 14 March 13
  31. 31. BetterThursday, 14 March 13
  32. 32. @viewport✴ Because viewport is more of astyle thing✴ Specify viewport inside the@viewport rule✴ Opera Presto, IE10, WebKitThursday, 14 March 13
  33. 33. Viewport@viewport {width: device-width;}Thursday, 14 March 13
  34. 34. http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/More on viewportand @ viewportThursday, 14 March 13
  35. 35. FlexboxThursday, 14 March 13
  36. 36. Flexbox rocks✴ Allows easy flexible layouts✴ Content reordering✴ Same height columns✴ Cure for cancer?✴ Chrome, Opera Presto, FF, IE (oldsyntax)Thursday, 14 March 13
  37. 37. An example<section><nav> ... </nav><article> ... </article><article> ... </article></section>Thursday, 14 March 13
  38. 38. An examplesection {display: flex;}Thursday, 14 March 13
  39. 39. Gives youThursday, 14 March 13
  40. 40. Rows and columnssection {display: flex;flex-direction: row;flex-wrap: nowrap;}/* flex-flow is shorthand for flex-direction/wrap */Thursday, 14 March 13
  41. 41. Main and cross axisThursday, 14 March 13
  42. 42. align items on main axissection {justify-content: center;}/* can take other values such as flex-start,flex-end, space-between and space-around */Thursday, 14 March 13
  43. 43. Thursday, 14 March 13
  44. 44. align items on cross axissection {align-items: stretch;}/* can take other values such as flex-start,flex-end, and center; */Thursday, 14 March 13
  45. 45. Thursday, 14 March 13
  46. 46. Ordering elements✴ Reorder child elements easily andquickly✴ Without screwing with the DOMThursday, 14 March 13
  47. 47. Ordinal groupsnav {order: 1;}Thursday, 14 March 13
  48. 48. Gives youThursday, 14 March 13
  49. 49. Flexing our muscle✴ The flex property✴ Set what proportion of availablespace child elements occupy✴ Unit-less proportion valuesThursday, 14 March 13
  50. 50. Flex propertynav {flex: 1;}article {flex: 3;}Thursday, 14 March 13
  51. 51. Gives youThursday, 14 March 13
  52. 52. But there’s morearticle {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
  53. 53. A case studyThursday, 14 March 13
  54. 54. Placing the navsection {display: flex;flex-flow: row wrap;}nav {flex: 1 100%;}Thursday, 14 March 13
  55. 55. Flexible awesome nav!Thursday, 14 March 13
  56. 56. Making awesomenav {display: flex;justify-content: center;}nav ul {display: flex;flex-flow: row wrap;justify-content: center;width: 80%;}Thursday, 14 March 13
  57. 57. Making awesomenav ul li {flex: auto;min-width: 5rem;}Thursday, 14 March 13
  58. 58. http://dev.opera.com/articles/view/flexbox-basics/More on FlexboxThursday, 14 March 13
  59. 59. Multi-columnThursday, 14 March 13
  60. 60. Multi-col layouts✴ Break content into multi-col✴ Cut down on markup cruft✴ Specify column breaks, columnrules and heading span✴ Most modern browsers have thisThursday, 14 March 13
  61. 61. 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
  62. 62. Gives youThursday, 14 March 13
  63. 63. Controlling columnbreaksarticle h2 {break-before: column;break-after: avoid-column;}Thursday, 14 March 13
  64. 64. Gives youThursday, 14 March 13
  65. 65. Column-spanningheadingsarticle h2 {break-after: avoid-column;column-span: all;}Thursday, 14 March 13
  66. 66. Gives youThursday, 14 March 13
  67. 67. Can also specifycolumn widtharticle {column-width: 20rem;column-gap: 2rem;}Thursday, 14 March 13
  68. 68. Gives youThursday, 14 March 13
  69. 69. Not so great at otherthings✴ No proper multi-column layouts✴ break properties are fiddly✴ Only works for simple layoutsThursday, 14 March 13
  70. 70. http://dev.opera.com/articles/view/css3-multi-column-layout/More on Multi-colThursday, 14 March 13
  71. 71. GridsThursday, 14 March 13
  72. 72. CSS grid layout✴ A proper grid system for the web✴ Completely remove content fromany layout concern✴ IE10 only at the moment✴ Spec in fluxThursday, 14 March 13
  73. 73. Define your gridbody {display: grid;grid-columns: 4% 20% 20% 12% 20% 20% 4%;grid-rows: 300px 450px 450px 450px 300px;}Thursday, 14 March 13
  74. 74. Define your gridcontentsheader {grid-column-position: 1;grid-row-position: 1;grid-column-span: 7;}Thursday, 14 March 13
  75. 75. Thursday, 14 March 13
  76. 76. http://24ways.org/2012/css3-grid-layout/ (out of date syntax, but givesgood overview)More on gridsThursday, 14 March 13
  77. 77. RegionsThursday, 14 March 13
  78. 78. CSS regions✴ Turn containers into vessels toflow content into✴ Flexible complex layouts✴ IE10 and Chrome Canary only at themomentThursday, 14 March 13
  79. 79. Put your content in aseparate block<article class="content"><h2>Introduction</h2><p>Hello, dear readers...</article>Thursday, 14 March 13
  80. 80. Then create your layoutblocks<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
  81. 81. Specify where toflow it into.content {-webkit-flow-into: article;}.text-container, .text-overflow {-webkit-flow-from: article;}Thursday, 14 March 13
  82. 82. A little something Icooked upThursday, 14 March 13
  83. 83. Exclusions andshapesThursday, 14 March 13
  84. 84. CSS exclusions✴ Create really complex floats✴ Flow content around (and inside)complex shapes✴ Chrome Canary/IE only at themomentThursday, 14 March 13
  85. 85. Thursday, 14 March 13
  86. 86. Position your exclusion<article class="content"><header>...</header>...</article>header {position: absolute;etc.}Thursday, 14 March 13
  87. 87. Then exclude it!header {position: absolute;etc.wrap-flow: both;/* Can also take values of start, end,minimum, maximum, clear */}Thursday, 14 March 13
  88. 88. Different effectsTextboth start endminimum maximum clearThursday, 14 March 13
  89. 89. Shape your exclusionshape-inside: rectangle(0, 0, 100%, 100%,25%, 25%);shape-inside: polygon( ... )shape-outside: polygon( ... )Thursday, 14 March 13
  90. 90. shape inside/outsideThursday, 14 March 13
  91. 91. My examples...✴ ...didn’t work✴ Apparently wrap-flow is in IE10✴ and shape-inside/outside inChrome Canary...Thursday, 14 March 13
  92. 92. A note onCSS unitsThursday, 14 March 13
  93. 93. ✴ rem units used throughout myexamples✴ size relative to the root (html) font-size, not the parent font size.✴ Much easier mathsremsThursday, 14 March 13
  94. 94. ✴ Percentage of viewport size✴ 1vw = 1% of viewport width✴ 1vh = 1% of viewport height✴ 1vmin = 1vw or 1vh, whatever issmallestvh, vw, and vminThursday, 14 March 13
  95. 95. ✴ Supported in IE10, FF, Chrome, iOS,Blackberry?✴ text-size relative to viewport =accessibility problem?vh, vw, and vminThursday, 14 March 13
  96. 96. New responsivecapabilitiesThursday, 14 March 13
  97. 97. Fallbacks andalternativesThursday, 14 March 13
  98. 98. ✴ A lot of this stuff doesn’t degradevery gracefully✴ Not a surprise, as layout is apretty big dealIn truthThursday, 14 March 13
  99. 99. So do we just wait until support iseverywhere and IE6-9 is destroyed?Thursday, 14 March 13
  100. 100. ✴ Intelligent alternatives via featuredetection✴ @supports: native featuredetection✴ Modernizr is still an excellentsolutionHell no!Thursday, 14 March 13
  101. 101. @supports/* Provide basic layout, e.g. with floats */@supports (display:flex) {/* Provide Flexbox layout for supportingbrowsers */}Thursday, 14 March 13
  102. 102. Modernizr<html lang="en-US" class="no-js"><head><script src="modernizr.js"></script></head>Thursday, 14 March 13
  103. 103. Modernizr<html class=" js flexbox canvas canvastextwebgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange historydraganddrop websockets rgba hsla multiplebgsbackgroundsize borderimage borderradiusboxshadow textshadow opacity cssanimationscsscolumns cssgradients no-cssreflectionscsstransforms no-csstransforms3dcsstransitions fontface generatedcontentvideo audio ... ">Thursday, 14 March 13
  104. 104. 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
  105. 105. Fallback basic layoutThursday, 14 March 13
  106. 106. Modernizr JSfunction rotateForm() {if(Modernizr.cssanimations &&Modernizr.csstransforms3d) {form.setAttribute("class","form-rotate");form.style.left = "0rem";} else {back.style.zIndex = "5";}}Thursday, 14 March 13
  107. 107. Buy my book“Subtle” advertisementThursday, 14 March 13
  108. 108. Thanks!Thursday, 14 March 13
  109. 109. Find me...✴ cmills@opera.com/cmills@w3.org✴ @chrisdavidmills✴ slideshare.net/chrisdavidmillsThursday, 14 March 13
  110. 110. Photo credits✴ Star wars adidas posters byDorothy Tang: http://www.flickr.com/photos/adifans/4265441265/Thursday, 14 March 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×