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 full-size slide

  2. Ireoluwa Akanke Elizabeth
    Oluwasore Aderinokun

    View full-size slide

  3. Lagos, Nigeria

    View full-size slide

  4. User Interface Designer
    &
    Frontend Developer

    View full-size slide

  5. Writer, bitsofco.de

    View full-size slide

  6. Google Expert,
    Web Technologies

    View full-size slide

  7. Progressive Enhancement
    &
    CSS

    View full-size slide

  8. What is Progressive
    Enhancement?

    View full-size slide

  9. Let’s go back to 2003

    View full-size slide

  10. The Sound of the Internet

    View full-size slide

  11. The State of the Web

    View full-size slide

  12. Graceful Degradation

    View full-size slide

  13. 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 full-size slide

  14. HTML

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

    View full-size slide

  15. March 11 2003

    View full-size slide

  16. Stephen
    Champeon
    Progressive
    Enhancement

    View full-size slide

  17. 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 full-size slide

  18. Enter “ Progressive Enhancement ”

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. 5 “Guidelines” for
    Progressive Enhancement

    View full-size slide

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

    View full-size slide

  24. Sparse, semantic markup should
    contain all content

    View full-size slide

  25. 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 full-size slide

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

    View full-size slide

  27. Enhanced layout can be provided
    by CSS stylesheets

    View full-size slide

  28. Enhanced behaviour can be
    provided by unobtrusive JavaScript

    View full-size slide

  29. Search without JavaScript

    View full-size slide

  30. Search with JavaScript

    View full-size slide

  31. End-User web browser
    preferences should be respected

    View full-size slide

  32. Why is Progressive
    Enhancement Important Today?

    View full-size slide

  33. The world in 2016 is
    very different…

    View full-size slide

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

    View full-size slide

  35. More Versions

    View full-size slide

  36. More Technologies

    View full-size slide

  37. 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 full-size slide

  38. The Web is Still Open

    View full-size slide

  39. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  42. Progressive Enhancement
    & JavaScript

    View full-size slide

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

    View full-size slide

  44. How do we Deal with This?

    View full-size slide

  45. Make the Website Functional
    without JavaScript

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. Simple Enough

    View full-size slide

  49. Progressive Enhancement
    & HTML

    View full-size slide

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

    View full-size slide

  51. HTML

    Website Header


    Lorem ipsum dolor sit amet

    We Write This…

    View full-size slide

  52. HTML

    Website Header


    Lorem ipsum dolor sit amet

    …The Browser Sees This

    View full-size slide

  53. How do we Deal with This?

    View full-size slide

  54. HTML

    Website Header


    Lorem ipsum dolor sit amet

    View full-size slide

  55. Simple Enough

    View full-size slide

  56. So, What about CSS?

    View full-size slide

  57. The Problem with Progressive
    Enhancement & CSS

    View full-size slide

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

    View full-size slide

  59. CSS
    .foo {
    display: flex;
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  63. What Happens if Something
    Goes Wrong?

    View full-size slide

  64. Desired Result

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  69. Nothing Happens

    View full-size slide

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

    View full-size slide

  71. Debugging CSS

    View full-size slide

  72. Today’s Solutions for
    Progressive Enhancement & CSS

    View full-size slide

  73. Start with Sensible HTML

    View full-size slide

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






    HTML
    Don’t Do This!

    View full-size slide

  75. body { display: flex; }
    CSS






    HTML
    Do This!

    View full-size slide

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

    View full-size slide

  77. Take Advantage of the Cascade

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  80. Go “Mobile-First”

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  83. 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 full-size slide

  84. Flexbox is Designed to be a
    Progressive Enhancement

    View full-size slide

  85. 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 full-size slide

  86. Separate Stylesheets?

    View full-size slide

  87. As a last resort, create
    separate stylesheets

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  90. The Future of Progressive
    Enhancement & CSS

    View full-size slide

  91. What about Feature Queries?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  95. 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 full-size slide

  96. 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 full-size slide

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

    View full-size slide

  98. Perfect, Isn’t it?

    View full-size slide

  99. How can we use
    Feature Queries Today?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  104. 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 full-size slide

  105. 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 full-size slide

  106. 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 full-size slide

  107. What’s the Solution?

    View full-size slide

  108. Progressive Enhancement!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  111. The world in 2030?

    View full-size slide

  112. More “Browsers”

    View full-size slide

  113. More Technologies
    123.5.2

    View full-size slide

  114. More People Online

    View full-size slide

  115. “ Leave no one behind ”
    — Stephen Champeon

    View full-size slide

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

    View full-size slide