Generated. Do not edit!

Author: bert-github

css3-layout/Overview.html

@@ -35,14 +35,14 @@
 
    <h1>CSS Grid Template Layout Module</h1>
    <!--=================================================================-->
-   <h2 class="no-num no-toc" id=longstatus-date-3-august-2004>Editor's Draft
-    16 May 2012</h2>
+   <h2 class="no-num no-toc" id=editors-draft-17-may-2012>Editor's Draft 17
+    May 2012</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2012/ED-css3-layout-20120516/">http://www.w3.org/TR/2012/ED-css3-layout-20120516/</a>
+     href="http://www.w3.org/TR/2012/ED-css3-layout-20120517/">http://www.w3.org/TR/2012/ED-css3-layout-20120517/</a>
 
 
     <dt>Latest version:
@@ -113,7 +113,7 @@ <h2 class="no-num no-toc" id=abstract>Abstract</h2>
    arbitrary slots so that the visual order becomes independent of the
    document order.
 
-  <p>The <a href="#slot-pseudo-element.">‘<code
+  <p>The <a href="#lsquoslotrsquo-pseudo-element.">‘<code
    class=css>::slot()</code>’ pseudo-element</a> allows to style the slots
    (backgrounds, borders, etc.)
 
@@ -421,11 +421,10 @@ <h3 id=summary-and-examples><span class=secno>1.1. </span>Summary and
   <p>The properties in this specification work by associating a layout grid
    with an element. Rather than letting an element lay out its descendants in
    a single flow, the policy defined in this module gives an element a
-   <span>grid template,</span> which is a set of <a href="#slot">slots</a>
-   aligned to an invisible grid, where each slot is a separate flow. The
-   descendants are given a ‘<a href="#flow0"><code
-   class=property>flow</code></a>’ property to designate the slot into
-   which they flow.
+   <span>grid template,</span> which is a set of <span>slots</span> aligned
+   to an invisible grid, where each slot is a separate flow. The descendants
+   are given a ‘<a href="#flow0"><code class=property>flow</code></a>’
+   property to designate the slot into which they flow.
 
   <p>Because layouts on the Web have to adapt to different window and paper
    sizes, the rows and columns of the grid can be made fixed or flexible in
@@ -814,6 +813,35 @@ <h3 id=summary-and-examples><span class=secno>1.1. </span>Summary and
     rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a> for some ideas), or we
     could allow a scrollbar on slot c.
   </div>
+
+  <div class=example>
+   <p>This example shows two [three] ways to align the contents of a
+    fixed-height paragraph to the bottom of the box:
+
+   <dl>
+    <dt>Method 1
+
+    <dd>
+     <pre>P {height: 20em; grid: "." "*" fit-content}</pre>
+
+    <dt>Method 2
+
+    <dd>
+     <pre>P {height: 20em; grid: "*"}
+P::slot(*) {vertical-align: bottom}</pre>
+
+    <dt>[Method 3]
+
+    <dd class=issue>
+     <pre>P {height: 20em; vertical-align: bottom}</pre>
+   </dl>
+
+   <p>However, the styles differ in case the content is taller than 20 em
+    and overflows: the first style has a baseline-aligned content which will
+    thus overflow <em>below</em> the element's box; the second example has
+    bottom-aligned content, which will thus overflow <em>above</em> the
+    element's box.
+  </div>
   <!--=================================================================-->
 
   <h3 id=dependencies><span class=secno>1.2. </span>Dependencies on other
@@ -1382,7 +1410,7 @@ <h3 id=grid-row-sizes><span class=secno>2.3. </span>Specifying the height
 <dfn id=ltrow-heightgt>&lt;row-height&gt;</dfn> = <a
    href="#ltlengthgt"><var>&lt;length&gt;</var></a> | <var>&lt;percentage&gt;</var> | * | <var>&lt;fraction&gt;</var> |
   <a
