What about CSS? Progressive Enhancement & CSS

What about CSS? Progressive Enhancement & CSS

Fronteers Conference 2016

45ca9033757d209fabf1481740d1c936?s=128

Ire Aderinokun

October 06, 2016
Tweet

Transcript

  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

  12. None
  13. The Sound of the Internet

  14. The State of the Web

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

  20. None
  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
  29. None
  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

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

  42. None
  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; }
  94. None
  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?

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

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