Progressing Our Layouts

How do we use new CSS properties today, before they are fully implemented in browsers? Like this.

You can watch this presentation at: https://www.youtube.com/watch?v=PZPPwxumEzs (free)

Transcript

1. Progressing
   Our Layouts
   Jen Simmons
   @jensimmons
   thewebahead.net
   

   View Slide

2. Amazing
   future!
   The
   No-layout
   Layout
   Table-based
   Layouts
   Float-based
   Layouts
   The Official Timeline of the Evolution of Web Page Layout
   

   View Slide

3. View Slide

4. (*Tweets in response, with names removed
   to protect the, well, not the innocent,
   but to protect people from trolling.)
   

   View Slide

5. Works Doesn’t
   work
   

   View Slide

6. Use It
   Don’t Use It
   

   View Slide

7. Works Doesn’t
   work
   Use It
   Don’t
   Use It
   

   View Slide

8. Works Doesn’t
   work
   Use It
   Don’t
   Use It
   

   View Slide

9. Works Doesn’t
   work
   Use It
   Don’t
   Use It
   

   View Slide

10. Works Doesn’t
    work
    Use It
    Don’t
    Use It
    Fired.
    

    View Slide

11. Works Doesn’t
    work
    Use It
    Don’t
    Use It
    Fired.
    

    View Slide

12. Works Doesn’t
    work
    Use It
    Don’t
    Use It
    Fired.
    ✔
    

    View Slide

13. Works Doesn’t
    work
    Use It
    Don’t
    Use It
    

    View Slide

14. Works and
    Doesn’t Work
    Use It and
    Don’t Use It
    Don’t
    Use It
    

    View Slide

15. Works and
    Doesn’t Work
    Use It and
    Don’t Use It
    Don’t
    Use It
    X
    

    View Slide

16. View Slide

17. drawing by Dave Ellis
    novolume.co.uk
    

    View Slide

18. So, ok, how?
    

    View Slide

19. This Thing About CSS
    

    View Slide

20. .box {
    background: #bbb;
    border: 10px solid black;
    border-radius: 50px;
    }
    

    View Slide

21. View Slide

22. View Slide

23. .box {
    background: #bbb;
    border: 10px solid black;
    border-radius: 50px;
    }
    

    View Slide

24. .box {
    background: #bbb;
    border: 10px solid black;
    border-radius: 50px;
    }
    .box {
    background: #bbb;
    border: 10px solid black;
    border-radius: 50px;
    }
    Opera Mini
    IE8
    IE7
    IE6
    Firefox
    Safari
    Chrome
    IE9+
    Edge
    (on all operating systems)
    

    View Slide

25. That Magic Thing Where
    “Weird Stuff” Gets Ignored
    

    View Slide

26. CSS Shapes
    

    View Slide

27. View Slide

28. img {
    width: 200px;
    margin: 0 1.5em 0.5em 0;
    float: left;
    shape-outside: circle();
    }
    There is a prefix: -webkit-shape-outside: circle();
    *
    

    View Slide

29. View Slide

30. img {
    width: 200px;
    margin: 0 1.5em 0.5em 0;
    float: left;
    shape-outside: circle();
    }
    There is a prefix: -webkit-shape-outside: circle();
    *
    

    View Slide

31. img.grapes {
    max-width: 600px;
    float: left;
    margin-left: -26%;
    shape-outside:polygon(
    nonzero, -69.6% 101.25%, -84.35% 24.5%, 1.65% 4%, 23.3%
    14.25%, 40.4% 13.5%, 43% 13.25%, 57.1% 16.5%, 62.7% 27%,
    74.5% 32.25%, 78.15% 42.5%, 80.1% 49.25%, 77.15% 58.75%,
    92.25% 68.25%, 92.9% 82.25%, 75.5% 92.5%, 51.55% 90.75%,
    -5.6% 101.25%
    );
    }
    

    View Slide

