What about CSS? Progressive Enhancement & CSS

Fronteers Conference 2016

1. What about CSS? Ire Aderinokun | Fronteers Conference 2016 Progressive Enhancement & CSS
2. Ireoluwa Akanke Elizabeth Oluwasore Aderinokun
3. Ire
4. Rey
5. Lagos, Nigeria
6. User Interface Designer & Front-End Developer
7. Writer, bitsofco.de
8. Google Developer Expert, Web Technologies
9. Progressive Enhancement & CSS
10. What is Progressive Enhancement?
11. Let’s go back to 2003
13. The Sound of the Internet
14. The State of the Web
16. Graceful Degradation
17. 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.
18. HTML <noscript> Your browser sucks so this feature won’t work for you. Go download Chrome. </noscript>
19. March 11 2003
21. Stephen Champeon “Inclusive Web Design for the Future” at SXSW
22. 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/
23. Enter “ Progressive Enhancement ”
24. “ Web design must mature and accept the developments of the past several years ” — Stephen Champeon
25. “ The goal of Web design is not merely to dazzle, but to deliver information to the widest audience ” — Stephen Champeon
26. Okay, but what does this actually mean in practice?
27. 5 “Guidelines” for Progressive Enhancement
28. Basic content and functionality should be accessible to all web browsers
30. Sparse, semantic markup should contain all content
31. 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>
32. Content Should be Defined in Plain Text in the Markup
33. Enhanced layout can be provided by CSS stylesheets
35. Enhanced behaviour can be provided by unobtrusive JavaScript
36. Search without JavaScript
37. Search with JavaScript
38. End-User web browser preferences should be respected
39. 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!
40. Why is Progressive Enhancement Important Today?
41. The world in 2016 is very different…
43. More Browsers 7% 4% 5% 6% 7% 8% 14% 50% http://gs.statcounter.com/#all-browser-ww-monthly-201608-201608-bar (other)
44. More Versions
45. More Technologies
46. 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/
47. The Web is Still Open
48. Progressive Enhancement & JavaScript
49. What can go Wrong? • JavaScript is not enabled in the browser • The browser does not support a particular JavaScript feature
50. How do we Deal with This?
51. Make the Website Functional without JavaScript
52. JS if ( ‘serviceWorker’ in navigator ) { // Do stuff with service worker } Detect Feature Support
53. JS if ( !(’Promise’ in self ) ) { loadScript(‘promise-polyfill.js’) } Polyfill Unsupported Features
54. Simple Enough
55. Progressive Enhancement & HTML
56. What can go Wrong? • The browser does not understand the semantic meaning of an HTML element tag
57. HTML <header> <h1>Website Header</h1> </header> <main> <p>Lorem ipsum dolor sit amet</p> </main> We Write This…
58. HTML <div> <h1>Website Header</h1> </div> <div> <p>Lorem ipsum dolor sit amet</p> </div> The Browser Sees This
59. How do we Deal with This?
60. HTML <header role=“banner”> <h1>Website Header</h1> </header> <main role=“main”> <p>Lorem ipsum dolor sit amet</p> </main>
61. Simple Enough
62. So, What about CSS?
63. The Problem with Progressive Enhancement & CSS
64. CSS is a declarative language for describing presentation of a document written in markup language
65. CSS .foo { display: flex; }
66. CSS .foo { display: flex; } The Selector
67. CSS .foo { display: flex; } The Property
68. CSS .foo { display: flex; } The Value
69. What Happens if Something Goes Wrong?
70. Example
71. Desired Result
72. Result image { transform: rotate(90deg); } CSS Faulty Selector
73. Result img { transformer: rotate(90deg); } CSS Fault Property
74. Result img { transform: rotate(90degrees); } CSS Faulty Value
75. Result in Opera Mini img { transform: rotate(90deg); } CSS
76. Nothing Happens
77. Why is this a problem? • Unlike JavaScript, we can’t prepare for unsupported features • Unlike HTML, there is no “built-in” fallback
78. Debugging CSS
79. Today’s Solutions for Progressive Enhancement & CSS
80. Start with Sensible HTML
81. 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!
82. body { display: flex; } CSS <body> <header></header> <nav></nav> <main></main> <footer></footer> </body> HTML Do This!
83. The Progressive Enhancement M&M http://alistapart.com/article/understandingprogressiveenhancement
84. Take Advantage of the Cascade
85. CSS div { /* Legacy styles before */ background-color: #c00; /* Modern styles after */ background-image: linear-gradient(#f00, #a00); }
86. CSS .foo { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } Using Vendor-Prefixed Rules
87. Go “Mobile-First”
88. When Using Media Queries, min-width > max-width
89. http://www.slideshare.net/Koombea/how-to-be-successful-with-responsive-sites-koombea-nginx-english
90. CSS /* Will work on any screen size */ .foo { width: 100%; } @media (min-width: 960px) { /* Will only work on larger screen sizes */ .foo { width: 600px; } }
91. Use Flexbox
92. Flexbox is Designed to be a Progressive Enhancement
93. 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; }
95. Separate Stylesheets?
96. As a last resort, create separate stylesheets
97. http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
98. JS if ('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) { // Bootstrap with latest features }
99. The Future of Progressive Enhancement & CSS
100. What about Feature Queries?
101. CSS Feature Queries allow authors to condition rules based on whether particular property declarations are supported by the current browser
102. CSS @supports ( /* condition */ ) { /* rules */ }
103. CSS @supports ( display: flex ) { .foo { display: flex; } } Detect if a feature is supported
104. 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
105. 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
106. CSS @supports not ( display: flex ) { .foo { display: table; } } Detect if a feature is not supported
107. Perfect, Isn’t it?
109. How can we use Feature Queries Today?
110. https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
111. CSS @supports ( object-fit: cover ) { img { object-fit: cover; } }
112. 4 Scenarios Supports Feature Queries Does Not Support Feature Queries Supports CSS Feature Does Not Support CSS Feature
113. Supports Feature Queries & Supports CSS Feature Supports Feature Queries Does Not Support Feature Queries Supports CSS Feature Does Not Support CSS Feature
114. Supports Feature Queries & Does Not Support CSS Feature Supports Feature Queries Does Not Support Feature Queries Supports CSS Feature Does Not Support CSS Feature
115. 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
116. Does Not Support Feature Queries & Supports CSS Feature Supports Feature Queries Does Not Support Feature Queries Supports CSS Feature Does Not Support CSS Feature
117. What’s the Solution?
118. Progressive Enhancement!
119. Use Feature Queries as a Progressive Enhancement, rather than a Requirement
120. CSS /* Fallback Code Above */ img { width: 100%; } /* Enhancement After */ @supports ( object-fit: cover ) { img { object-fit: cover; } }
121. The world in 2030?
123. More “Browsers”
124. More Technologies 23.0
125. More People Online
126. “ Leave no one behind ” — Stephen Champeon
127. Thank You! www.ireaderinokun.com www.bitsofco.de @IreAderinokun