Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What about CSS? Progressive Enhancement & CSS

What about CSS? Progressive Enhancement & CSS

Fronteers Conference 2016

Ire Aderinokun

October 06, 2016
Tweet

More Decks by Ire Aderinokun

Other Decks in Programming

Transcript

  1. Ire

  2. Rey

  3. 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.
  4. HTML <noscript> Your browser sucks so this feature won’t work

    for you. Go download Chrome. </noscript>
  5. 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/
  6. “ Web design must mature and accept the developments of

    the past several years ” — Stephen Champeon
  7. “ The goal of Web design is not merely to

    dazzle, but to deliver information to the widest audience ” — Stephen Champeon
  8. 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>
  9. More Browsers 7% 4% 5% 6% 7% 8% 14% 50%

    http://gs.statcounter.com/#all-browser-ww-monthly-201608-201608-bar (other)
  10. What can go Wrong? • JavaScript is not enabled in

    the browser • The browser does not support a particular JavaScript feature
  11. JS if ( ‘serviceWorker’ in navigator ) { // Do

    stuff with service worker } Detect Feature Support
  12. What can go Wrong? • The browser does not understand

    the semantic meaning of an HTML element tag
  13. Why is this a problem? • Unlike JavaScript, we can’t

    prepare for unsupported features • Unlike HTML, there is no “built-in” fallback
  14. 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!
  15. CSS div { /* Legacy styles before */ background-color: #c00;

    /* Modern styles after */ background-image: linear-gradient(#f00, #a00); }
  16. CSS /* Will work on any screen size */ .foo

    { width: 100%; } @media (min-width: 960px) { /* Will only work on larger screen sizes */ .foo { width: 600px; } }
  17. 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; }
  18. JS if ('querySelector' in document && 'localStorage' in window &&

    'addEventListener' in window) { // Bootstrap with latest features }
  19. CSS Feature Queries allow authors to condition rules based on

    whether particular property declarations are supported by the current browser
  20. CSS @supports ( display: flex ) { .foo { display:

    flex; } } Detect if a feature is supported
  21. 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
  22. 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
  23. CSS @supports not ( display: flex ) { .foo {

    display: table; } } Detect if a feature is not supported
  24. 4 Scenarios Supports Feature Queries Does Not Support Feature Queries

    Supports CSS Feature Does Not Support CSS Feature
  25. Supports Feature Queries & Supports CSS Feature Supports Feature Queries

    Does Not Support Feature Queries Supports CSS Feature Does Not Support CSS Feature
  26. Supports Feature Queries & Does Not Support CSS Feature Supports

    Feature Queries Does Not Support Feature Queries Supports CSS Feature Does Not Support CSS Feature
  27. 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
  28. Does Not Support Feature Queries & Supports CSS Feature Supports

    Feature Queries Does Not Support Feature Queries Supports CSS Feature Does Not Support CSS Feature
  29. CSS /* Fallback Code Above */ img { width: 100%;

    } /* Enhancement After */ @supports ( object-fit: cover ) { img { object-fit: cover; } }