-   href="#ltminmaxgt0"><var>&lt;minmax&gt;</var></a> | min-content | max-content | auto
+   href="#ltminmaxgt0"><var>&lt;minmax&gt;</var></a> | min-content | max-content | fit-content
 <dfn
    id=ltminmaxgt0>&lt;minmax&gt;</dfn> = minmax( <a
    href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a> , <a
@@ -1446,7 +1474,7 @@ <h3 id=grid-row-sizes><span class=secno>2.3. </span>Specifying the height
     class=css>minmax(<var>p</var>,<var>q</var>)</code>’ is treated as
     ‘<code class=css>minmax(<var>p</var>,<var>p</var>)</code>’.
 
-   <dt>auto
+   <dt>fit-content
 
    <dd> Equivalent to ‘<code class=css>minmax(min-content,
     max-content)</code>’.
@@ -1673,9 +1701,9 @@ <h3 id=slot-sizes><span class=secno>2.6. </span>Calculating the size of the
       class=property>margin-left</code></a>’, ‘<a
       href="#margin-right"><code class=property>margin-right</code></a>’,
       etc., that is set on it by means of the <a
-      href="#slot-pseudo-element.">‘<code class=css>::slot()</code>’
-      pseudo-element</a>). Any ‘<code class=css>auto</code>’ margins are
-      counted as 0 in this case.
+      href="#lsquoslotrsquo-pseudo-element.">‘<code
+      class=css>::slot()</code>’ pseudo-element</a>). Any ‘<code
+      class=css>auto</code>’ margins are counted as 0 in this case.
 
      <li>Otherwise, if the slot spans at least one column whose width is
       specified as ‘<code class=css>max-content</code>’ (or ‘<code
@@ -2108,11 +2136,11 @@ <h2 id=positioning><span class=secno>3. </span>Putting content into a grid
    root (“establishes a block formatting context” in the terminology of
    CSS level 2), very much like a table cell.
 
-  <p>The second way is to absolutely position elements using four <a
-   href="#grid-line"><em>grid lines</em></a> to specify the positions of the
-   four margin edges of the element. Like other positioned elements <a
-   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, these elements
-   can overlap each other and the ‘<a href="#z-index"><code
+  <p>The second way is to absolutely position elements using four <em>grid
+   lines</em> to specify the positions of the four margin edges of the
+   element. Like other positioned elements <a href="#CSS21"
+   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, these elements can overlap
+   each other and the ‘<a href="#z-index"><code
    class=property>z-index</code></a>’ property applies to them.
    <!--=================================================================-->
 
@@ -2894,8 +2922,9 @@ <h2 id=slot-pseudo><span class=secno>4. </span>Styling slots: the ‘<a
    href="#slot"><code class=css>::slot()</code></a>’ pseudo-element</h2>
 
   <p>The slots of a <a href="#grid-element."><em>grid element</em></a> can be
-   individually addressed with the <dfn id=slot-pseudo-element.>‘<code
-   class=css>slot()</code>’ pseudo-element.</dfn>
+   individually addressed with the <dfn
+   id=lsquoslotrsquo-pseudo-element.>‘<code class=css>slot()</code>’
+   pseudo-element.</dfn>
 
   <div class=example>
    <p>For example, the following sets the background and vertical alignment
@@ -2987,9 +3016,42 @@ <h2 id=region-based><span class=secno>5. </span>Styling the contents of
     class=css>::first-line</code>’ selects the part of an element that is
     on the first line).
 
-   <p>Inherited properties…
+   <div class=example>
+    <p>For example, this selector selects (the part of) a P that has been
+     flowed into a slot called c:
+
+    <pre>P::flow(b) { color: yellow }</pre>
+   </div>
+
+   <p>Only the following properties apply to the ‘<a href="#flow0"><code
+    class=css>flow()</code></a>’ pseudo-element:… [not display, position,
+    flow, float]
+
+   <p>Inherited properties… [inherit from the document tree, not from the
+    pseudo-element]
 
    <p>Non-inherited properties…
+
+   <div class=issue>
+    <p>The css3-regions draft proposes a different notation, with an at-rule
+     for styling (the parts of) elements that are inside the pseudo-element
+     of another element:
+
+    <pre>@region BODY::slot(c) { P { color: yellow } }
+@region P::first-line { EM { font-weight: normal } }</pre>
+
+    <p>Another possibility is to allow selectors to have parts after the
+     pseudo-element:
+
+    <pre>BODY::slot(c) P { color: yellow }
+P::first-line EM { font-weight: normal }</pre>
+
+    <p>Yet another possibility is a generic ‘<code
+     class=css>region()</code>’ pseudo-element:
+
+    <pre>P::region(BODY::slot(c)) { color: yellow }
+EM::region(P::first-line) { font-weight: normal }</pre>
+   </div>
   </div>
   <!--=================================================================-->
 
