$30 off During Our Annual Pro Sale. View Details »

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. What about CSS?
    Ire Aderinokun | Fronteers Conference 2016
    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. User Interface Designer
    &
    Front-End Developer

    View Slide

  7. Writer, bitsofco.de

    View Slide

  8. Google Developer Expert,
    Web Technologies

    View Slide

  9. Progressive Enhancement
    &
    CSS

    View Slide

  10. What is Progressive
    Enhancement?

    View Slide

  11. Let’s go back to 2003

    View Slide

  12. View Slide

  13. The Sound of the Internet

    View Slide

  14. The State of the Web

    View Slide

  15. View Slide

  16. Graceful Degradation

    View Slide

  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.

    View Slide

  18. HTML

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

    View Slide

  19. March 11 2003

    View Slide

  20. View Slide

  21. Stephen Champeon
    “Inclusive Web Design for the Future”
    at SXSW

    View Slide

  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/

    View Slide

  23. Enter “ Progressive Enhancement ”

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  27. 5 “Guidelines” for
    Progressive Enhancement

    View Slide

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

    View Slide

  29. View Slide

  30. Sparse, semantic markup should
    contain all content

    View Slide

  31. 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

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

    View Slide

  33. Enhanced layout can be provided
    by CSS stylesheets

    View Slide

  34. View Slide

  35. Enhanced behaviour can be
    provided by unobtrusive JavaScript

    View Slide

  36. Search without JavaScript

    View Slide

  37. Search with JavaScript

    View Slide

  38. End-User web browser
    preferences should be respected

    View Slide

  39. HTML

    View Slide

  40. Why is Progressive
    Enhancement Important Today?

    View Slide

  41. The world in 2016 is
    very different…

    View Slide

  42. View Slide

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

    View Slide

  44. More Versions

    View Slide

  45. More Technologies

    View Slide

  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/

    View Slide

  47. The Web is Still Open

    View Slide

  48. Progressive Enhancement
    & JavaScript

    View Slide

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

    View Slide

  50. How do we Deal with This?

    View Slide

  51. Make the Website Functional
    without JavaScript

    View Slide

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

    View Slide

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

    View Slide

  54. Simple Enough

    View Slide

  55. Progressive Enhancement
    & HTML

    View Slide

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

    View Slide

  57. HTML

    Website Header


    Lorem ipsum dolor sit amet

    We Write This…

    View Slide

  58. HTML

    Website Header


    Lorem ipsum dolor sit amet

    The Browser Sees This

    View Slide

  59. How do we Deal with This?

    View Slide

  60. HTML

    Website Header


    Lorem ipsum dolor sit amet

    View Slide

  61. Simple Enough

    View Slide

  62. So, What about CSS?

    View Slide

  63. The Problem with Progressive
    Enhancement & CSS

    View Slide

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

    View Slide

  65. CSS
    .foo {
    display: flex;
    }

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  69. What Happens if Something
    Goes Wrong?

    View Slide

  70. Example

    View Slide

  71. Desired Result

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  76. Nothing Happens

    View Slide

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

    View Slide

  78. Debugging CSS

    View Slide

  79. Today’s Solutions for
    Progressive Enhancement & CSS

    View Slide

  80. Start with Sensible HTML

    View Slide

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






    HTML
    Don’t Do This!

    View Slide

  82. body { display: flex; }
    CSS






    HTML
    Do This!

    View Slide

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

    View Slide

  84. Take Advantage of the Cascade

    View Slide

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

    View Slide

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

    View Slide

  87. Go “Mobile-First”

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  91. Use Flexbox

    View Slide

  92. Flexbox is Designed to be a
    Progressive Enhancement

    View Slide

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

    View Slide

  94. View Slide

  95. Separate Stylesheets?

    View Slide

  96. As a last resort, create
    separate stylesheets

    View Slide

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

    View Slide

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

    View Slide

  99. The Future of Progressive
    Enhancement & CSS

    View Slide

  100. What about Feature Queries?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  107. Perfect, Isn’t it?

    View Slide

  108. View Slide

  109. How can we use
    Feature Queries Today?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  117. What’s the Solution?

    View Slide

  118. Progressive Enhancement!

    View Slide

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

    View Slide

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

    View Slide

  121. The world in 2030?

    View Slide

  122. View Slide

  123. More “Browsers”

    View Slide

  124. More Technologies
    23.0

    View Slide

  125. More People Online

    View Slide

  126. “ Leave no one behind ”
    — Stephen Champeon

    View Slide

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

    View Slide