W3C home > Mailing lists > Public > public-css-commits@w3.org > February 2012

csswg/css3-layout new.html,1.6,1.7

From: Bert Bos via cvs-syncmail <cvsmail@w3.org>
Date: Wed, 15 Feb 2012 13:35:58 +0000
To: public-css-commits@w3.org
Message-Id: <E1Rxf1a-0000yc-UB@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-layout
In directory hutz:/tmp/cvs-serv3677

Modified Files:
Log Message:
Generated. Do not edit!

Index: new.html
RCS file: /sources/public/csswg/css3-layout/new.html,v
retrieving revision 1.6
retrieving revision 1.7
diff -u -d -r1.6 -r1.7
--- new.html	14 Feb 2012 20:38:33 -0000	1.6
+++ new.html	15 Feb 2012 13:35:56 -0000	1.7
@@ -36,14 +36,14 @@
    <h1>CSS Grid Template Module</h1>
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 14 February
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 15 February
     <dt>This version:
-     href="http://www.w3.org/TR/2012/ED-css3-grid-template-20120214/">http://www.w3.org/TR/2012/ED-css3-grid-template-20120214/</a>
+     href="http://www.w3.org/TR/2012/ED-css3-grid-template-20120215/">http://www.w3.org/TR/2012/ED-css3-grid-template-20120215/</a>
     <dt>Latest version:
@@ -222,26 +222,29 @@
       the height of rows: &lsquo;<code
-     <li><a href="#track-sizing"><span class=secno>3.5. </span> Specifying
+     <li><a href="#default-slots"><span class=secno>3.5. </span>Default
+      slots</a>
+     <li><a href="#track-sizing"><span class=secno>3.6. </span> Specifying
       the size of grid tracks</a>
       <ul class=toc>
-       <li><a href="#fraction-values-fr"><span class=secno>3.5.1. </span>
+       <li><a href="#fraction-values-fr"><span class=secno>3.6.1. </span>
         Fraction Values: &lsquo;<code class=property>fr</code>&rsquo;</a>
        <li><a href="#computed-values-grid-rows-and-columns"><span
-        class=secno>3.5.2. </span> &lsquo;<code
+        class=secno>3.6.2. </span> &lsquo;<code
         class=css>getComputedStyle()</code>&rsquo; values for &lsquo;<code
         class=property>grid-rows</code>&rsquo; and &lsquo;<code
-     <li><a href="#slot-widths"><span class=secno>3.6. </span> Calculating
+     <li><a href="#slot-widths"><span class=secno>3.7. </span> Calculating
       the widths of the slots</a>
-     <li><a href="#slot-heights"><span class=secno>3.7. </span> Computing the
+     <li><a href="#slot-heights"><span class=secno>3.8. </span> Computing the
       height of the slots</a>
-     <li><a href="#grid-shorthand"><span class=secno>3.8. </span> The
+     <li><a href="#grid-shorthand"><span class=secno>3.9. </span> The
       &lsquo;<code class=property>grid</code>&rsquo; shorthand property</a>
@@ -256,6 +259,9 @@
       Positioning by row and column: the &lsquo;<code
       class=property>grid-row</code>&rsquo; and &lsquo;<code
       class=property>grid-column</code>&rsquo; properties</a>
+     <li><a href="#floating-elements-inside-templates"><span class=secno>4.3.
+      </span>Floating elements inside templates</a>
    <li><a href="#slot-pseudo"><span class=secno>5. </span>Styling named
@@ -944,6 +950,11 @@
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> sections <var
    class=replaceme>W.X and Y.Z</var>.
+  <p>See <a href="#CSS3PAGE"
+   rel=biblioentry>[CSS3PAGE]<!--{{!CSS3PAGE}}--></a> for the definition of
+   <a href="http://www.w3.org/TR/css3-multicol/#multi-column-element"><dfn
+   id=multi-column-element.>multi-column element.</dfn></a>
   <h3 id=values><span class=secno>1.8. </span> Values</h3>
   <p>This specification follows the <a
