- From: Bert Bos via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 15 Feb 2012 13:35:58 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-layout
In directory hutz:/tmp/cvs-serv3677
Modified Files:
new.html
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
2012</h2>
<dl>
<dt>This version:
<dd><a
- 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: ‘<code
class=property>grid-rows</code>’</a>
- <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: ‘<code class=property>fr</code>’</a>
<li><a href="#computed-values-grid-rows-and-columns"><span
- class=secno>3.5.2. </span> ‘<code
+ class=secno>3.6.2. </span> ‘<code
class=css>getComputedStyle()</code>’ values for ‘<code
class=property>grid-rows</code>’ and ‘<code
class=property>grid-columns</code>’</a>
</ul>
- <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
‘<code class=property>grid</code>’ shorthand property</a>
</ul>
@@ -256,6 +259,9 @@
Positioning by row and column: the ‘<code
class=property>grid-row</code>’ and ‘<code
class=property>grid-column</code>’ properties</a>
+
+ <li><a href="#floating-elements-inside-templates"><span class=secno>4.3.
+ </span>Floating elements inside templates</a>
</ul>
<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 @@
‘<a href="#grid"><code class=css>grid</code></a>’ or
‘<code class=css>inline-grid</code>’.
+ <p>The <dfn id=grid-ancestor>grid ancestor</dfn> of an element is the
+ nearest ancestor that is a grid element.
+
<table class=propdef>
<tbody>
<tr>
@@ -1135,12 +1149,24 @@
</dl>
<div class=issue>
- <p> Should grid elements be created automatically without using ‘<a
- href="#display0"><code class=property>display</code></a>’? 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
- ‘<code class=css>display: table</code>’ or ‘<code
- class=css>display: flex</code>’?
+ <p>Should grid elements be created automatically without using ‘<a
+ href="#display0"><code class=property>display</code></a>’? 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 ‘<code
+ class=css>display: table</code>’ or ‘<code class=css>display:
+ flexbox</code>’ removes any grid, but setting ‘<code
+ class=css>display: table-cell</code>’ or ‘<code
+ class=css>display: list-item</code>’ 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…) to contain a grid, without
+ extra keywords for ‘<a href="#display0"><code
+ class=property>display</code></a>’ (‘<code
+ class=property>table-cell-grid</code>’, ‘<code
+ class=property>list-item-grid</code>’…), 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 ‘<a href="#grid-template"><code
class=property>grid-template</code></a>’ 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>
<tbody>
@@ -1319,7 +1346,7 @@
<dt>‘<code class=css>*</code>’ (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 ‘<code class=css>none</code>’, 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>
+"***…***"
+"***…***"
+⋮
+"***…***"
+</pre>
+
+ <p class=note>Note that an element is a grid element in this case if
+ ‘<a href="#grid-columns"><code
+ class=property>grid-columns</code></a>’ and ‘<a
+ href="#grid-rows"><code class=property>grid-rows</code></a>’ are not
+ both ‘<code class=css>auto</code>’.
+
<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: ‘<a href="#grid-columns"><code
class=property>grid-columns</code></a>’</h3>
@@ -1584,7 +1629,64 @@
the rows of a grid. It takes the same values as ‘<a
href="#grid-columns"><code class=property>grid-columns</code></a>’.
- <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 ‘<code
+ class=css>grid-template: "..c" "abb" "abb"</code>’, then “c” is
+ the default slot.
+
+ <p>If the grid has an <a href="#implicit-template"><em>implicit
+ template</em></a> (i.e., ‘<a href="#grid-template"><code
+ class=property>grid-template</code></a>’ is ‘<code
+ class=css>none</code>’), 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 ‘<a href="#grid-position"><code
+ class=css>[grid-]position</code></a>’) 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>
+<DIV STYLE="grid-template: "ab*">
+ <IMG STYLE="position: a" SRC="image.png" ALT="Foo">
+ This is an
+ <EM STYLE="position: *">emphasized</EM>
+ <EM STYLE="position: b">(note well!)</EM>
+ sentence.
+ <
+</DIV>
+</pre>
+
+ <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>
<p>Where:
@@ -1689,7 +1791,7 @@
<!-- -->grid-rows: calc(4em - 5px)</pre>
</div>
- <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:
‘<code class=property>fr</code>’</h4>
<p>Fraction values are new units applicable to the ‘<a
@@ -1730,7 +1832,7 @@
by each <a href="#grid-track">Grid Track</a>‘<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> ’‘<code
class=css>getComputedStyle()</code>’‘<code class=css> values
for </code>’grid-rows' and ‘<a href="#grid-columns"><code
@@ -1753,10 +1855,10 @@
href="#grid-rows"><code class=property>grid-rows</code></a>’ 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
‘<code class=css>max-content</code>’ and ‘<code
class=css>min-content</code>’ 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
- ‘<code class=css>max-content</code>’ and ‘<code
+ <p>If a slot has a horizontal writing mode, then the values ‘<code
+ class=css>max-content</code>’ and ‘<code
class=css>min-content</code>’ 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 ‘<a
+ <h3 id=grid-shorthand><span class=secno>3.9. </span> The ‘<a
href="#grid"><code class=property>grid</code></a>’ shorthand
property</h3>
@@ -1938,6 +2040,60 @@
(<identifier>) or by creating an anonymous slot with the given row
and column coordinates.
+ <p class=issue>It is also possible to re-use ‘<code
+ class=property>position</code>’ instead of a new ‘<a
+ href="#grid-position"><code class=property>grid-position</code></a>’
+ property. Advantages: (1) no new property to learn, (2) no need to define
+ whether/how ‘<code class=property>position</code>’ works for
+ elements positioned in a grid. Disadvantages: can not set ‘<code
+ class=css>position: relative</code>’ on an element positioned in a
+ grid.
+
+ <p>Values have the following meaning:
+
+ <dl>
+ <dt>A letter
+
+ <dd>…
+
+ <dt>‘<code class=css>*</code>’
+
+ <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 ‘<code class=css>*</code>’ does not explicitly occur in
+ the value of ‘<a href="#grid-template"><code
+ class=property>grid-template</code></a>’</span>
+
+ <dt>…
+
+ <dd>…
+ </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 ‘<a
+ href="#grid-position"><code class=css>[grid-]position:
+ *</code></a>’ 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
‘<code class=css>auto</code>’.
+ <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 ‘<a
+ href="#grid-position"><code class=css>[grid-]position</code></a>’)
+ and be a floating element (‘<code class=property>float</code>’
+ 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 ‘<code
+ class=css>float: top</code>’, 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 ‘<code
+ class=property>float</code>’ 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 ‘<code
+ class=property>position</code>’ 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
‘<a href="#slot0"><code class=css>::slot()</code></a>’
pseudo-element</h2>
@@ -2700,6 +2892,16 @@
</dd>
<!---->
+ <dt id=CSS3PAGE>[CSS3PAGE]
+
+ <dd>Hå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"
title="''center''"><strong>6.1.</strong></a>
+ <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>‘<code class=css>end</code>’, <a href="#end"
title="''end''"><strong>6.1.</strong></a>, <a href="#end0"
title="''end''"><strong>6.1.</strong></a>
- <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>‘<a href="#grid"><code class=css>grid</code></a>’, <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"
title=grid-column><strong>4.2.</strong></a>
@@ -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>‘<code class=css>inline-grid</code>’, <a
href="#value-def-display-inline-grid"
title="''inline-grid''"><strong>3.</strong></a>
@@ -2856,6 +3067,9 @@
<li><minmax>, <a href="#ltminmaxgt"
title="<minmax>"><strong>3.3.</strong></a>
+ <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