Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Proposal to CSSWG, Sept 2016

Jen Simmons
September 19, 2016

Proposal to CSSWG, Sept 2016

Slides for a presentation to the CSS & digipub Working Groups at TPAC.

Minutes from the meeting: https://logs.csswg.org/irc.w3.org/css/2016-09-19/#e721567

Related specs:

CSS Grid Layout Module Level 1,
2016: https://drafts.csswg.org/css-grid/

CSS Regions Module Level 1,
2014: https://www.w3.org/TR/2014/WD-css-regions-1-20141009/
2012: https://www.w3.org/TR/2012/WD-css3-regions-20120823/

CSS Pagination Templates Module Level 3,
2014: https://drafts.csswg.org/css-page-template-1/

CSS Template Layout Module,
2010: https://www.w3.org/TR/2010/WD-css3-layout-20100429/
2015: https://www.w3.org/TR/css3-layout/

Frame-based layout via Style Sheets,
1996: https://www.w3.org/TR/NOTE-layout

CSS Line Grid Module,
2016: https://drafts.csswg.org/css-line-grid/

CSS Overflow Module Level 4,
2016: https://drafts.csswg.org/css-overflow-4/

CSS Paged Media Module Level 3,
2013: https://www.w3.org/TR/css3-page/

CSSOM View Module,
2016: https://drafts.csswg.org/cssom-view/

Jen Simmons

September 19, 2016
Tweet

More Decks by Jen Simmons

Other Decks in Technology