@@ -1100,6 +1111,9 @@
    &lsquo;<a href="#grid"><code class=css>grid</code></a>&rsquo; or
    &lsquo;<code class=css>inline-grid</code>&rsquo;.
+  <p>The <dfn id=grid-ancestor>grid ancestor</dfn> of an element is the
+   nearest ancestor that is a grid element.
   <table class=propdef>
@@ -1135,12 +1149,24 @@
   <div class=issue>
-   <p> Should grid elements be created automatically without using &lsquo;<a
-    href="#display0"><code class=property>display</code></a>&rsquo;? This
-    makes it easier to create a grid element, but could create some confusing
-    dynamics, e.g. what happens if someone later in the cascade sets
-    &lsquo;<code class=css>display: table</code>&rsquo; or &lsquo;<code
-    class=css>display: flex</code>&rsquo;?
+   <p>Should grid elements be created automatically without using &lsquo;<a
+    href="#display0"><code class=property>display</code></a>&rsquo;? On the
+    one hand, this (a) is not consistent with how flex boxes are created and
+    (b) could create some confusing dynamics (e.g., setting &lsquo;<code
+    class=css>display: table</code>&rsquo; or &lsquo;<code class=css>display:
+    flexbox</code>&rsquo; removes any grid, but setting &lsquo;<code
+    class=css>display: table-cell</code>&rsquo; or &lsquo;<code
+    class=css>display: list-item</code>&rsquo; keeps the grid); but (1)
+    requires only one instead of two properties to create a grid element, (2)
+    allows other block container elements (such as table cells, table
+    captions, list items, flex items&hellip;) to contain a grid, without
+    extra keywords for &lsquo;<a href="#display0"><code
+    class=property>display</code></a>&rsquo; (&lsquo;<code
+    class=property>table-cell-grid</code>&rsquo;, &lsquo;<code
+    class=property>list-item-grid</code>&rsquo;&hellip;), and (3) is
+    consistent with how <a
+    href="http://www.w3.org/TR/css3-multicol/#multi-column-element">multicolumn
+    elements</a> are created.
    <p>Proposed text:
@@ -1246,7 +1272,8 @@
   <p>The &lsquo;<a href="#grid-template"><code
    class=property>grid-template</code></a>&rsquo; property implicitly assigns
    a grid to an element and defines named slots in the grid. It can also
-   designate a slot as the default slot, for unpositioned content.
+   designate a slot as the <a href="#default-slot."><em>default
+   slot,</em></a> for unpositioned content.
   <table class=propdef>
@@ -1319,7 +1346,7 @@
    <dt>&lsquo;<code class=css>*</code>&rsquo; (asterisk)
-   <dd>Default slot for content.
+   <dd>Default slot for content (explained below).
    <dt>. (period)
@@ -1344,12 +1371,30 @@
   <p>Each slot (letter or “*”) acts as a block element for its contents.
+  <p>If the value is &lsquo;<code class=css>none</code>&rsquo;, then no
+   explicit slots are defined. If the element is a <a
+   href="#grid-element1"><em>grid element,</em></a> then the element instead
+   has an <dfn id=implicit-template>implicit template</dfn> consisting of a
+   single, anonymous slot. I.e., for a grid element with <var>N</var> columns
+   and <var>M</var> rows, the implicit template is equivalent to <var>M</var>
+   strings of <var>N</var> asterisks:
+  <pre>
+  <p class=note>Note that an element is a grid element in this case if
+   &lsquo;<a href="#grid-columns"><code
+   class=property>grid-columns</code></a>&rsquo; and &lsquo;<a
+   href="#grid-rows"><code class=property>grid-rows</code></a>&rsquo; are not
+   both &lsquo;<code class=css>auto</code>&rsquo;.
   <p class=issue>Are grid templates logically oriented (relative to writing
    mode), or absolutely-oriented?
-  <p class=issue>What happens to unpositioned content if there is no default
-   slot? Ideally, it shouldn't disappear...
   <h3 id=grid-column-sizes><span class=secno>3.3. </span> Specifying the
    widths of columns: &lsquo;<a href="#grid-columns"><code