@@ -3218,9 +3280,9 @@ <h3 id=vertical-alignment><span class=secno>6.1. </span>Vertical alignment
   <h3 id=paged><span class=secno>6.2. </span>Breaking grid elements across
    pages or columns</h3>
 
-  <p><a href="#grid-element.">Grid elements</a> may be broken across pages,
-   columns or similar regions (including chained slots of another grid
-   element), subject to the ‘<a href="#break-before0"><code
+  <p><span>Grid elements</span> may be broken across pages, columns or
+   similar regions (including chained slots of another grid element), subject
+   to the ‘<a href="#break-before0"><code
    class=property>break-before</code></a>’, ‘<a
    href="#break-after0"><code class=property>break-after</code></a>’ and
    ‘<a href="#break-inside0"><code
@@ -4545,11 +4607,11 @@ <h4 id=use-the-pseudo-class-to-create-additiona><span class=secno>10.2.17.
   <pre>DIV::slot(z) {position: absolute; grid-position: 2 / 2}</pre>
 
   <p>Like other ‘<a href="#slot"><code class=css>::slot()</code></a>’
-   pseudo-elements, it applies to <a href="#grid-element.">grid elements</a>
-   only (the DIV in this example must be a grid element), but unlike other
-   ‘<a href="#slot"><code class=css>::slot()</code></a>’ pseudo-elements
-   it doesn't style an existing slot, but implicitly creates a new one. (It
-   is some kind of error if the name ‘<code class=css>z</code>’ already
+   pseudo-elements, it applies to <span>grid elements</span> only (the DIV in
+   this example must be a grid element), but unlike other ‘<a
+   href="#slot"><code class=css>::slot()</code></a>’ pseudo-elements it
+   doesn't style an existing slot, but implicitly creates a new one. (It is
+   some kind of error if the name ‘<code class=css>z</code>’ already
    exists in the grid template.)
 
   <p>Then you can flow other elements into this slot:
@@ -4678,10 +4740,7 @@ <h4 id=fit-content-vs-auto-vshellip><span class=secno>10.2.21.
    class=css>min-content</code>’), ‘<code
    class=css>max-content</code>’)).
 
-  <p>In this specification, ‘<code class=css>auto</code>’ (not ‘<code
-   class=css>fit-content</code>’) is allowed for column and row sizes and
-   has the meaning of ‘<code class=css>minmax(min-content,
-   max-content)</code>’.
+  <p>An alternative name could be ‘<code class=css>auto</code>’.
    <!--=================================================================-->
 
   <h4 id=vert-align><span class=secno>10.2.22. </span>Vertical alignment
@@ -5184,6 +5243,26 @@ <h2 class=no-num id=index>Index</h2>
   <!--begin-index-->
 
   <ul class=indexlist>
+   <li>‘<code class=css>slot()</code>’ pseudo-element., <a
+    href="#lsquoslotrsquo-pseudo-element."
+    title="‘slot()’ pseudo-element."><strong>4.</strong></a>
+
+   <li>&lt;col-width&gt;, <a href="#ltcol-widthgt"
+    title="&lt;col-width&gt;"><strong>2.2.</strong></a>
+
+   <li><var>&lt;length&gt;</var>, <a href="#ltlengthgt"
+    title="&lt;length&gt;"><strong>1.2.</strong></a>
+
+   <li>&lt;minmax&gt;, <a href="#ltminmaxgt"
+    title="&lt;minmax&gt;"><strong>2.2.</strong></a>, <a href="#ltminmaxgt0"
+    title="&lt;minmax&gt;"><strong>2.3.</strong></a>
+
+   <li>&lt;row-height&gt;, <a href="#ltrow-heightgt"
+    title="&lt;row-height&gt;"><strong>2.3.</strong></a>
+
+   <li><var>&lt;string&gt;</var>, <a href="#ltstringgt"
+    title="&lt;string&gt;"><strong>1.2.</strong></a>
+
    <li>A edge, <a href="#a-edge" title="A edge"><strong>6.1.</strong></a>
 
    <li>anonymous block of a slot, <a href="#anonymous-block"
