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

What about CSS? Progressive Enhancement & CSS (Updated)

What about CSS? Progressive Enhancement & CSS (Updated)

Voxxed Days Zurich 2017

Ire Aderinokun

February 23, 2017
Tweet

More Decks by Ire Aderinokun

Other Decks in Programming

Transcript

  1. What about CSS?
    Ire Aderinokun | Voxxed Days Zurich 2017
    Progressive Enhancement & CSS

    View Slide

  2. Ireoluwa Akanke Elizabeth
    Oluwasore Aderinokun

    View Slide

  3. Ire

    View Slide

  4. Rey

    View Slide

  5. Lagos, Nigeria

    View Slide

  6. View Slide

  7. User Interface Designer
    &
    Frontend Developer

    View Slide

  8. Writer, bitsofco.de

    View Slide

  9. Google Expert,
    Web Technologies

    View Slide

  10. Progressive Enhancement
    &
    CSS

    View Slide

  11. What is Progressive
    Enhancement?

    View Slide

  12. Let’s go back to 2003

    View Slide

  13. View Slide

  14. The Sound of the Internet

    View Slide

  15. The State of the Web

    View Slide

  16. View Slide

  17. Graceful Degradation

    View Slide

  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.

    View Slide

  19. HTML

    Your browser sucks so this feature won’t work
    for you. Go download Chrome.

    View Slide

  20. March 11 2003

    View Slide

  21. View Slide

  22. Stephen
    Champeon
    Progressive
    Enhancement

    View Slide

  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/

    View Slide

  24. Enter “ Progressive Enhancement ”

    View Slide

  25. “ Web design must mature and accept the
    developments of the past several years ”
    — Stephen Champeon

    View Slide

  26. “ The goal of Web design is not merely
    to dazzle, but to deliver information
    to the widest audience ”
    — Stephen Champeon

    View Slide

  27. Okay, but what does this
    actually mean in practice?

    View Slide

  28. 5 “Guidelines” for
    Progressive Enhancement

    View Slide

  29. Basic content and functionality should
    be accessible to all web browsers

    View Slide

  30. View Slide

  31. Sparse, semantic markup should
    contain all content

    View Slide

  32. HTML

    Clinics 'R Us
    Find a clinic near you



    Where are you?
    placeholder="Enter your postcode, e.g. W1 234”>
    Search
    or use current location



    ...

    View Slide

  33. Content Should be Defined in
    Plain Text in the Markup

    View Slide

  34. Enhanced layout can be provided
    by CSS stylesheets

    View Slide

  35. View Slide

  36. Enhanced behaviour can be
    provided by unobtrusive JavaScript

    View Slide

  37. Search without JavaScript

    View Slide

  38. Search with JavaScript

    View Slide

  39. End-User web browser
    preferences should be respected

    View Slide

  40. HTML

    View Slide

  41. Why is Progressive
    Enhancement Important Today?

    View Slide

  42. The world in 2016 is
    very different…

    View Slide

  43. View Slide

  44. More Browsers
    7%
    4%
    5%
    6%
    7%
    8%
    14%
    50%
    http://gs.statcounter.com/#all-browser-ww-monthly-201608-201608-bar
    (other)

    View Slide

  45. More Versions

    View Slide

  46. More Technologies

    View Slide

  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/

    View Slide

  48. The Web is Still Open

    View Slide

  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

    View Slide

  50. The way you choose to build
    your site, matters

    View Slide

  51. “ World Wide Web, not
    Wealthy Western Web ”
    — Bruce Lawson

    View Slide

  52. Progressive Enhancement
    & JavaScript

    View Slide

  53. What can go Wrong?
    • JavaScript is not enabled in the browser
    • The browser does not support a particular JavaScript feature

    View Slide

  54. How do we Deal with This?

    View Slide

  55. Make the Website Functional
    without JavaScript

    View Slide

  56. JS
    if ( ‘serviceWorker’ in navigator ) {
    // Do stuff with service worker
    }
    Detect Feature Support

    View Slide

  57. JS
    if ( !(’Promise’ in self ) ) {
    loadScript(‘promise-polyfill.js’)
    }
    Polyfill Unsupported Features

    View Slide

  58. Simple Enough

    View Slide

  59. Progressive Enhancement
    & HTML

    View Slide

  60. What can go Wrong?
    • The browser does not understand the semantic meaning of an HTML
    element tag

    View Slide

  61. HTML

    Website Header


    Lorem ipsum dolor sit amet

    We Write This…

    View Slide

  62. HTML

    Website Header


    Lorem ipsum dolor sit amet

    …The Browser Sees This

    View Slide

  63. How do we Deal with This?

    View Slide

  64. HTML

    Website Header


    Lorem ipsum dolor sit amet

    View Slide

  65. Simple Enough

    View Slide

  66. So, What about CSS?

    View Slide

  67. The Problem with Progressive
    Enhancement & CSS

    View Slide

  68. CSS is a declarative language for
    describing presentation of a document
    written in markup language

    View Slide

  69. CSS
    .foo {
    display: flex;
    }

    View Slide

  70. CSS
    .foo {
    display: flex;
    }
    The Selector

    View Slide

  71. CSS
    .foo {
    display: flex;
    }
    The Property

    View Slide

  72. CSS
    .foo {
    display: flex;
    }
    The Value

    View Slide

  73. What Happens if Something
    Goes Wrong?

    View Slide

  74. Example

    View Slide

  75. Desired Result

    View Slide

  76. Result
    image {
    transform:
    rotate(90deg);
    }
    CSS
    Faulty Selector

    View Slide

  77. Result
    img {
    transformer:
    rotate(90deg);
    }
    CSS
    Fault Property

    View Slide

  78. Result
    img {
    transform:
    rotate(90degrees);
    }
    CSS
    Faulty Value

    View Slide

  79. Result in Opera Mini
    img {
    transform:
    rotate(90deg);
    }
    CSS

    View Slide

  80. Nothing Happens

    View Slide

  81. Why is this a problem?
    • Unlike JavaScript, we can’t prepare for unsupported features
    • Unlike HTML, there is no “built-in” fallback

    View Slide

  82. Debugging CSS

    View Slide

  83. Today’s Solutions for
    Progressive Enhancement & CSS

    View Slide

  84. Start with Sensible HTML

    View Slide

  85. body { display: flex; }
    header { order: 1; }
    nav { order: 2; }
    main { order: 3; }
    footer { order: 4; }
    CSS






    HTML
    Don’t Do This!

    View Slide

  86. body { display: flex; }
    CSS






    HTML
    Do This!

    View Slide

  87. The Progressive Enhancement M&M
    http://alistapart.com/article/understandingprogressiveenhancement

    View Slide

  88. Take Advantage of the Cascade

    View Slide

  89. CSS
    div {
    /* Legacy styles before */
    background-color: #c00;
    /* Modern styles after */
    background-image: linear-gradient(#f00, #a00);
    }

    View Slide

  90. CSS
    .foo {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }
    Using Vendor-Prefixed Rules

    View Slide

  91. Go “Mobile-First”

    View Slide

  92. When Using Media Queries,
    min-width > max-width

    View Slide

  93. http://www.slideshare.net/Koombea/how-to-be-successful-with-responsive-sites-koombea-nginx-english

    View Slide

  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; }
    }

    View Slide

  95. Use Flexbox

    View Slide

  96. Flexbox is Designed to be a
    Progressive Enhancement

    View Slide

  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;
    }

    View Slide

  98. View Slide

  99. Separate Stylesheets?

    View Slide

  100. As a last resort, create
    separate stylesheets

    View Slide

  101. http://responsivenews.co.uk/post/18948466399/cutting-the-mustard

    View Slide

  102. JS
    if ('querySelector' in document
    && 'localStorage' in window
    && 'addEventListener' in window) {
    // Bootstrap with latest features
    }

    View Slide

  103. The Future of Progressive
    Enhancement & CSS

    View Slide

  104. What about Feature Queries?

    View Slide

  105. CSS Feature Queries allow authors to
    condition rules based on whether
    particular property declarations are
    supported by the current browser

    View Slide

  106. CSS
    @supports ( /* condition */ ) {
    /* rules */
    }

    View Slide

  107. CSS
    @supports ( display: flex ) {
    .foo { display: flex; }
    }
    Detect if a feature is supported

    View Slide

  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

    View Slide

  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

    View Slide

  110. CSS
    @supports not ( display: flex ) {
    .foo { display: table; }
    }
    Detect if a feature is not
    supported

    View Slide

  111. Perfect, Isn’t it?

    View Slide

  112. View Slide

  113. How can we use
    Feature Queries Today?

    View Slide

  114. https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/

    View Slide

  115. CSS
    @supports ( object-fit: cover ) {
    img { object-fit: cover; }
    }

    View Slide

  116. 4 Scenarios
    Supports
    Feature Queries
    Does Not Support
    Feature Queries
    Supports
    CSS Feature
    Does Not Support
    CSS Feature

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  121. What’s the Solution?

    View Slide

  122. Progressive Enhancement!

    View Slide

  123. Use Feature Queries as a
    Progressive Enhancement,
    rather than a Requirement

    View Slide

  124. CSS
    /* Fallback Code Above */
    img { width: 100%; }
    /* Enhancement After */
    @supports ( object-fit: cover ) {
    img { object-fit: cover; }
    }

    View Slide

  125. The world in 2030?

    View Slide

  126. View Slide

  127. More “Browsers”

    View Slide

  128. More Technologies
    123.5.2

    View Slide

  129. More People Online

    View Slide

  130. “ Leave no one behind ”
    — Stephen Champeon

    View Slide

  131. Thank You!
    www.ireaderinokun.com
    www.bitsofco.de
    @IreAderinokun

    View Slide