- From: Bert Bos via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 14 Feb 2012 00:37:16 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-layout
In directory hutz:/tmp/cvs-serv28946
Modified Files:
new.src.html
Log Message:
Some more text, some examples adapted to the new syntaxes
Index: new.src.html
===================================================================
RCS file: /sources/public/csswg/css3-layout/new.src.html,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -d -r1.1 -r1.2
--- new.src.html 13 Feb 2012 15:22:02 -0000 1.1
+++ new.src.html 14 Feb 2012 00:37:14 -0000 1.2
@@ -41,7 +41,7 @@
<dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/[SHORTNAME]/</a>
<dt>Editor's draft:
- <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</var></a>
+ <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
<dt>Previous version:
<dd><a href="http://www.w3.org/PreviousVersionURI">
@@ -169,7 +169,7 @@
<p>The mapping is done with the 'position' property, which specifies
in this case into which slot of the template the element goes. The
-template itself is specified on the 'display' property of some
+template itself is specified on the 'grid' property of some
ancestor of the elements to remap.
<div class=example>
@@ -186,8 +186,8 @@
<pre>
<style type="text/css">
- dl { display: "ab"
- "cd" }
+ dl { grid: "ab"
+ "cd" }
#sym1 { position: a }
#lab1 { position: b }
#sym2 { position: c }
@@ -212,8 +212,8 @@
<pre>
@media all
{
- body { display: "aaa"
- "bcd" }
+ body { grid: "aaa"
+ "bcd" }
#head { position: a }
#nav { position: b }
#adv { position: c }
@@ -221,9 +221,9 @@
}
@media all and (max-width: 500px)
{
- body { display: "a"
- "b"
- "c" }
+ body { grid: "a"
+ "b"
+ "c" }
#head { position: a }
#nav { position: b }
#adv { display: none }
@@ -238,7 +238,7 @@
“zunflower” design</a> of the Zen Garden could be done:
<pre>
-#container { display: "abc" }
+#container { grid: "abc" }
#intro { position: a; margin-right: -2em; box-shadow: 0.5em 0.5em 0.5em }
#supportingText { position: b; box-shadow: 0.5em 0.5em 0.5em }
#linkList { position: c }
@@ -277,7 +277,7 @@
contain this:
<pre>
-.group {display: "abc"}
+.group {grid: "abc"}
.group > div {position: a}
.group > div + div {position: b}
.group > div + div + div {position: c}
@@ -291,7 +291,7 @@
<p>That is not needed for the template, but, on the other hand, if we
want the template to fit its contents, we would need to say so:
-<pre>.group {display: "abc"; width: fit-content}</pre>
+<pre>.group {grid: "abc"; width: fit-content}</pre>
<p>(See [[!CSS3BOX]] for the definition of the 'width' property.) The
columns of the template are by default all the same size. The columns
@@ -313,7 +313,7 @@
<p>resp.,
-<pre>.group {display: "abc" * * 3em}</pre>
+<pre>.group {grid: "abc" * * 3em}</pre>
<div class=figure>
<p><img src="table3.png" alt="[Two equal cells, third is 3em wide]"
@@ -383,8 +383,8 @@
<p>with this style sheet
<pre>
div.section {
- display: "@" available
- "F" available}
+ grid: "*" available
+ "F" available}
.note {
position: F;
content: counter(note) ".\A0" contents;
@@ -392,7 +392,7 @@
font-size: smaller}
.note::before {
content: counter(note);
- position: @;
+ position: *;
vertical-align: super;
font-size: larger}
</pre>
@@ -437,10 +437,10 @@
<pre>
#article {
- display: "A A 4"
- "A A 4"
- "1 1 4"
- "2 3 4";
+ grid: "A A 4"
+ "A A 4"
+ "1 1 4"
+ "2 3 4";
chains: 1 2 3 4 }
</pre>
@@ -489,8 +489,8 @@
</p>
<pre class="example"><style type="text/css">
#grid {
- display: grid;
- grid-columns: 150px 1fr;
+<!-- display: grid;
+--> grid-columns: 150px 1fr;
grid-rows: 50px 1fr 50px
}
</style></pre>
@@ -595,8 +595,8 @@
</p>
<pre class="example"><style type="text/css">
#grid {
- display: grid;
- grid-columns: 150px 1fr; /* two columns */
+<!-- display: grid;
+--> grid-columns: 150px 1fr; /* two columns */
grid-rows: 50px 1fr 50px /* three rows */
}
</style></pre>
@@ -613,8 +613,8 @@
</p>
<pre class="example"><style type="text/css">
#grid {
- display: grid;
- grid-columns: 150px 1fr;
+<!-- display: grid;
+--> grid-columns: 150px 1fr;
grid-rows: 50px 1fr 50px
}
@@ -624,8 +624,8 @@
<pre class="example"><style type="text/css">
/* equivalent layout to the prior example, but using named lines */
#grid {
- display: grid;
- grid-columns: 150px "item1-start" 1fr "item1-end";
+<!-- display: grid;
+--> grid-columns: 150px "item1-start" 1fr "item1-end";
grid-rows: "item1-start" 50px 1fr 50px "item1-end"
}
@@ -647,8 +647,8 @@
<pre class="example"><style type="text/css">
/* using the template syntax */
#grid {
- display: grid;
- grid-template: "ad"
+<!-- display: grid;
+--> grid-template: "ad"
"bd"
"cd";
grid-columns: 150px 1fr;
@@ -667,9 +667,6 @@
</div>
<!--End Section: Core Concepts of the Grid-->
- </div>
-
- <div id="grid-declaration" class="section">
<p class=issues>Add slots.
@@ -678,20 +675,39 @@
<h2 id=display>
Declaring a grid template</h2>
-<p class=issue>If any one of : 'grid-template', grid-rows' and
-'grid-columns' is not its intial value, the element is a template
-element.
+<p>An element is a <dfn>grid element</dfn> (i.e., it defines a grid
+for its descendants) if it generates a
+a <a href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes" >block
+container box</a> [[!CSS21]] and one or more of the following is true:
+
+<ul>
+<li>The element's 'grid-template' is not ''none''.
+<li>The element's 'grid-rows' is not ''auto''.
+<li>The element's 'grid-columns' is not ''auto''.
+</ul>
+
+<p>These properties are defined below.
+
+<p class=note>Block containers are, informally, elements that can have
+block elements as children, such as blocks, inline blocks or table
+cells, but not inline elements or replaced elements.
<p class=issue>What if an element has both 'columns' and
-'grid-template', is it a grid or a column element? (or does the column
-apply to the default slot?)
+'grid-template', is it a grid element or a column element? (or do the
+columns apply to the default slot?)
-<p class=issue>Use 'fr' unit (as in css3-grid-align)instead of '* (as
+<p class=issue>Use 'fr' unit (as in css3-grid-align) instead of '*' (as
in css3-layout).
+
+
<h3>Declaring a template: 'grid-template'</h3>
- <table class=propdef>
+<p>The 'grid-template' property assigns a grid to an element, defines
+named slots in the grid, and can also designate a slot as the default
+slot.
+
+<table class=propdef>
<tr>
<th>Name:
<td><dfn>grid-template</dfn>
@@ -703,7 +719,9 @@
<td>none
<tr>
<th>Applies to:
- <td><em>block containers</em> [link to CSS 2.1]
+ <td><a
+ href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes"
+ >block container elements</a> [[!CSS21]]
<tr>
<th>Inherited:
<td>no
@@ -722,30 +740,65 @@
<tr>
<th>Canonical order:
<td><abbr title="follows order of property value definition">per
- grammar<abbr>
+ grammar</abbr>
</table>
-<p>Use '*' (instead of '@' as in css3-layout) for the default slot.
+<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
+column in that row. Spaces and tabs have no meaning. They may be added
+for readability.
+
+<p>The symbols in the template have the following meaning
+<dl>
+ <dt>a letter
+ <dd>slot for content.
+ <dt>*
+ <dd>(asterisk) default slot for content.
+ <dt>.
+ <dd>(period) white-space.
+</dl>
+
+<p>Multiple identical letters in adjacent rows or columns form a
+single <dfn>slot</dfn> that spans those rows and columns. Ditto for
+multiple “*”s. Uppercase and lowercase letters are considered to be
+different letter (i.e., the template is case-sensitive).
+
+<p class=issue>Or case-insensitive? Case-sensitivity gives more choice
+for letters, but it means that 'position: a' and 'POSITION: A' do not
+mean the same thing.
+
+<p>Non-rectangular slots and multiple slots with the same
+letter are illegal. A template without any letter or
+“*” is illegal. A template with more than one “*” slot is illegal.
+These errors cause the declaration to be ignored.
+
+<p class=note>Note: non-rectangular and disconnected regions
+may be permitted in a future update of CSS.
+
+<p>Rows with fewer columns than other rows are implicitly padded with
+periods (“.”).
+
+<p>Each slot (letter or “*”) acts as a block element for its
+contents.
<p class=issue>Should it be possible to make grid template
orientation/direction relative to writing mode?
-<p class=issue>Define what happens if template and
-grid-rows/grid-columns have different number of rows/columns. Template
-wins?
+
<h3>Specifying the widths of columns: 'grid-columns'</h3>
<p>The 'grid-columns' property specifies the sizes of the columns of a
- grid.
+grid.
- <table class=propdef>
+<table class=propdef>
<tr>
<th>Name:
<td><dfn>grid-columns</dfn>
<tr>
<th><a href="#values">Value</a>:
- <td>auto | <var><track-list></var>
+ <td>auto | <var><track-size></var>+
<tr>
<th>Initial:
<td>auto
@@ -753,7 +806,7 @@
<th>Applies to:
<td><a
href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes"
- >block containers</a>
+ >block container elements</a> [[!CSS21]]
<tr>
<th>Inherited:
<td>no
@@ -772,34 +825,110 @@
<tr>
<th>Canonical order:
<td><abbr title="follows order of property value definition">per
- grammar<abbr>
- </table>
+ grammar</abbr>
+</table>
<p>Where
<pre class=prod>
-<var><track-list></var> = <var><track-size></var>+
-<var><track-size></var> = <var><length></var> | <var><percentage></var> |
+<var><track-size></var> = <var><length></var> | <var><percentage></var> | * |
<var><fraction></var> | <var><minmax></var> | min-content | max-content
<var><minmax></var> = minmax( <var><track-size></var> , <var><track-size></var> )
</pre>
-<p>If the value is 'auto' and 'grid-template' is not 'none', the
-effect is as if as many '1fr' are specified as needed. If...
+<p>Each <dfn><var><track-size></var></dfn> sets the width of a
+column.
+
+<p>If an element has <var>N</var> columns, only the
+first <var>N</var> <var><track-size></var> values are used, the
+others are ignored. If there are fewer than <var>N</var> values, the
+missing ones are all assumed to be '1fr'.
+
+<p>The number of columns <var>N</var> of a grid is determined as
+follows:
+
+<ol>
+<li>If 'grid-template' is not 'none', it determines the number of columns.
+<li>Otherwise, the number of columns is equal to the number
+of <var><track-size></var> values in 'grid-columns'.
+</ol>
+
+<p>Each <var><track-size></var> can be one of the following:
+
+<dl>
+ <dt><var><length></var>
+
+ <dd>An explicit width for that column. Negative values are illegal.
+
+ <dt><var><fraction></var>
+
+ <dd>(A non-negative number followed by 'fr'.) A fraction of the
+ remaining space, see <a href="#fraction-values-fr" >Fraction
+ values</a> below.
+
+ <dt>*
+
+ <dd>(Asterisk.) All columns with a width of '*' have the same width.
+
+ <dt><var><percentage></var>
+
+ <dd>Expresses a size as a percentage of the a-priori
+ width. <span class=issue>When the width of the <span>grid
+ element</span> is dependent on content, the result is
+ undefined.</span>
+
+ <dt>max-content,
+ <dt>min-content
+
+ <dd>The column's width is determined by its contents. See the
+ <a href="#colwidth">algorithm</a> below.
+
+ <dt>minmax(<var>p</var>,<var>q</var>)
+
+ <dd>The column's width is constrained to be greater than or equal
+ to <var>p</var> and less than or equal to <var>q</var>. <var>p</var>
+ and <var>q</var> stand for [ <var><length></var> | max-content
+ | min-content | * ]. There may be white space around the <var>p</var>
+ and <var>q</var>. If <var>q</var> < <var>p</var>,
+ then <var>q</var> is ignored and
+ ''minmax(<var>p</var>,<var>q</var>)'' is treated as
+ 'minmax(<var>p</var>,<var>p</var>)'.
+
+ <dt>fit-content
+
+ <dd>Equivalent to 'minmax(min-content, max-content)'.
+</dl>
+
+<div class=issue>Which is easier, '1fr' or '*'? Or do we need both?
+<pre>
+grid-template: "a . c";
+grid-columns: 1fr 1em 3fr;
+</pre>
+<p>or
+<pre>
+grid-template: "a . c c c";
+grid-columns: * 1em * * *;
+</pre>
+</div>
+
+<p class=issue>Do we need percentages? It seems in practice a fraction
+of the remaining space is all that is necessary.
+
+<p class=issue>Flex?
+
<h3>Specifying the height of rows: 'grid-rows'</h3>
-<p>The 'grid-columns' property specifies the sizes of the columns of a
- grid.
+<p>The 'grid-rows' property specifies the sizes of the rows of a grid.
- <table class=propdef>
+<table class=propdef>
<tr>
<th>Name:
<td><dfn>grid-rows</dfn>
<tr>
<th><a href="#values">Value</a>:
- <td>auto | <var><track-list></var>
+ <td>auto | <var><track-size></var>+
<tr>
<th>Initial:
<td>auto
@@ -807,7 +936,7 @@
<th>Applies to:
<td><a
href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes"
- >block containers</a>
+ >block container elements</a> [[!CSS21]]
<tr>
<th>Inherited:
<td>no
@@ -826,8 +955,9 @@
<tr>
<th>Canonical order:
<td><abbr title="follows order of property value definition">per
- grammar<abbr>
- </table>
+ grammar</abbr>
+</table>
+
<p class=issue>Flex?
@@ -853,8 +983,8 @@
</ul>
<p class="issue">
Consider whether having undefined behavior for percentage-sized tracks in content-sized grids is appropriate. CSS2.1 and CSS3 leave percentage width undefined, although there appears to be consistency between browser implementations.
- </p>
- <br>
+
+
<p class="issue">
Flex could also be allowed as a sizing function for a <a href="#grid-track">Grid Track</a>.
</p>
@@ -878,7 +1008,6 @@
grid-rows: (10px);
grid-rows: calc(4em - 5px)</pre>
<!--End Section: Grid-columns and Grid-rows Properties-->
- </div>
<div id="fraction-values-fr" class="section">
<h4><span class="secno">6.5.1 </span>Fraction Values: 'fr'</h4>
@@ -944,9 +1073,73 @@
<p class=issue>Flex?
+
+
+<h3>Computing the widths of the slots</h3>
+
+<p class=issue>If a slot has a 'writing-mode' of 'vertical-rl' or
+'vertical-lr', 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]
+
+
+
+<h3>Computing the height of the slots</h3>
+
+<p class=issue>If a slot has a 'writing-mode' of 'horizontal', 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]
+
+
+
<h3>The 'grid' shorthand property</h3>
-<p>[Syntax with template and sizes all in one, as in css3-layout]
+<p>The 'grid' property is a shorthand for 'grid-template',
+'grid-columns' and 'grid-rows'.
+
+<table class=propdef>
+ <tr>
+ <th>Name:
+ <td><dfn>grid</dfn>
+ <tr>
+ <th><a href="#values">Value</a>:
+ <td>none | [ [ <var><string></var> [ /
+ <var><track-size></var> ]? ]+ ]
+ <var><track-size></var>*
+ <tr>
+ <th>Initial:
+ <td>none
+ <tr>
+ <th>Applies to:
+ <td><a
+ href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes"
+ >block container elements</a> [[!CSS21]]
+ <tr>
+ <th>Inherited:
+ <td>no
+ <tr>
+ <th>Animatable:
+ <td>see individual properties
+ <tr>
+ <th>Percentages:
+ <td>see individual properties
+ <tr>
+ <th>Media:
+ <td>visual
+ <tr>
+ <th>Computed value:
+ <td>see individual properties
+ <tr>
+ <th>Canonical order:
+ <td>N/A
+</table>
+
+<p>[Explain how a value is split into values for the three properties.]
+
<h2 id=positioning>
@@ -957,7 +1150,7 @@
<p class=issue>is it (row,column) or (column,row)?
<p class=issue>Use negative numbers to count backwards from the last
-columns/rows.
+columns/rows?
<p class=issue>What if the numbers refer to a non-existing row or
column? Automatically created (see repeating below)? Ignored?
@@ -995,9 +1188,50 @@
<tr>
<th>Canonical order:
<td><abbr title="follows order of property value definition">per
- grammar<abbr>
+ grammar</abbr>
</table>
+<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 possible interpretations of four numbers:
+<ol>
+<li>'1 3 / 5 4' = start at column 1 row 3, span 5 columns and 4 rows
+<pre>
+. . . . . . .
+. . . . . . .
+x x x x x . .
+x x x x x . .
+x x x x x . .
+x x x x x . .
+. . . . . . .
+</pre>
+<li>'1 3 / 5 4' = start at column 1 row 3, end with column 5 row 4
+<pre>
+. . . . . . .
+. . . . . . .
+x x x x x . .
+x x x x x . .
+. . . . . . .
+. . . . . . .
+. . . . . . .
+</pre>
+<li>'1 3 / 5 4' = start at column 1 row 3, end <em>before</em> column
+5 row 4
+<pre>
+. . . . . . .
+. . . . . . .
+x x x x . . .
+x x x x . . .
+. . . . . . .
+. . . . . . .
+. . . . . . .
+</pre>
+</ol>
+
+<p>Do we need only one? Which one is the easiest to remember?
+</div>
+
<p class=issue>If an element is a descendant of an absolutely
positioned element, does the position of this element refer to its own
nearest grid ancestor or to the nearest grid ancestor of its
@@ -1005,6 +1239,11 @@
positioned relative to a containing block that is higher up in the
tree than the nearest ancestor grid)?
+<p class=issue>Do we need keywords such as 'position: same' (position
+into same slot as the preceding element with the same grid ancestor),
+'position: next-row' (position into the next slot below the preceding
+element with the same grid ancestor), 'position: next-column' or
+'position: next'?
@@ -1023,8 +1262,8 @@
some of the slots in a template:
<pre>
-body { display: "aaa"
- "bcd" }
+body { grid: "aaa"
+ "bcd" }
body::slot(b) { background: #FF0 }
body::slot(c), body::slot(d) { vertical-align: bottom }
</pre>
@@ -1040,8 +1279,8 @@
the whole of the b slot.
<pre>
-body { display: "aaa"
- "bcd" }
+body { grid: "aaa"
+ "bcd" }
body::slot(z) { position: 1 1 / 1 2 }
</pre>
</div>
@@ -1060,7 +1299,7 @@
in combination with a descendant of such an element.
<pre>
-body { display: "a b c" } /* Make BODY a template element */
+body { grid: "a b c" } /* Make BODY a template element */
body::slot(a) { background: #FF0 } /* Color whole slot */
p::slot(a) { background: #FC0 } /* Color intersection of P and slot a */
</pre>
@@ -1078,7 +1317,7 @@
effect:
<pre>
-DIV { display: "a b b" } /* Rule 1 */
+DIV { grid: "a b b" } /* Rule 1 */
DIV::slot(a) { vertical-align: bottom } /* Rule 2 */
P::slot(a) { vertical-align: bottom } /* Rule 3 */
</pre>
@@ -1091,7 +1330,8 @@
<li>* 'overflow' (see the sections on <a
href="#vertical-align">vertical alignment</a> and <a
href="#paged">paged media</a> below)
-<li class=issue>'block-flow' and 'direction' properties?
+<li class=issue>* 'writing-mode'
+<li class=issue>* 'direction'
<li>* 'box-shadow'
<li>font properties
<li>'color'
@@ -1115,8 +1355,9 @@
<li>* 'content' <span class=issue>Useful? Gives the first content for
the slot, more can be added by positioning other elements in the
slot.)</span>
-<li>* margins [to align the contents of the slot to sides or center is
+<li class=issue>* margins [to align the contents of the slot to sides or center
with 'auto']
+<li class=issue>* 'z-index' [if margins can be negative, slots can overlap]
</ul>
<div class=issue>
Received on Tuesday, 14 February 2012 00:37:18 UTC