Progressing Our Layouts

How do we use new CSS properties today, before they are fully implemented in browsers? Like this.

You can watch this presentation at: https://www.youtube.com/watch?v=PZPPwxumEzs (free)

Transcript

1. Progressing Our Layouts Jen Simmons @jensimmons thewebahead.net
2. Amazing future! The No-layout Layout Table-based Layouts Float-based Layouts The Official Timeline of the Evolution of Web Page Layout
4. (*Tweets in response, with names removed to protect the, well, not the innocent, but to protect people from trolling.)
5. Works Doesn’t work
6. Use It Don’t Use It
7. Works Doesn’t work Use It Don’t Use It
8. Works Doesn’t work Use It Don’t Use It
9. Works Doesn’t work Use It Don’t Use It
10. Works Doesn’t work Use It Don’t Use It Fired.
11. Works Doesn’t work Use It Don’t Use It Fired.
12. Works Doesn’t work Use It Don’t Use It Fired. ✔
13. Works Doesn’t work Use It Don’t Use It
14. Works and Doesn’t Work Use It and Don’t Use It Don’t Use It
15. Works and Doesn’t Work Use It and Don’t Use It Don’t Use It X
17. drawing by Dave Ellis novolume.co.uk
18. So, ok, how?
19. This Thing About CSS
20. .box { background: #bbb; border: 10px solid black; border-radius: 50px; }
23. .box { background: #bbb; border: 10px solid black; border-radius: 50px; }
24. .box { background: #bbb; border: 10px solid black; border-radius: 50px; } .box { background: #bbb; border: 10px solid black; border-radius: 50px; } Opera Mini IE8 IE7 IE6 Firefox Safari Chrome IE9+ Edge (on all operating systems)
25. That Magic Thing Where “Weird Stuff” Gets Ignored
26. CSS Shapes
28. img { width: 200px; margin: 0 1.5em 0.5em 0; float: left; shape-outside: circle(); } There is a prefix: -webkit-shape-outside: circle(); *
30. img { width: 200px; margin: 0 1.5em 0.5em 0; float: left; shape-outside: circle(); } There is a prefix: -webkit-shape-outside: circle(); *
31. img.grapes { max-width: 600px; float: left; margin-left: -26%; shape-outside:polygon( nonzero, -69.6% 101.25%, -84.35% 24.5%, 1.65% 4%, 23.3% 14.25%, 40.4% 13.5%, 43% 13.25%, 57.1% 16.5%, 62.7% 27%, 74.5% 32.25%, 78.15% 42.5%, 80.1% 49.25%, 77.15% 58.75%, 92.25% 68.25%, 92.9% 82.25%, 75.5% 92.5%, 51.55% 90.75%, -5.6% 101.25% ); }
32. img.grapes { max-width: 600px; float: left; margin-left: -26%; shape-outside:polygon( nonzero, -69.6% 101.25%, -84.35% 24.5%, 1.65% 4%, 23.3% 14.25%, 40.4% 13.5%, 43% 13.25%, 57.1% 16.5%, 62.7% 27%, 74.5% 32.25%, 78.15% 42.5%, 80.1% 49.25%, 77.15% 58.75%, 92.25% 68.25%, 92.9% 82.25%, 75.5% 92.5%, 51.55% 90.75%, -5.6% 101.25% ); }
34. labs.jensimmons.com @jensimmons
35. Tool #1: CSS Error Handling
36. Viewport Units + Flexbox
39. header { display: flex; height: 100vh; } h1 { margin: auto; }
40. header { display: flex; height: 100vh; } h1 { margin: auto; }
41. header { display: flex; height: 500px; height: 100vh; } h1 { margin: auto; }
42. header { display: flex; height: 500px; height: 100vh; } h1 { margin: auto; }
44. header { display: flex; height: 500px; height: 100vh; } h1 { margin: auto; }
45. header { display: flex; height: 500px; height: 100vh; } h1 { margin-top: 2em; margin: auto; }
46. header { display: flex; height: 500px; height: 100vh; } h1 { padding: 2em 0; margin: auto; }
47. header { display: flex; height: 500px; height: 100vh; } h1 { padding: 2em 0; margin: auto; }
48. header { display: flex; height: 500px; height: 100vh; } h1 { padding: 2em 0; margin: auto; } The running code uses prefixes, which I’ll talk about later. *
49. Tool #2: CSS Overrides
50. Initial Letter
52. p::first-letter { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4; initial-letter: 4; }
55. Safari 9 (iOS and Mac OSX)
56. p::first-letter { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4; initial-letter: 4; }
57. p::first-letter { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4; initial-letter: 4; }
58. @supports (initial-letter: 4 ) or (-webkit-initial-letter: 4 ) p::first-letter { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4; initial-letter: 4; } }
59. Tool #3: @supports, aka Feature Queries
61. @supports (initial-letter: 4 ) or (-webkit-initial-letter: 4 ) p {color:red;} p::first-letter { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4; initial-letter: 4; } }
62. // Layout overrides for browsers that // don't support Flexbox flex-wrap, // namely, Firefox 25 to 28. @supports (not (flex-wrap: wrap)) { .article-list { display: block; } article { flex: none; float: left; width: 48%; } }
63. Tool #3: @supports, aka Feature Queries
64. Prefixes
68. Bonus Tool: Autoprefixer
69. Tool #4: Modernizer
70. modernizer.com
72. .flexwrap { // // the flexbox layout // // } .no-flexwrap { // // the old school layout // // }
73. Tool #5: Conditional Stylesheets
74. Tool #0: Conditional Stylesheets
75. <link rel="stylesheet" type="text/css" href="css/style.css" /> <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" />< ![endif]—> <!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" />< ![endif]-->
76. <!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE 7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
77. @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // IE10+ CSS here }
78. Tool #6: Polyfill
79. Grid
87. ul { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 50vw; grid-auto-flow: dense; @media (min-width: 360px) { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 33vw; } @media (min-width: 500px) { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 25vw; } @media (min-width: 700px) { grid-template-columns: repeat(5, 1fr); grid-auto-rows: 20vw; } @media (min-width: 900px) { li { height: 100%; border: 1px solid black; } li.highlight-box { grid-row: span 2; grid-column: span 2; } li.highlight-tall { grid-row: span 2; } li.highlight-wide { grid-column: span 2; } img { display: block; object-fit: cover; height: 100%; }
88. labs.jensimmons.com
90. 1. Fact CSS ignores code it doesn’t recognize 2. The CSS Cascade 3. Feature Queries with @supports { } 4. Modernizer 5. Conditional Stylesheets for IE 6. Polyfills
91. ¿ ? What are we going to do about full-page layout?
92. Don’t use Grid 
 until 100% of your audience has it
93. Write float-based 
 (inline block / display table) layout & deliver that to some browsers, while the rest 
 get Grid layout
94. (You should NOT be jacking up the HTML order for layout anyway, so the HMTL for both will be identical.)
95. Deliver a “mobile” / skinny / simplified layout to older browsers, and a full-page Grid layout to supporting browsers
98. Use a Polyfill for Grid
102. Use a Polyfill for Grid
103. Basic layout, that doesn’t require Grid. Or Media Queries. Or Feature Queries. Hand-write your own CSS for this. Drop layout frameworks & learn vanilla CSS.
104. Basic layout, that doesn’t require Grid. Or Media Queries. Or Feature Queries. Hand-write your own CSS for this. Drop layout frameworks & learn vanilla CSS. Code that uses Grid to create the layout. Use Feature Queries to hide it from non-supporting browsers.
106. Thanks! labs.jensimmons.com @jensimmons thewebahead.net