@@ -1584,7 +1629,64 @@
    the rows of a grid. It takes the same values as &lsquo;<a
    href="#grid-columns"><code class=property>grid-columns</code></a>&rsquo;.
-  <h3 id=track-sizing><span class=secno>3.5. </span> Specifying the size of
+  <h3 id=default-slots><span class=secno>3.5. </span>Default slots</h3>
+  <p>Every <a href="#grid-element1">grid element</a> has a <dfn
+   id=default-slot.>default slot.</dfn> If there is an asterisk (“*”) in
+   the template, then that slot is the default. If there is no asterisk, then
+   the first letter in the template defines the default slot.
+  <p class=example>For example, if the template is defined by &lsquo;<code
+   class=css>grid-template: "..c" "abb" "abb"</code>&rsquo;, then “c” is
+   the default slot.
+  <p>If the grid has an <a href="#implicit-template"><em>implicit
+   template</em></a> (i.e., &lsquo;<a href="#grid-template"><code
+   class=property>grid-template</code></a>&rsquo; is &lsquo;<code
+   class=css>none</code>&rsquo;), then the default slot is the single,
+   anonymous slot of that implicit template.
+  <p>All content of a grid element that is not inside another flow (e.g.,
+   because it is inside a float, absolutely positioned, or positioned in a
+   different slot with &lsquo;<a href="#grid-position"><code
+   class=css>[grid-]position</code></a>&rsquo;) is positioned in the default
+   flow.
+  <p>In particular, any text content of the grid element itself is positioned
+   in the default flow.
+  <div class=example>
+   <p>For example, in this document fragment
+   <pre>
+&lt;DIV STYLE="grid-template: "ab*">
+ &lt;IMG STYLE="position: a" SRC="image.png" ALT="Foo">
+ This is an
+ &lt;EM STYLE="position: *">emphasized&lt;/EM>
+ &lt;EM STYLE="position: b">(note well!)&lt;/EM>
+ sentence.
+ &lt;
+   <p>The three slots of the grid contain:
+   <dl>
+    <dt>Slot a
+    <dd>The image
+    <dt>Slot b
+    <dd>The text “(note well!)”
+    <dt>Default slot
+    <dd>The text “This is an <em>emphasized</em> sentence.”
+   </dl>
+  </div>
+  <h3 id=track-sizing><span class=secno>3.6. </span> Specifying the size of
    grid tracks</h3>
@@ -1689,7 +1791,7 @@
 <!-- -->grid-rows: calc(4em - 5px)</pre>
-  <h4 id=fraction-values-fr><span class=secno>3.5.1. </span> Fraction Values:
+  <h4 id=fraction-values-fr><span class=secno>3.6.1. </span> Fraction Values:
    &lsquo;<code class=property>fr</code>&rsquo;</h4>
   <p>Fraction values are new units applicable to the &lsquo;<a
@@ -1730,7 +1832,7 @@
    by each <a href="#grid-track">Grid Track</a>&lsquo;<code class=css>s
    <code>fraction</code> to determine its final size. </code>
-  <h4 id=computed-values-grid-rows-and-columns><span class=secno>3.5.2.
+  <h4 id=computed-values-grid-rows-and-columns><span class=secno>3.6.2.
    </span> &rsquo;&lsquo;<code
    class=css>getComputedStyle()</code>&rsquo;&lsquo;<code class=css> values
    for </code>&rsquo;grid-rows' and &lsquo;<a href="#grid-columns"><code
@@ -1753,10 +1855,10 @@
    href="#grid-rows"><code class=property>grid-rows</code></a>&rsquo; or
    grid-columns' property.
-  <h3 id=slot-widths><span class=secno>3.6. </span> Calculating the widths of
+  <h3 id=slot-widths><span class=secno>3.7. </span> Calculating the widths of
    the slots</h3>
-  <p class=issue>If a slot vertical writing mode, then the values
+  <p class=issue>If a slot has a vertical writing mode, then the values
    &lsquo;<code class=css>max-content</code>&rsquo; and &lsquo;<code
    class=css>min-content</code>&rsquo; both stand for the <i>block
    dimension</i> <a href="#CSS3-WRITING-MODES"