Transcript

  1. A Proposal for a New Region Spec Jen Simmons CSSWG

    Meeting SePt 2016 Lisbon Portugal
  2. Jen Simmons Designer Advocate at Mozilla web master since 1996

    print & theater design for 20 years presenting on Layout & CSS at conferences, 30+ in 2016 alone host and executive producer of The Web Ahead podcast
  3. <article> [the whole article] </a> <div class=“empty”></div> <div class=“empty”></div> <div

    class=“empty”></div> <div class=“empty”></div> <div class=“empty”></div> <div class=“empty”></div> article { flow-into: foobar; } div.empty { flow-from: foobar; }
  4. “ ” I demonstrate Grid to authors in my layout

    workshops. Every time someone will ask how to apply backgrounds and borders to Grid cells. — Rachel Andrew
  5. figure { grid: 2 / 1 / 3 / 2;

    } figure { background: #6DB1FC; }
  6. @keyframes foobar { 0% {top:0; left: 0;} 50% {top: 50%;}

    100% {left: 100%;} } .box { animation-name: foobar; }
  7. @region foobar { grid: 3 / 1 / 4 /

    2; } foobar { background: #6DB1FC; }
  8. @region #grid-container foobar { grid: 3 / 1 / 4

    / 2; } foobar { background:#6DB1FC; }
  9. @region foobar { grid: 3 / 1 / 4 /

    2; } #grid-container::region(foobar) { background:#6DB1FC; }
  10. @region #grid-container foobar { grid: 3 / 1 / 4

    / 2; } foobar { background:#6DB1FC; }
  11. h1 { grid: 2 / 1 / 3 / 3;

    } .text { grid: 3 / 2 / 4 / 5; } aside { grid: 4 / 4 / 5 / 5; border: 10px solid red; } @region #main colorblock { grid: 1 / 1 / 2 / 3; } colorblock { background: red; }
  12. .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(1fr, 150px); } @region

    .container tilt { grid-row: 3; grid-column: 2; } tilt { transform: rotate(-5deg); background: #76D6FF; } Always rotate the box in 3rd row, 2nd column — no matter how the content responsively flows through, no how many columns there are
  13. .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(1fr, 100px); } h1

    { grid-column: 2 / span 2; grid-row: -3; background: orange; } Title
  14. .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(1fr, 100px); } h1

    { grid-column: 2 / span 2; grid-row: -3; background: orange; } Title
  15. @region .container gap1 { grid: 2 / 2; } @region

    .container gap2 { grid: 3 / 3; } @region .container gap3 { grid: 4 / 4; } @region .container gap4 { grid: 5 / 5; } gap1, gap2, gap3, gap4, { grid-auto-flow-self: skip; } Title or: none; empty; nope;
  16. @region .container foobar { grid: 2 / 2; } foobar

    { grid-auto-flow-self: skip; }
  17. @region-chain .mygrid foobarchain { 1 { grid: 1 / 1

    / 2 / -1; } 2 { grid: 2 / 1 / 4 / 3; } 3 { grid: 3 / 4 / 4 / 5; } 4 { grid: 4 / 1 / -2 / -3; } } article { flow-into: foobarchain; }
  18. @region-chain #grid-container foochain { 1 { grid: 2 / 2

    / 3 / -2;} 2 { grid: 3 / 3 / 4 / 5;} 3 { grid-area: namedarea;} 4 { region: foobar;} } article { flow-into: foochain; }
  19. @region-chain #mygrid foobarchain1 { 1 { … } 2 {

    … } 3 { … } 4 { … }} @region-chain #mygrid foobarchain2 { 1 { … } 2 { … } 3 { … } 4 { … }} @media (min-width:500px) { article {flow-into: foobarchain1; }} @media (min-width:1000px) { article {flow-into: foobarchain2; }}
  20. @region-chain main layoutflow { 1 { grid: 1 / 1

    / 2 / 3; } 2 { grid: 2 / 1 / 4 / 2; } 3 { grid: 3 / 2 / -1 / 3; } } article { flow-into: layoutflow; }
  21. <main> <article> <p><p><p><p><p><p> <p><p><p><p><p><p> <p><p><p><p><p><p> </article> </main> main { display:

    grid; grid-template-rows: 20vh 20vh 20vh auto; } @region-chain main layoutflow { 1 { grid: 1 / 1 / 2 / 3; } 2 { grid: 2 / 1 / 4 / 2; } 3 { grid: 3 / 2 / -1 / 3; } } article { flow-into: layoutflow; }
  22. <main id=“main”> <h1>…</h1> <div class=“body-text”>…</div> </main> <div class=“adverts"> <div class=“ad1”>…</div>

    <div class=“ad2”>…</div> </div> #main { grid-template-rows: 
 auto 80vh 150px 80vh 150px 80vh; } 2 1 3 H1 Headline
  23. @region-chain #main maincontent { 1 { grid: 2; } 2

    { grid: 4; } 3 { grid: 6; } } @region-chain #main adchain { 1 { grid: 3; } 2 { grid: 5; } } .body-text { flow-into: maincontent; } .adverts { flow-into: adchain; } 2 1 3 H1 Headline
  24. @region #main round-one { grid: 2 / 1 / 3

    / -1; } round-one { shape-inside: circle(); } @region-chain #main maincontent { 1 { grid: 1; } 2 { region: round-one; } 3 { grid: 3; } } .body-text { flow-into: maincontent; } 2 1 3
  25. Solves Multiple Problems •Provides ways to solve usecases that would

    otherwise need Exclusions. •Provides a way to handle complex HTML and put content from one place in the outline into a grid container in another place. Solves usecases that might work with Subgrid, but that would likely be hard & fragile. •Solves the problems that must be solved in order to do shape-inside.
  26. h1 { grid: 1; } @region-chain article maincontent { 1

    { grid: 2; } 2 { grid: 3; } 3 { grid: 4; } 4 { grid: 5; } 5 { grid: 6; } 6 { grid: 7; } } .body-text { flow-into: maincontent; columns: 200px; } 2 1 3 H1 Headline 100vh
  27. Regions, Redux •Requires Grid. •Grid does all the heavy lifting

    to accomplish layout, sizing, targeting a place, etc. •Proposes three new things…
  28. @region #grid-container foobar { grid: 3 / 1 / 4

    / 2; } foobar { background:#6DB1FC; }
  29. @region-chain #mygrid foobarchain { 1 { grid: 1 / 1

    / 2 / -1; } 2 { grid: 2 / 1 / 4 / 3; } 3 { grid: 3 / 4 / 4 / 5; } 4 { grid: 4 / 1 / -2 / -3; } } article { flow-into: foobarchain; }
  30. Javascript Can Get at it •JavaScript can be used to

    change HTML just like normal, as if layout was not applied. •Any content in a particular Region can be styled. JavaScript can override these styles by injecting a body class & overriding, or injecting inline styles on the grid container (or any parent element above that). •Content inside a particular Region can be targeted with JavaScript by using a Selector Query.
  31. Differences Between Region Specs •A region chain gets it’s order

    from placement in the document order
 •CSS Region is a block container that has flow-from applied, associating a named flow •The rearrange order of regions at different breakpoints: use layout to move empty elements to new locations •Region chain gets it’s order from the numbered list declared in the @region-chain rule •CSS Region is a CSS construct, a way to target a grid cell or area in order to apply CSSS •Define multiple region chains, and trigger the use of one at one breakpoint, and another at another breakpoint Current Region Spec This Proposal
  32. Similarities Between Region Specs •A region chain is a chain

    of regions in a particular order •Content that is placed in a region chain is removed from the ‘normal’ page layout with the `flow-into` property •break-before, break-after, break-inside applies just the same
  33. Slots vs Regions •These Regions are not Slots. Slots exist

    in a parallel reality where Grid is very different. Slots mash together ideas for cells with this idea for regions. •Most of the concepts defined by Slots have morphed into Grid Cells and Named Areas. •The overlap between Slots in the Template Layout Module and this proposal for Regions comes with:
 1) the use of the ’slot()’ pseudo-element to allow styling; 
 2) the use of `chains: * a b c ` to define a chain for flow;
 but the mechanism for which things happen are very different.
 With Template Layout Slots, both purposes require using what’s now known as Named Areas. Slots make handling flexibility in RWD hard.
  34. Slots vs Regions •In both the Template Layout and Page

    Template specs, Slots define spaces in which to put stuff, provide a mechanism in which to place it, and a mechanism for styling. •This Regions proposal relies on Grid to define those spaces (and size them); to target those spaces; and to place content in those spaces. •Regions assists Grid by providing a mechanism for targeting empty cells and for chaining cells together and flowing content into more than one of them. Regions do far less than Slots.
  35. Syntax from Slots: #article { grid: "A A c" "A

    A c" "* * c" "a b c"; chains: * a b c } #article img { flow: A } And all the rest of the content in `article` flows automatically from * to a to b to c, without being specified. Our version of Grid is a long way from this mental model.
  36. How Slots style a thing: body::slot(namedfooarea) { background: yellow; }

    or perhaps, with a nod to our reality… #grid-container::slot(namedfooarea) { background: yellow; } But this requires defining everything that you might want to style as 
 a named area. And redefining the Grid (in order to change the area names) at any breakpoint where author wishes to change styling, even when the Grid otherwise doesn’t change.