What about CSS? Progressive Enhancement & CSS

Fronteers Conference 2016

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