@@ -5232,9 +5311,6 @@ <h2 class=no-num id=index>Index</h2>
 
    <li>columns, <a href="#columns" title=columns><strong>1.2.</strong></a>
 
-   <li>&lt;col-width&gt;, <a href="#ltcol-widthgt"
-    title="&lt;col-width&gt;"><strong>2.2.</strong></a>
-
    <li>containing block, <a href="#containing-block"
     title="containing block"><strong>3.1.</strong></a>
 
@@ -5263,15 +5339,15 @@ <h2 class=no-num id=index>Index</h2>
    <li>grid ancestor, <a href="#grid-ancestor"
     title="grid ancestor"><strong>2.</strong></a>
 
-   <li>grid-columns, <a href="#grid-columns"
-    title=grid-columns><strong>2.2.</strong></a>
-
    <li>grid element., <a href="#grid-element."
     title="grid element."><strong>2.</strong></a>
 
    <li>grid line,, <a href="#grid-line"
     title="grid line,"><strong>3.2.</strong></a>
 
+   <li>grid-columns, <a href="#grid-columns"
+    title=grid-columns><strong>2.2.</strong></a>
+
    <li>grid-position, <a href="#grid-position0"
     title=grid-position><strong>3.3.</strong></a>
 
@@ -5306,9 +5382,6 @@ <h2 class=no-num id=index>Index</h2>
 
    <li>left, <a href="#left" title=left><strong>1.2.</strong></a>
 
-   <li><a href="#ltlengthgt"><var>&lt;length&gt;</var></a>, <a
-    href="#ltlengthgt" title="&lt;length&gt;"><strong>1.2.</strong></a>
-
    <li>margin, <a href="#margin" title=margin><strong>1.2.</strong></a>
 
    <li>margin-left, <a href="#margin-left"
@@ -5317,10 +5390,6 @@ <h2 class=no-num id=index>Index</h2>
    <li>margin-right, <a href="#margin-right"
     title=margin-right><strong>1.2.</strong></a>
 
-   <li>&lt;minmax&gt;, <a href="#ltminmaxgt"
-    title="&lt;minmax&gt;"><strong>2.2.</strong></a>, <a href="#ltminmaxgt0"
-    title="&lt;minmax&gt;"><strong>2.3.</strong></a>
-
    <li>non-interactive, <a href="#non-interactive"
     title=non-interactive><strong>1.2.</strong></a>
 
@@ -5344,32 +5413,22 @@ <h2 class=no-num id=index>Index</h2>
 
    <li>right, <a href="#right" title=right><strong>1.2.</strong></a>
 
-   <li>&lt;row-height&gt;, <a href="#ltrow-heightgt"
-    title="&lt;row-height&gt;"><strong>2.3.</strong></a>
-
    <li>slot, <a href="#slot" title=slot><strong>2.1.</strong></a>
 
-   <li>‘<a href="#slot"><code class=css>slot()</code></a>’
-    pseudo-element., <a href="#slot-pseudo-element."
-    title="''slot()'' pseudo-element."><strong>4.</strong></a>
-
-   <li><a href="#ltstringgt"><var>&lt;string&gt;</var></a>, <a
-    href="#ltstringgt" title="&lt;string&gt;"><strong>1.2.</strong></a>
-
    <li>top, <a href="#top" title=top><strong>1.2.</strong></a>
 
    <li>vertical, <a href="#vertical-element"
     title=vertical><strong>1.2.</strong></a>
 
-   <li>vertical-align, <a href="#vertical-align"
-    title=vertical-align><strong>1.2.</strong></a>
-
    <li>vertical element, <a href="#vertical-element"
     title="vertical element"><strong>1.2.</strong></a>
 
    <li>vertical writing mode, <a href="#vertical-writing-mode"
     title="vertical writing mode"><strong>1.2.</strong></a>
 
+   <li>vertical-align, <a href="#vertical-align"
+    title=vertical-align><strong>1.2.</strong></a>
+
    <li>width, <a href="#width" title=width><strong>1.2.</strong></a>
 
    <li>writing-mode, <a href="#writing-mode"