|
50 | 50 | <h1>CSS Grid Template Layout Module</h1> |
51 | 51 | <!--=================================================================--> |
52 | 52 | <h2 class="no-num no-toc" id=longstatus-date-3-august-2004>Editor's Draft |
53 | | - 20 March 2012</h2> |
| 53 | + 21 March 2012</h2> |
54 | 54 |
|
55 | 55 | <dl> |
56 | 56 | <dt>This version: |
57 | 57 |
|
58 | 58 | <dd><a |
59 | | - href="http://www.w3.org/TR/2012/ED-css3-layout-20120320/">http://www.w3.org/TR/2012/ED-css3-layout-20120320/</a> |
| 59 | + href="http://www.w3.org/TR/2012/ED-css3-layout-20120321/">http://www.w3.org/TR/2012/ED-css3-layout-20120321/</a> |
60 | 60 |
|
61 | 61 |
|
62 | 62 | <dt>Latest version: |
@@ -344,9 +344,8 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2> |
344 | 344 | <li><a href="#style-the-slots-pseudo-elements"><span |
345 | 345 | class=secno>10.2.12. </span>Style the slots (pseudo-elements)</a> |
346 | 346 |
|
347 | | - <li><a href="#style-the-contents-of-slots-region-based"><span |
348 | | - class=secno>10.2.13. </span>Style the contents of slots (region-based |
349 | | - styling)</a> |
| 347 | + <li><a href="#region-based"><span class=secno>10.2.13. </span>Style |
| 348 | + the contents of slots (region-based styling)</a> |
350 | 349 |
|
351 | 350 | <li><a href="#orient-the-grid-with-writing-mode-vs-ori"><span |
352 | 351 | class=secno>10.2.14. </span>Orient the grid with writing mode vs |
@@ -2517,9 +2516,36 @@ <h3 id=flow><span class=secno>3.1. </span>Flowing content into slots: |
2517 | 2516 | into a slot? If the grid template assigns a fixed height to the slot, it |
2518 | 2517 | is obvious what a percentage means, but if the slot's height is |
2519 | 2518 | ‘<code class=css>max-content' and an element in the slot has |
2520 | | - 'height: 110%', there is a conflict… |
2521 | | - <!--=================================================================--> |
2522 | | - </code> |
| 2519 | + 'height: 110%', there is a conflict… </code> |
| 2520 | + |
| 2521 | + <div class=issue> |
| 2522 | + <p>Allowing multiple values on 'flow' could be an easy way to duplicate |
| 2523 | + elements. E.g., this style |
| 2524 | + |
| 2525 | + <pre> |
| 2526 | +BODY {grid: "a.b.c."} |
| 2527 | +H1 {flow: a, b, c} |
| 2528 | +#art1 {flow: a} |
| 2529 | +#art2 {flow: b} |
| 2530 | +#art3 {flow: c} |
| 2531 | +</pre> |
| 2532 | + |
| 2533 | + <p>with a document like |
| 2534 | + |
| 2535 | + <pre> |
| 2536 | +... |
| 2537 | +<H1>Local news</H1> |
| 2538 | +<DIV ID=art1>...</DIV> |
| 2539 | +<DIV ID=art2>...</DIV> |
| 2540 | +<DIV ID=art3>...</DIV> |
| 2541 | +</pre> |
| 2542 | + |
| 2543 | + <p>would repeat the H1 at the top of all three columns. With <a |
| 2544 | + href="#region-based">region-based styling,</a> the three instances could |
| 2545 | + even be styled differently, e.g., with generated content: |
| 2546 | + 'H1::flow(b)::before {content: "cont'd "}' |
| 2547 | + </div> |
| 2548 | + <!--=================================================================--> |
2523 | 2549 |
|
2524 | 2550 | <h3 id=absolute-positioning-using-a-grid-grid-p><span class=secno>3.2. |
2525 | 2551 | </span>Absolute positioning using a grid: 'grid-position-x' and |
@@ -4335,8 +4361,8 @@ <h4 id=style-the-slots-pseudo-elements><span class=secno>10.2.12. |
4335 | 4361 | empty source document. |
4336 | 4362 | <!--=================================================================--> |
4337 | 4363 |
|
4338 | | - <h4 id=style-the-contents-of-slots-region-based><span class=secno>10.2.13. |
4339 | | - </span>Style the contents of slots (region-based styling)</h4> |
| 4364 | + <h4 id=region-based><span class=secno>10.2.13. </span>Style the contents of |
| 4365 | + slots (region-based styling)</h4> |
4340 | 4366 |
|
4341 | 4367 | <p>By means of a new pseudo-element, style could be applied to only the |
4342 | 4368 | part of an element that is inside a certain slot (similar to how |
|
0 commit comments