What about CSS? Progressive Enhancement & CSS (Updated)

Voxxed Days Zurich 2017

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