- From: Bert Bos via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 15 Feb 2012 13:35:27 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-layout
In directory hutz:/tmp/cvs-serv3641
Modified Files:
new.src.html
Log Message:
Added some text about default slots and some issues.
Index: new.src.html
===================================================================
RCS file: /sources/public/csswg/css3-layout/new.src.html,v
retrieving revision 1.8
retrieving revision 1.9
diff -u -d -r1.8 -r1.9
--- new.src.html 14 Feb 2012 20:38:33 -0000 1.8
+++ new.src.html 15 Feb 2012 13:35:24 -0000 1.9
@@ -702,6 +702,11 @@
<p>This module replaces and extends the <var class="replaceme">SUMMARIZE HERE</var>
features defined in [[!CSS21]] sections <var class="replaceme">W.X and Y.Z</var>.
+
+ <p>See [[!CSS3PAGE]] for the definition of <a
+ href="http://www.w3.org/TR/css3-multicol/#multi-column-element"
+ ><dfn>multi-column element.</dfn></a>
+
<h3 id="values">
Values</h3>
@@ -844,7 +849,10 @@
<p>An element is a <dfn>grid element</dfn> (i.e., it defines a grid
for its descendants) if its 'display' value is ''grid'' or ''inline-grid''.
-
+
+ <p>The <dfn>grid ancestor</dfn> of an element is the nearest
+ ancestor that is a grid element.
+
<table class="propdef">
<tr>
<th>Name:
@@ -868,10 +876,19 @@
</dl>
<div class="issue">
- <p> Should grid elements be created automatically without using 'display'?
- 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 ''display: table''
- or ''display: flex''?
+ <p>Should grid elements be created automatically without using
+ 'display'? 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 ''display: table'' or 'display: flexbox' removes any
+ grid, but setting 'display: table-cell' or 'display: list-item'
+ 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
+ 'display' ('table-cell-grid', 'list-item-grid'…), 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:
@@ -900,6 +917,7 @@
<p class=issue>Use 'fr' unit (as in css3-grid-align) instead of '*' (as
in css3-layout).
+
<h3 id="grid-lines-tracks">
Grid Lines and Tracks</h3>
@@ -949,7 +967,7 @@
<p>The 'grid-template' 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.
+ <em>default slot,</em> for unpositioned content.
<table class=propdef>
<tr>
@@ -986,7 +1004,7 @@
<td><abbr title="follows order of property value definition">per
grammar</abbr>
</table>
-
+
<p>Each string consist of one or more asterisks (“*”), letters,
periods (“.”), spaces and tabs. Each string represents one row in the
template, each symbol other than a space or tab represents one
@@ -998,7 +1016,7 @@
<dt><letter>
<dd>Named slot for content
<dt>''*'' (asterisk)
- <dd>Default slot for content.
+ <dd>Default slot for content (explained below).
<dt>. (period)
<dd>Blank space.
</dl>
@@ -1022,11 +1040,27 @@
<p>Each slot (letter or “*”) acts as a block element for its
contents.
+ <p>If the value is ''none'', then no explicit slots are defined. If
+ the element is a <em>grid element,</em> then the element instead has
+ an <dfn>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
+ 'grid-columns' and 'grid-rows' are not both ''auto''.
+
<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>
Specifying the widths of columns: 'grid-columns'</h3>
@@ -1200,6 +1234,53 @@
<p>The 'grid-rows' property specifies the sizes of the rows of a grid. It
takes the same values as 'grid-columns'.
+<h3>Default slots</h3>
+
+ <p>Every <span>grid element</span> has a <dfn>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
+ 'grid-template: "..c" "abb" "abb"', then “c” is the default slot.
+
+ <p>If the grid has an <em>implicit template</em> (i.e.,
+ 'grid-template' is ''none''), 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 '[grid-]position') 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">
Specifying the size of grid tracks</h3>
@@ -1330,7 +1411,7 @@
<h3 id="slot-widths">
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
''max-content'' and ''min-content'' both stand for the <i>block dimension</i>
[[!CSS3-WRITING-MODES]] of the slot's content.
@@ -1339,10 +1420,9 @@
<h3 id="slot-heights">
Computing the height of the slots</h3>
- <p class=issue>If a slot has a horizontal writing mode, then
- the values ''max-content'' and ''min-content'' both stand for
- the <em>block dimension</em> [[!CSS3-WRITING-MODES]] of the slot's
- content.
+ <p>If a slot has a horizontal writing mode, then the values
+ ''max-content'' and ''min-content'' both stand for the <em>block
+ dimension</em> [[!CSS3-WRITING-MODES]] of the slot's content.
<p>[Solve set of constraints as in css3-layout]
@@ -1457,6 +1537,50 @@
(<identifier>) or by creating an anonymous slot with the given
row and column coordinates.
+<p class=issue>It is also possible to re-use 'position' instead of a
+new 'grid-position' property. Advantages: (1) no new property to
+learn, (2) no need to define whether/how 'position' works for elements
+positioned in a grid. Disadvantages: can not set 'position: relative'
+on an element positioned in a grid.
+
+ <p>Values have the following meaning:
+
+ <dl>
+ <dt>A letter <dd>…
+
+ <dt>'*' <dd>Positions the element in the default slot. <span
+ class=note>Note that the default slot may be implicit, i.e., every
+ <em>grid element</em> has a default slot, even if '*' does not
+ explicitly occur in the value of 'grid-template'</span>
+
+ <dt>… <dd>…
+ </dl>
+
+
+
+<div class=issue>
+<p>If the letter refers to a slot that doesn't exist in the element's
+<em>grid ancestor</em> (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
+ '[grid-]position: *' 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
@@ -1608,6 +1732,40 @@
<p>'grid-row' and 'grid-column' values that refer to an undefined
line or slot will compute to ''auto''.
+
+<h3>Floating elements inside templates</h3>
+
+ <p>An element may be positioned inside a template (with
+ '[grid-]position') and be a floating element ('float' 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 [[!CSS3PAGE]], the slot acts as a
+ page.
+
+ <p class=example>For example, if an element has 'float: top', 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 <span>grid ancestor</span>).
+
+
+ the value of 'float' 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 'position'
+ 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>Styling named slots: the ''::slot()'' pseudo-element</h2>
<p>The slots of a <i>template element</i> can be individually
Received on Wednesday, 15 February 2012 13:35:31 UTC