32. img.grapes {
    max-width: 600px;
    float: left;
    margin-left: -26%;
    shape-outside:polygon(
    nonzero, -69.6% 101.25%, -84.35% 24.5%, 1.65% 4%, 23.3%
    14.25%, 40.4% 13.5%, 43% 13.25%, 57.1% 16.5%, 62.7% 27%,
    74.5% 32.25%, 78.15% 42.5%, 80.1% 49.25%, 77.15% 58.75%,
    92.25% 68.25%, 92.9% 82.25%, 75.5% 92.5%, 51.55% 90.75%,
    -5.6% 101.25%
    );
    }
    

    View Slide

33. View Slide

34. labs.jensimmons.com
    @jensimmons
    

    View Slide

35. Tool #1:
    CSS Error Handling
    

    View Slide

36. Viewport Units +
    Flexbox
    

    View Slide

37. View Slide

38. View Slide

39. header {
    display: flex;
    height: 100vh;
    }
    h1 {
    margin: auto;
    }
    

    View Slide

40. header {
    display: flex;
    height: 100vh;
    }
    h1 {
    margin: auto;
    }
    

    View Slide

41. header {
    display: flex;
    height: 500px;
    height: 100vh;
    }
    h1 {
    margin: auto;
    }
    

    View Slide

42. header {
    display: flex;
    height: 500px;
    height: 100vh;
    }
    h1 {
    margin: auto;
    }
    

    View Slide

43. View Slide

44. header {
    display: flex;
    height: 500px;
    height: 100vh;
    }
    h1 {
    margin: auto;
    }
    

    View Slide

45. header {
    display: flex;
    height: 500px;
    height: 100vh;
    }
    h1 {
    margin-top: 2em;
    margin: auto;
    }
    

    View Slide

46. header {
    display: flex;
    height: 500px;
    height: 100vh;
    }
    h1 {
    padding: 2em 0;
    margin: auto;
    }
    

    View Slide

47. header {
    display: flex;
    height: 500px;
    height: 100vh;
    }
    h1 {
    padding: 2em 0;
    margin: auto;
    }
    

    View Slide

48. header {
    display: flex;
    height: 500px;
    height: 100vh;
    }
    h1 {
    padding: 2em 0;
    margin: auto;
    }
    The running code uses prefixes, which I’ll talk about later.
    *
    

    View Slide

49. Tool #2:
    CSS Overrides
    

    View Slide

50. Initial Letter
    

    View Slide

51. View Slide

52. p::first-letter {
    color: rgba(255,190,150,0.9);
    font-weight: bold;
    margin-right: 0.5em;
    -webkit-initial-letter: 4;
    initial-letter: 4;
    }
    

    View Slide

53. View Slide

54. View Slide

55. Safari 9
    (iOS and Mac OSX)
    

    View Slide

56. p::first-letter {
    color: rgba(255,190,150,0.9);
    font-weight: bold;
    margin-right: 0.5em;
    -webkit-initial-letter: 4;
    initial-letter: 4;
    }
    

    View Slide

57. p::first-letter {
    color: rgba(255,190,150,0.9);
    font-weight: bold;
    margin-right: 0.5em;
    -webkit-initial-letter: 4;
    initial-letter: 4;
    }
    

    View Slide

58. @supports (initial-letter: 4 ) or
    (-webkit-initial-letter: 4 )
    p::first-letter {
    color: rgba(255,190,150,0.9);
    font-weight: bold;
    margin-right: 0.5em;
    -webkit-initial-letter: 4;
    initial-letter: 4;
    }
    }
    

    View Slide

59. Tool #3: @supports,
    aka Feature Queries
    

    View Slide

60. View Slide

61. @supports (initial-letter: 4 ) or
    (-webkit-initial-letter: 4 )
    p {color:red;}
    p::first-letter {
    color: rgba(255,190,150,0.9);
    font-weight: bold;
    margin-right: 0.5em;
    -webkit-initial-letter: 4;
    initial-letter: 4;
    }
    }
    

    View Slide