@@ -1765,11 +1867,11 @@
   <p>[Solve set of constraints as in css3-layout]
-  <h3 id=slot-heights><span class=secno>3.7. </span> Computing the height of
+  <h3 id=slot-heights><span class=secno>3.8. </span> Computing the height of
    the slots</h3>
-  <p class=issue>If a slot has a horizontal writing mode, then the values
-   &lsquo;<code class=css>max-content</code>&rsquo; and &lsquo;<code
+  <p>If a slot has a horizontal writing mode, then the values &lsquo;<code
+   class=css>max-content</code>&rsquo; and &lsquo;<code
    class=css>min-content</code>&rsquo; both stand for the <em>block
    dimension</em> <a href="#CSS3-WRITING-MODES"
    rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a> of
@@ -1777,7 +1879,7 @@
   <p>[Solve set of constraints as in css3-layout]
-  <h3 id=grid-shorthand><span class=secno>3.8. </span> The &lsquo;<a
+  <h3 id=grid-shorthand><span class=secno>3.9. </span> The &lsquo;<a
    href="#grid"><code class=property>grid</code></a>&rsquo; shorthand
@@ -1938,6 +2040,60 @@
    (&lt;identifier&gt;) or by creating an anonymous slot with the given row
    and column coordinates.
+  <p class=issue>It is also possible to re-use &lsquo;<code
+   class=property>position</code>&rsquo; instead of a new &lsquo;<a
+   href="#grid-position"><code class=property>grid-position</code></a>&rsquo;
+   property. Advantages: (1) no new property to learn, (2) no need to define
+   whether/how &lsquo;<code class=property>position</code>&rsquo; works for
+   elements positioned in a grid. Disadvantages: can not set &lsquo;<code
+   class=css>position: relative</code>&rsquo; on an element positioned in a
+   grid.
+  <p>Values have the following meaning:
+  <dl>
+   <dt>A letter
+   <dd>&hellip;
+   <dt>&lsquo;<code class=css>*</code>&rsquo;
+   <dd>Positions the element in the default slot. <span class=note>Note that
+    the default slot may be implicit, i.e., every <a
+    href="#grid-element1"><em>grid element</em></a> has a default slot, even
+    if &lsquo;<code class=css>*</code>&rsquo; does not explicitly occur in
+    the value of &lsquo;<a href="#grid-template"><code
+    class=property>grid-template</code></a>&rsquo;</span>
+   <dt>&hellip;
+   <dd>&hellip;
+  </dl>
+  <div class=issue>
+   <p>If the letter refers to a slot that doesn't exist in the element's <a
+    href="#grid-ancestor"><em>grid ancestor</em></a> (or there is no grid
+    ancestor) what is the effect?
+   <ol>
+    <li>The element is not positioned (i.e., it is positioned in the current
+     flow).
+    <li>The letter is looked for in the grid ancestor's own grid ancestor,
+     etc., recursively. If no slot of that name is found in any of them, then
+     the element is not positioned.
+    <li>The element is positioned in the default slot (i.e., as if &lsquo;<a
+     href="#grid-position"><code class=css>[grid-]position:
+     *</code></a>&rsquo; had been specified); or not positioned at all, in
+     case there is no grid ancestor.
+    <li>The letter is looked for in the grid ancestor's own grid ancestor,
+     etc., recursively. If no slot of that name is found in any of them, then
+     the element is positioned in the default slot.
+   </ol>
+  </div>
   <div class=issue>
    <p>css3-grid-align allows to define a position either by saying how many
     rows/columns it spans, or by saying at which row and column it ends. Some
@@ -2138,6 +2294,42 @@
    values that refer to an undefined line or slot will compute to
    &lsquo;<code class=css>auto</code>&rsquo;.
