What about CSS? Progressive Enhancement & CSS (Updated)

Voxxed Days Zurich 2017

Transcript

1. What about CSS? Ire Aderinokun | Voxxed Days Zurich 2017 Progressive Enhancement & CSS
2. Ireoluwa Akanke Elizabeth Oluwasore Aderinokun
3. Ire
4. Rey
5. Lagos, Nigeria
7. User Interface Designer & Frontend Developer
8. Writer, bitsofco.de
9. Google Expert, Web Technologies
10. Progressive Enhancement & CSS
11. What is Progressive Enhancement?
12. Let’s go back to 2003
14. The Sound of the Internet
15. The State of the Web
17. Graceful Degradation
18. The practice of building your web functionality so that it provides a certain level of user experience in more modern browsers, but it will also degrade gracefully to a lower level of user experience in older browsers.
19. HTML <noscript> Your browser sucks so this feature won’t work for you. Go download Chrome. </noscript>
20. March 11 2003
22. Stephen Champeon Progressive Enhancement
23. The Problems with Graceful Degradation • “Doesn’t straddle technology inflection points well” • “Many designers don’t test anything but one version back” • “Does not address different needs of different audiences” • “It’s expensive to retrofit to new alternate devices” • “Whatever is ‘good enough’ usually rules” http://hesketh.com/publications/inclusive_web_design_for_the_future/
24. Enter “ Progressive Enhancement ”
25. “ Web design must mature and accept the developments of the past several years ” — Stephen Champeon
26. “ The goal of Web design is not merely to dazzle, but to deliver information to the widest audience ” — Stephen Champeon
27. Okay, but what does this actually mean in practice?
28. 5 “Guidelines” for Progressive Enhancement
29. Basic content and functionality should be accessible to all web browsers
31. Sparse, semantic markup should contain all content
32. HTML <header class="site-header"> <h1 class="site-title">Clinics 'R Us</h1> <p class="site-tagline">Find a clinic near you</p> </header> <main class="site-main"> <form class="search-clinics-form"> <label for="location">Where are you?</label> <input type="text" id="location" name="location" placeholder="Enter your postcode, e.g. W1 234”> <button type=“submit">Search</button> <span>or <a href="location.html" class="use- location">use current location</a></span> </form> </main> <footer class="site-footer"> ... </footer>
33. Content Should be Defined in Plain Text in the Markup
34. Enhanced layout can be provided by CSS stylesheets
36. Enhanced behaviour can be provided by unobtrusive JavaScript
37. Search without JavaScript
38. Search with JavaScript
39. End-User web browser preferences should be respected
40. HTML <meta name="viewport" content="width=device- width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no”> e.g. Scalability Don’t Do This!
41. Why is Progressive Enhancement Important Today?
42. The world in 2016 is very different…
44. More Browsers 7% 4% 5% 6% 7% 8% 14% 50% http://gs.statcounter.com/#all-browser-ww-monthly-201608-201608-bar (other)
45. More Versions
46. More Technologies
47. More People Online 0 1,000,000,000 2,000,000,000 3,000,000,000 4,000,000,000 2003 2016 http://www.internetlivestats.com/internet-users/
48. The Web is Still Open
49. Hours Worked for 500MB of Data Number of hours worked 0 10 20 30 40 Brazil Nigeria USA Germany 1 5.7 28.2 34.4 2014 report by McKinsey & Company
50. The way you choose to build your site, matters
51. “ World Wide Web, not Wealthy Western Web ” — Bruce Lawson
52. Progressive Enhancement & JavaScript
53. What can go Wrong? • JavaScript is not enabled in the browser • The browser does not support a particular JavaScript feature
54. How do we Deal with This?
55. Make the Website Functional without JavaScript
56. JS if ( ‘serviceWorker’ in navigator ) { // Do stuff with service worker } Detect Feature Support
57. JS if ( !(’Promise’ in self ) ) { loadScript(‘promise-polyfill.js’) } Polyfill Unsupported Features
58. Simple Enough
59. Progressive Enhancement & HTML
60. What can go Wrong? • The browser does not understand the semantic meaning of an HTML element tag
61. HTML <header> <h1>Website Header</h1> </header> <main> <p>Lorem ipsum dolor sit amet</p> </main> We Write This…
62. HTML <div> <h1>Website Header</h1> </div> <div> <p>Lorem ipsum dolor sit amet</p> </div> …The Browser Sees This
63. How do we Deal with This?
64. HTML <header role=“banner”> <h1>Website Header</h1> </header> <main role=“main”> <p>Lorem ipsum dolor sit amet</p> </main>
65. Simple Enough
66. So, What about CSS?
67. The Problem with Progressive Enhancement & CSS
68. CSS is a declarative language for describing presentation of a document written in markup language
69. CSS .foo { display: flex; }
70. CSS .foo { display: flex; } The Selector
71. CSS .foo { display: flex; } The Property
72. CSS .foo { display: flex; } The Value
73. What Happens if Something Goes Wrong?
74. Example
75. Desired Result
76. Result image { transform: rotate(90deg); } CSS Faulty Selector
77. Result img { transformer: rotate(90deg); } CSS Fault Property
78. Result img { transform: rotate(90degrees); } CSS Faulty Value
79. Result in Opera Mini img { transform: rotate(90deg); } CSS
80. Nothing Happens
81. Why is this a problem? • Unlike JavaScript, we can’t prepare for unsupported features • Unlike HTML, there is no “built-in” fallback
82. Debugging CSS
83. Today’s Solutions for Progressive Enhancement & CSS
84. Start with Sensible HTML
85. body { display: flex; } header { order: 1; } nav { order: 2; } main { order: 3; } footer { order: 4; } CSS <body> <footer></footer> <nav></nav> <header></header> <main></main> </body> HTML Don’t Do This!
86. body { display: flex; } CSS <body> <header></header> <nav></nav> <main></main> <footer></footer> </body> HTML Do This!
87. The Progressive Enhancement M&M http://alistapart.com/article/understandingprogressiveenhancement
88. Take Advantage of the Cascade
89. CSS div { /* Legacy styles before */ background-color: #c00; /* Modern styles after */ background-image: linear-gradient(#f00, #a00); }
90. CSS .foo { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } Using Vendor-Prefixed Rules
91. Go “Mobile-First”
92. When Using Media Queries, min-width > max-width
93. http://www.slideshare.net/Koombea/how-to-be-successful-with-responsive-sites-koombea-nginx-english
94. CSS /* Will work on any screen size */ .foo { width: 100%; } @media (min-width: 960px) { /* Will only work on larger screen sizes */ .foo { width: 600px; } }
95. Use Flexbox
96. Flexbox is Designed to be a Progressive Enhancement
97. CSS .center-children { text-align: center; /* Will be overridden if Flexbox is supported */ display: table-cell; vertical-align: middle; /* Flex Styles */ display: flex; justify-content: center; align-items: center; }
99. Separate Stylesheets?
100. As a last resort, create separate stylesheets
101. http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
102. JS if ('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) { // Bootstrap with latest features }
103. The Future of Progressive Enhancement & CSS
104. What about Feature Queries?
105. CSS Feature Queries allow authors to condition rules based on whether particular property declarations are supported by the current browser
106. CSS @supports ( /* condition */ ) { /* rules */ }
107. CSS @supports ( display: flex ) { .foo { display: flex; } } Detect if a feature is supported
108. CSS @supports ( (font-kerning: normal) and (font-feature-settings: "kern" 1) ) { .foo { font-kerning: normal; font-feature-settings: "kern" 1; } } Detect if all of several features are supported
109. CSS @supports ( (tranform: translate(-50%, -50%)) or (-webkit-tranform: translate(-50%, -50%)) ) { .foo { -webkit-tranform: translate(-50%, -50%); tranform: translate(-50%, -50%); } } Detect if either of several features are supported
110. CSS @supports not ( display: flex ) { .foo { display: table; } } Detect if a feature is not supported
111. Perfect, Isn’t it?
113. How can we use Feature Queries Today?
114. https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
115. CSS @supports ( object-fit: cover ) { img { object-fit: cover; } }
116. 4 Scenarios Supports Feature Queries Does Not Support Feature Queries Supports CSS Feature Does Not Support CSS Feature
117. Supports Feature Queries & Supports CSS Feature Supports Feature Queries Does Not Support Feature Queries Supports CSS Feature Does Not Support CSS Feature
118. Supports Feature Queries & Does Not Support CSS Feature Supports Feature Queries Does Not Support Feature Queries Supports CSS Feature Does Not Support CSS Feature
119. Does Not Support Feature Queries & Does Not Support CSS Feature Supports Feature Queries Does Not Support Feature Queries Supports CSS Feature Does Not Support CSS Feature
120. Does Not Support Feature Queries & Supports CSS Feature Supports Feature Queries Does Not Support Feature Queries Supports CSS Feature Does Not Support CSS Feature
121. What’s the Solution?
122. Progressive Enhancement!
123. Use Feature Queries as a Progressive Enhancement, rather than a Requirement
124. CSS /* Fallback Code Above */ img { width: 100%; } /* Enhancement After */ @supports ( object-fit: cover ) { img { object-fit: cover; } }
125. The world in 2030?
127. More “Browsers”
128. More Technologies 123.5.2
129. More People Online
130. “ Leave no one behind ” — Stephen Champeon
131. Thank You! www.ireaderinokun.com www.bitsofco.de @IreAderinokun