62. // Layout overrides for browsers that
    // don't support Flexbox flex-wrap,
    // namely, Firefox 25 to 28.
    @supports (not (flex-wrap: wrap)) {
    .article-list {
    display: block;
    }
    article {
    flex: none;
    float: left;
    width: 48%;
    }
    }
    

    View Slide

63. Tool #3: @supports,
    aka Feature Queries
    

    View Slide

64. Prefixes
    

    View Slide

65. View Slide

66. View Slide

67. View Slide

68. Bonus Tool:
    Autoprefixer
    

    View Slide

69. Tool #4: Modernizer
    

    View Slide

70. modernizer.com
    

    View Slide

71. View Slide

72. .flexwrap {
    //
    // the flexbox layout
    //
    //
    }
    .no-flexwrap {
    //
    // the old school layout
    //
    //
    }
    

    View Slide

73. Tool #5:
    Conditional Stylesheets
    

    View Slide

74. Tool #0:
    Conditional Stylesheets
    

    View Slide

75. 
    
    

    View Slide

76. 
    
    
    
    
    

    View Slide

77. @media all and (-ms-high-contrast: none), (-ms-high-contrast:
    active) {
    // IE10+ CSS here
    }
    

    View Slide

78. Tool #6: Polyfill
    

    View Slide

79. Grid
    

    View Slide

80. View Slide

81. View Slide

82. View Slide

83. View Slide

84. View Slide

85. View Slide

86. View Slide

87. ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 50vw;
    grid-auto-flow: dense;
    @media (min-width: 360px) {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 33vw;
    }
    @media (min-width: 500px) {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 25vw;
    }
    @media (min-width: 700px) {
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 20vw;
    }
    @media (min-width: 900px) {
    li {
    height: 100%;
    border: 1px solid black;
    }
    li.highlight-box {
    grid-row: span 2;
    grid-column: span 2;
    }
    li.highlight-tall {
    grid-row: span 2;
    }
    li.highlight-wide {
    grid-column: span 2;
    }
    img {
    display: block;
    object-fit: cover;
    height: 100%;
    }
    

    View Slide

88. labs.jensimmons.com
    

    View Slide

89. View Slide

90. 1. Fact CSS ignores code it doesn’t recognize
    2. The CSS Cascade
    3. Feature Queries with @supports { }
    4. Modernizer
    5. Conditional Stylesheets for IE
    6. Polyfills
    

    View Slide

91. ¿ ?
    What are we
    going to do about
    full-page layout?
    

    View Slide

92. Don’t use Grid 

    until 100% of your
    audience has it
    

    View Slide

93. Write float-based 

    (inline block / display table)
    layout & deliver that to some
    browsers, while the rest 

    get Grid layout
    

    View Slide

94. (You should NOT be jacking
    up the HTML order for
    layout anyway, so the HMTL
    for both will be identical.)
    

    View Slide

95. Deliver a “mobile” / skinny /
    simplified layout to older
    browsers, and a full-page Grid
    layout to supporting browsers
    

    View Slide

96. View Slide

97. View Slide

98. Use a Polyfill for Grid
    

    View Slide

99. View Slide

100. View Slide

101. View Slide

102. Use a Polyfill for Grid
     

     View Slide

103. Basic layout, that doesn’t require Grid.
     Or Media Queries. Or Feature Queries.
     Hand-write your own CSS for this.
     Drop layout frameworks & learn vanilla CSS.
     

     View Slide

104. Basic layout, that doesn’t require Grid.
     Or Media Queries. Or Feature Queries.
     Hand-write your own CSS for this.
     Drop layout frameworks & learn vanilla CSS.
     Code that uses Grid to create the layout.
     Use Feature Queries to hide it from
     non-supporting browsers.
     

     View Slide

105. View Slide

106. Thanks!
     labs.jensimmons.com
     @jensimmons
     thewebahead.net
     

     View Slide