+  <h3 id=floating-elements-inside-templates><span class=secno>4.3.
+   </span>Floating elements inside templates</h3>
+  <p>An element may be positioned inside a template (with &lsquo;<a
+   href="#grid-position"><code class=css>[grid-]position</code></a>&rsquo;)
+   and be a floating element (&lsquo;<code class=property>float</code>&rsquo;
+   property) at the same time. The following cases must be distinguished:
+  <dl>
+   <dt><a
+    href="http://www.w3.org/TR/2011/WD-css3-gcpm-20111129/#page-floats">Page
+    floats</a>
+   <dd>
+    <p>For the purpose of page floats <a href="#CSS3PAGE"
+     rel=biblioentry>[CSS3PAGE]<!--{{!CSS3PAGE}}--></a>, the slot acts as a
+     page.
+    <p class=example>For example, if an element has &lsquo;<code
+     class=css>float: top</code>&rsquo;, it floats to the top of the slot (or
+     the top of the current column, if it has a <span>multicolumn
+     element</span> as ancestor that is nearer than its <a
+     href="#grid-ancestor">grid ancestor</a>). the value of &lsquo;<code
+     class=property>float</code>&rsquo; specifies that the element floats to
+     the top or bottom of the page (in a horizontal writing mode) or the left
+     or right of the page (in a vertical writing mode), the &lsquo;<code
+     class=property>position</code>&rsquo; property doesn't apply.
+   <dt>Other floats
+   <dd>
+    <p>In other cases, the element floats normally within its containing
+     block, which in this case is its slot in the template (as defined <a
+     href="#containing-block">above</a>).
+  </dl>
   <h2 id=slot-pseudo><span class=secno>5. </span>Styling named slots: the
    &lsquo;<a href="#slot0"><code class=css>::slot()</code></a>&rsquo;
@@ -2700,6 +2892,16 @@
+   <dt id=CSS3PAGE>[CSS3PAGE]
+   <dd>H&#229;kon Wium Lie; Melinda Grant. <a
+    href="http://www.w3.org/TR/2006/WD-css3-page-20061010"><cite>CSS3 Module:
+    Paged Media.</cite></a> 10 October 2006. W3C Working Draft. (Work in
+    progress.) URL: <a
+    href="http://www.w3.org/TR/2006/WD-css3-page-20061010">http://www.w3.org/TR/2006/WD-css3-page-20061010</a>
+    </dd>
+   <!---->
    <dt id=CSS3TBL>[CSS3TBL]
    <dd>Bert Bos; David Hyatt. <cite>CSS3 Tables Module.</cite> (forthcoming).
@@ -2803,17 +3005,23 @@
     title="''center''"><strong>6.1.</strong></a>, <a href="#center0"
+   <li>default slot., <a href="#default-slot."
+    title="default slot."><strong>3.5.</strong></a>
    <li>display, <a href="#display0" title=display><strong>3.</strong></a>
    <li>&lsquo;<code class=css>end</code>&rsquo;, <a href="#end"
     title="''end''"><strong>6.1.</strong></a>, <a href="#end0"
-   <li>grid, <a href="#grid" title=grid><strong>3.8.</strong></a>
+   <li>grid, <a href="#grid" title=grid><strong>3.9.</strong></a>
    <li>&lsquo;<a href="#grid"><code class=css>grid</code></a>&rsquo;, <a
     href="#value-def-display--grid" title="''grid''"><strong>3.</strong></a>
+   <li>grid ancestor, <a href="#grid-ancestor"
+    title="grid ancestor"><strong>3.</strong></a>
    <li>grid-column, <a href="#grid-column"
@@ -2849,6 +3057,9 @@
    <li>Grid Tracks, <a href="#grid-track"
     title="Grid Tracks"><strong>2.0.1.</strong></a>
+   <li>implicit template, <a href="#implicit-template"
+    title="implicit template"><strong>3.2.</strong></a>
    <li>&lsquo;<code class=css>inline-grid</code>&rsquo;, <a
@@ -2856,6 +3067,9 @@
    <li>&lt;minmax&gt;, <a href="#ltminmaxgt"
+   <li>multi-column element., <a href="#multi-column-element."
+    title="multi-column element."><strong>1.7.</strong></a>
    <li>renderer, <a href="#renderer" title=renderer><strong>7.2.</strong></a>
Received on Wednesday, 15 February 2012 13:36:07 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 20:44:50 UTC