Progressing Our Layouts

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
March 04, 2016

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)

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

March 04, 2016
Tweet

Transcript

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

  2. Amazing future! The No-layout Layout Table-based Layouts Float-based Layouts The

    Official Timeline of the Evolution of Web Page Layout
  3. None
  4. (*Tweets in response, with names removed to protect the, well,

    not the innocent, but to protect people from trolling.)
  5. Works Doesn’t work

  6. Use It Don’t Use It

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

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

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

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

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

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

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

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

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

    Don’t Use It X
  16. None
  17. drawing by Dave Ellis novolume.co.uk

  18. So, ok, how?

  19. This Thing About CSS

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

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

    }
  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)
  25. That Magic Thing Where “Weird Stuff” Gets Ignored

  26. CSS Shapes

  27. None
  28. img { width: 200px; margin: 0 1.5em 0.5em 0; float:

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

    left; shape-outside: circle(); } There is a prefix: -webkit-shape-outside: circle(); *
  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% ); }
  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% ); }
  33. None
  34. labs.jensimmons.com @jensimmons

  35. Tool #1: CSS Error Handling

  36. Viewport Units + Flexbox

  37. None
  38. None
  39. header { display: flex; height: 100vh; } h1 { margin:

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

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

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

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

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

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

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

    { padding: 2em 0; margin: auto; }
  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. *
  49. Tool #2: CSS Overrides

  50. Initial Letter

  51. None
  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; }
  53. None
  54. None
  55. Safari 9 (iOS and Mac OSX)

  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; }
  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; }
  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; } }
  59. Tool #3: @supports, aka Feature Queries

  60. None
  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; } }
  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%; } }
  63. Tool #3: @supports, aka Feature Queries

  64. Prefixes

  65. None
  66. None
  67. None
  68. Bonus Tool: Autoprefixer

  69. Tool #4: Modernizer

  70. modernizer.com

  71. None
  72. .flexwrap { // // the flexbox layout // // }

    .no-flexwrap { // // the old school layout // // }
  73. Tool #5: Conditional Stylesheets

  74. Tool #0: Conditional Stylesheets

  75. <link rel="stylesheet" type="text/css" href="css/style.css" /> <!--[if IE 7]><link rel="stylesheet" type="text/css"

    media="screen" href="css/ie7.css" />< ![endif]—> <!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" />< ![endif]-->
  76. <!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE

    7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
  77. @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // IE10+

    CSS here }
  78. Tool #6: Polyfill

  79. Grid

  80. None
  81. None
  82. None
  83. None
  84. None
  85. None
  86. None
  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%; }
  88. labs.jensimmons.com

  89. None
  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
  91. ¿ ? What are we going to do about full-page

    layout?
  92. Don’t use Grid 
 until 100% of your audience has

    it
  93. Write float-based 
 (inline block / display table) layout &

    deliver that to some browsers, while the rest 
 get Grid layout
  94. (You should NOT be jacking up the HTML order for

    layout anyway, so the HMTL for both will be identical.)
  95. Deliver a “mobile” / skinny / simplified layout to older

    browsers, and a full-page Grid layout to supporting browsers
  96. None
  97. None
  98. Use a Polyfill for Grid

  99. None
  100. None
  101. None
  102. Use a Polyfill for Grid

  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.
  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.
  105. None
  106. Thanks! labs.jensimmons.com @jensimmons thewebahead.net