What about CSS? Progressive Enhancement & CSS (Updated)

What about CSS? Progressive Enhancement & CSS (Updated)

Voxxed Days Zurich 2017

45ca9033757d209fabf1481740d1c936?s=128

Ire Aderinokun

February 23, 2017
Tweet

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

  6. None
  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

  13. None
  14. The Sound of the Internet

  15. The State of the Web

  16. None
  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

  21. None
  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
  30. None
  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

  35. None
  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…

  43. None
  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; }
  98. None
  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?

  112. None
  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?

  126. None
  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