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

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

    Official Timeline of the Evolution of Web Page Layout
  2. 3.
  3. 4.

    (*Tweets in response, with names removed to protect the, well,

    not the innocent, but to protect people from trolling.)
  4. 16.
  5. 21.
  6. 22.
  7. 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)
  8. 27.
  9. 28.

    img { width: 200px; margin: 0 1.5em 0.5em 0; float:

    left; shape-outside: circle(); } There is a prefix: -webkit-shape-outside: circle(); *
  10. 29.
  11. 30.

    img { width: 200px; margin: 0 1.5em 0.5em 0; float:

    left; shape-outside: circle(); } There is a prefix: -webkit-shape-outside: circle(); *
  12. 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% ); }
  13. 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% ); }
  14. 33.
  15. 37.
  16. 38.
  17. 43.
  18. 45.
  19. 46.
  20. 47.
  21. 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. *
  22. 51.
  23. 53.
  24. 54.
  25. 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; } }
  26. 60.
  27. 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; } }
  28. 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%; } }
  29. 64.
  30. 65.
  31. 66.
  32. 67.
  33. 71.
  34. 72.

    .flexwrap { // // the flexbox layout // // }

    .no-flexwrap { // // the old school layout // // }
  35. 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]-->
  36. 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]-->
  37. 79.
  38. 80.
  39. 81.
  40. 82.
  41. 83.
  42. 84.
  43. 85.
  44. 86.
  45. 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%; }
  46. 89.
  47. 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
  48. 93.

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

    deliver that to some browsers, while the rest 
 get Grid layout
  49. 94.

    (You should NOT be jacking up the HTML order for

    layout anyway, so the HMTL for both will be identical.)
  50. 95.

    Deliver a “mobile” / skinny / simplified layout to older

    browsers, and a full-page Grid layout to supporting browsers
  51. 96.
  52. 97.
  53. 99.
  54. 100.
  55. 101.
  56. 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.
  57. 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.
  58. 105.