- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 14 Feb 2012 12:37:07 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-layout
In directory hutz:/tmp/cvs-serv14049
Modified Files:
Overview.html new.html new.src.html
Log Message:
Merge in 'display' values from css3-grid-layout and mark as issue; clean up some text
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-layout/Overview.html,v
retrieving revision 1.17
retrieving revision 1.18
diff -u -d -r1.17 -r1.18
--- Overview.html 13 Feb 2012 12:00:31 -0000 1.17
+++ Overview.html 14 Feb 2012 12:37:05 -0000 1.18
@@ -7,7 +7,7 @@
<title>CSS Template Layout Module</title>
<link href="../default.css" rel=stylesheet type="text/css">
- <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
+ <link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet
type="text/css">
<body>
@@ -17,14 +17,14 @@
<h1>CSS Template Layout Module</h1>
- <h2 class="no-num no-toc" id=longstatus-date-3-august-2004>Editor's Draft
- 13 February 2012</h2>
+ <h2 class="no-num no-toc" id=longstatus-date-3-august-2004>W3C Working
+ Draft 14 February 2012</h2>
<dl>
<dt>This version:
- <dd><a href="http://www.w3.org/TR/2012/ED-css3-layout-20120213/">
- http://www.w3.org/TR/2012/ED-css3-layout-20120213/</a>
+ <dd><a href="http://www.w3.org/TR/2012/WD-css3-layout-20120214/">
+ http://www.w3.org/TR/2012/WD-css3-layout-20120214/</a>
<dt>Latest version:
@@ -94,36 +94,42 @@
<h2 class="no-num no-toc" id=status>Status of this document</h2>
<!--begin-status-->
- <p>This is a public copy of the editors' draft. It is provided for
- discussion only and may change at any moment. Its publication here does
- not imply endorsement of its contents by W3C. Don't cite this document
- other than as work in progress.
+ <p><em>This section describes the status of this document at the time of
+ its publication. Other documents may supersede this document. A list of
+ current W3C publications and the latest revision of this technical report
+ can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
+ index at http://www.w3.org/TR/.</a></em>
+
+ <p>Publication as a Working Draft does not imply endorsement by the W3C
+ Membership. This is a draft document and may be updated, replaced or
+ obsoleted by other documents at any time. It is inappropriate to cite this
+ document as other than work in progress.
<p>The (<a
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
- mailing list <a
- href="mailto:www-style@w3.org?Subject=%5Bcss3-layout%5D%20PUT%20SUBJECT%20HERE">
- www-style@w3.org</a> (see <a
- href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
- discussion of this specification. When sending e-mail, please put the text
- “css3-layout” in the subject, preferably like this:
+ mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
+ <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
+ for discussion of this specification. When sending e-mail, please put the
+ text “css3-layout” in the subject, preferably like this:
“[<!---->css3-layout<!---->] <em>…summary of
comment…</em>”
- <p>This document was produced by the <a href="/Style/CSS/members">CSS
- Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
+ <p>This document was produced by the <a
+ href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
+ the <a href="http://www.w3.org/Style/">Style Activity</a>).
<p>This document was produced by a group operating under the <a
- href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
- Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
+ href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
+ 2004 W3C Patent Policy</a>. W3C maintains a <a
+ href="http://www.w3.org/2004/01/pp-impl/32061/status"
rel=disclosure>public list of any patent disclosures</a> made in
connection with the deliverables of the group; that page also includes
instructions for disclosing a patent. An individual who has actual
knowledge of a patent which the individual believes contains <a
- href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
+ href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
Claim(s)</a> must disclose the information in accordance with <a
- href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
- W3C Patent Policy</a>.</p>
+ href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
+ 6 of the W3C Patent Policy</a>.</p>
<!--end-status-->
<p>This draft is related to the drafts about positoning with grid units
Index: new.src.html
===================================================================
RCS file: /sources/public/csswg/css3-layout/new.src.html,v
retrieving revision 1.5
retrieving revision 1.6
diff -u -d -r1.5 -r1.6
--- new.src.html 14 Feb 2012 09:57:04 -0000 1.5
+++ new.src.html 14 Feb 2012 12:37:05 -0000 1.6
@@ -101,11 +101,14 @@
<p><em>This section is not normative.</em>
+<p class="issue">Merge introductory text, which right now is simply
+concatenated between Grid and Template.</p>
+
<div class=sidefigure>
<p><img src="diagram.png" alt="Image: four elements move to four slots
in a template" longdesc="diagram.desc">
-<p class=caption>Four regions, called a, b, c and d, each receive a
+<p class=caption>Four slots, called a, b, c and d, each receive a
part of a document
</div>
@@ -149,10 +152,6 @@
<li>Paged displays (e.g., printed media) where each page is divided
in fixed areas for different kinds of content.
-
- <li>Complex pages with multiple regions, where the style of the text
- does not only depend on the type of element it comes from, but also
- on the region it is displayed in.
</ul>
<p>Grid-based positioning is an alternative to absolute positioning,
@@ -165,11 +164,9 @@
of elements is thus governed implicitly by the rows and columns of the
template.
-<p class=issue>Call it a “slot” or rather a “region”?
-
<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 'grid' property of some
+template itself is specified on the 'grid-template' property of some
ancestor of the elements to remap.
<div class=example>
@@ -188,10 +185,10 @@
<style type="text/css">
dl { grid: "ab"
"cd" }
- #sym1 { position: a }
- #lab1 { position: b }
- #sym2 { position: c }
- #lab2 { position: d }
+ #sym1 { position: slot(a) }
+ #lab1 { position: slot(b) }
+ #sym2 { position: slot(c) }
+ #lab2 { position: slot(d) }
</style>
<dl>
<dt id=sym1>A
@@ -214,20 +211,20 @@
{
body { grid: "aaa"
"bcd" }
- #head { position: a }
- #nav { position: b }
- #adv { position: c }
- #body { position: d }
+ #head { position: slot(a) }
+ #nav { position: slot(b) }
+ #adv { position: slot(c) }
+ #body { position: slot(d) }
}
@media all and (max-width: 500px)
{
body { grid: "a"
"b"
"c" }
- #head { position: a }
- #nav { position: b }
- #adv { display: none }
- #body { position: c }
+ #head { position: slot(a) }
+ #nav { position: slot(b) }
+ #adv { display: none }
+ #body { position: slot(c) }
}</pre>
</div>
@@ -239,9 +236,9 @@
<pre>
#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 }
+#intro { position: (a); margin-right: -2em; box-shadow: 0.5em 0.5em 0.5em }
+#supportingText { position: slot(b); box-shadow: 0.5em 0.5em 0.5em }
+#linkList { position: slot(c) }
</pre>
</div>
@@ -278,9 +275,9 @@
<pre>
.group {grid: "abc"}
-.group > div {position: a}
-.group > div + div {position: b}
-.group > div + div + div {position: c}
+.group > div {position: slot(a)}
+.group > div + div {position: slot(b)}
+.group > div + div + div {position: slot(c)}
</pre>
<p>By default, the table is as wide as needed to fit its contents. To
@@ -350,9 +347,9 @@
thus it is possible to reverse the order of the columns:
<pre>
-.group > div {position: c}
-.group > div + div {position: b}
-.group > div + div + div {position: a}
+.group > div {position: slot(c)}
+.group > div + div {position: slot(b)}
+.group > div + div + div {position: slot(a)}
</pre>
<div class=figure>
@@ -386,13 +383,13 @@
grid: "*" available
"F" available}
.note {
- position: F;
+ position: slot(F);
content: counter(note) ".\A0" contents;
counter-increment: note;
font-size: smaller}
.note::before {
content: counter(note);
- position: *;
+ position: slot(*);
vertical-align: super;
font-size: larger}
</pre>
@@ -404,75 +401,6 @@
</div>
</div>
-<div class=example>
-<p>This example shows the use of chained regions: text from region 1
-continues in region 2, 3 and 4. And it shows how to use
-pseudo-elements to style text in a particular region: text in region 1
-is bigger than in other regions.
-
-<div class=figure>
-<p><img src="regions-intro-rendering.png" alt="Image of a complex,
-3-column layout" longdesc="regions-intro-rendering.desc">
-<p class=caption>Example rendering
-</div>
-
-<p>We assume a document fragment similar to this:
-
-<pre>
-<div id=article>
- <p><img src="sunset" alt="">
- <h1>Introduction</h1>
- <p>This is an example…
-
- <h1>More Details</h1>
- <p>This illustrates…
- <p>Then, the example…
- <p>Finally, this…
-</div>
-</pre>
-
-<p>The style sheet makes the DIV into a template element with five
-regions, called A, 1, 2, 3 and 4. The regions are grouped into two
-chains: region A on its own, and the chain consisting of 1, 2, 3 and 4.
-
-<pre>
-#article {
- grid: "A A 4"
- "A A 4"
- "1 1 4"
- "2 3 4";
- chains: 1 2 3 4 }
-</pre>
-
-<p>All children go into region 1 (and continue in 2, 3 and 4 as
-needed). The IMG element goes into region A. We assume for simplicity
-that there is only one IMG element:
-
-<pre>
-#article > * { position: 1 }
-#article img { position: A }
-</pre>
-
-<p>The text in region 1 is bolder, larger and a different color than
-in the other regions. Also, an H1 that falls into this region is
-rendered differently from other H1s:
-
-<pre>
-::slot(1) {
- font-weight: bold;
- color: #0C3D5F;
- font-size: larger }
-h1::slot(1) {
- color: crimson;
- display: run-in }
-</pre>
-
-<p>(For brevity, the example doesn't show the style rules to set the
-color and background, to make the text justified, add the left border
-to the second H1, etc.)
-</div>
-
-
<h3><span class="secno">6.1 </span>Grid Rows and Columns</h3>
<div class="sidefigure">
<img class="figure" alt="Image: Grid Lines." src="images/grid-lines.png" />
@@ -496,7 +424,7 @@
</style></pre>
-<h3 id=accessibility>A note about accessibility</h3>
+<h3 id=accessibility>About the Accessibility of Content Reordering</h3>
<p><em>(This section is not normative.)</em>
@@ -571,111 +499,155 @@
- <h2><span class="secno">3 </span>Core Concepts of the Grid</h2>
- <div class="sidefigure">
- <img class="figure" alt="Image: A diagram illustrating the relationship between the Grid Element and its Tracks, Lines, Cells and Items." src="images/grid-concepts.png" />
- <p class="caption">A diagram illustrating the relationship between the <a href="#grid-element">Grid element</a> and its Tracks, Lines, Cells and Items.</p>
- </div>
- <p>
- A <dfn id="grid-element">Grid element</dfn> is declared in markup by setting the display property of an element to 'grid' or 'inline-grid'. Child elements of the Grid are termed <a href="#grid-item">Grid Item</a>s and may be positioned and sized by the <a href="#grid-element">Grid element</a> by leveraging the following logical concepts.
- </p>
- <ul>
- <li><a href="#grid-track">Grid Track</a>s</li>
- <li><a href="#grid-line">Grid Line</a>s</li>
- <li><a href="#grid-cell">Grid Cell</a>s</li>
- </ul>
- <p>
- Figure 7 illustrates the relationship between these concepts and the markup in the subsections that follow produce the result shown in the figure.
- </p>
+<h2 id="terminology">
+Core Concepts of the Grid</h2>
- <div id="grid-concepts-tracks" class="section">
- <h4><span class="secno">3.1 </span>Grid Tracks</h4>
- <p>
- <dfn id="grid-track">Grid Tracks</dfn> are the columns and rows of the Grid defined with the <a href="#grid-rows-property"><code>grid-rows</code></a> and <a href="#grid-columns-property"><code>grid-columns</code></a> properties on the <a href="#grid-element">Grid element</a>. Each Track is defined by declaring a sequential list of sizing functions, one for each Track. Tracks define the space between <a href="#grid-line">Grid Line</a>s.
- </p>
- <pre class="example"><style type="text/css">
- #grid {
-<!-- display: grid;
---> grid-columns: 150px 1fr; /* two columns */
- grid-rows: 50px 1fr 50px /* three rows */
- }
+ <div class="sidefigure">
+ <img class="figure" alt="FIXME" src="images/grid-concepts.png" />
+ <p class="caption">A diagram illustrating the relationship between
+ the <a href="#grid-element">grid element</a> and its Tracks, Lines,
+ Cells and Items.</p>
+ </div>
+ <p>A <dfn id="grid-element">grid element</dfn> is declared in markup by
+ setting the display property of an element to ''grid'' or ''inline-grid''.
+ Child elements of the Grid are termed <a href="#grid-item">grid items</a>
+ and may be positioned and sized by the <a href="#grid-element">grid element</a>
+ by leveraging the following logical concepts:
+
+ <ul>
+ <li><a href="#grid-track">Grid Track</a>s</li>
+ <li><a href="#grid-line">Grid Line</a>s</li>
+ <li><a href="#slot">Slot</a>s</li>
+ </ul>
+
+ <p>
+ Figure 7 illustrates the relationship between these concepts and the markup
+ in the subsections that follow produce the result shown in the figure.
+ </p>
+
+<h4 id="grid-concepts-tracks">
+Grid Tracks</h4>
+
+ <p><dfn id="grid-track">Grid Tracks</dfn> are the columns and rows of the
+ Grid defined with the 'grid-rows' and 'grid-columns' properties on the
+ <a href="#grid-element">Grid element</a>. Each Track is defined by
+ declaring a sequential list of sizing functions, one for each Track.
+ Tracks define the space between <a href="#grid-line">Grid Line</a>s.
+ <pre class="example"><style type="text/css">
+#grid {
+ display: grid;
+ grid-columns: 150px 1fr; /* two columns */
+ grid-rows: 50px 1fr 50px /* three rows */
+}
</style></pre>
- <!--End Section: Grid Tracks-->
- </div>
- <div id="grid-concepts-lines" class="section">
- <h4><span class="secno">3.2 </span>Grid Lines</h4>
- <p>
- <dfn id="grid-line">Grid Lines</dfn> are the horizontal or vertical dividing lines that exist on either side of a column or row. <a href="#grid-line">Grid Line</a>s may be referred to by their <a href="#grid-line">Grid Line</a> number, or they may be named by the author. Authors use one or more quoted strings to assign names to a <a href="#grid-line">Grid Line</a> before or after a <a href="#grid-track">Grid Track</a> definition wherever the desired <a href="#grid-line">Grid Line</a> would logically exist. A <a href="#grid-item">Grid Item</a> then uses the <a href="#grid-line">Grid Line</a>s to determine its position and available space within the Grid by referencing the <a href="#grid-line">Grid Line</a>s using the properties <a href="#grid-row-property"><code>grid-row</code></a> and <a href="#grid-column-property"><code>grid-column</code></a>. <a href="#grid-row-property"><code>Grid-row</code></a> and <a href="#grid-column-property"><code>grid-column</code></a> accept a starting and opional ending Line.
- </p>
- <p>
- The following two examples create three column <a href="#grid-line">Grid Line</a>s and four row <a href="#grid-line">Grid Line</a>s. The first example demonstrates how an author would refer to the <a href="#grid-line">Grid Line</a>s using <a href="#grid-line">Grid Line</a> numbers. The second example uses explicitly named <a href="#grid-line">Grid Line</a>s.
- </p>
- <pre class="example"><style type="text/css">
- #grid {
-<!-- display: grid;
---> grid-columns: 150px 1fr;
- grid-rows: 50px 1fr 50px
- }
+<h4 id="grid-concepts-lines">
+Grid Lines</h4>
- #item1 { grid-column: 2; grid-row: 1 4 }
+ <p><dfn id="grid-line">Grid Lines</dfn> are the horizontal or vertical
+ dividing lines that exist on either side of a column or row.
+ <i>Grid Lines</i> may be referred to by their
+ <i>Grid Line</i> number.
+ A <i>Grid Item</i> then uses the <i>Grid Lines</i> to determine its
+ position and available space within the Grid by referencing the
+ <a href="#grid-line">Grid Line</a>s using the 'grid-row' and 'grid-column'
+ properties.
+
+ <p>The following two examples create three column <i>Grid Lines</i>
+ and four row <i>Grid Lines</i>. The first example demonstrates how
+ an author would refer to the <a href="#grid-line">Grid Line</a>s
+ using <a href="#grid-line">Grid Line</a> numbers. The second example
+ uses explicitly named <a href="#grid-line">Grid Line</a>s.
+
+ <pre class="example"><style type="text/css">
+ #grid {
+ display: grid;
+ grid-columns: 150px 1fr;
+ grid-rows: 50px 1fr 50px
+ }
+
+ #item1 { grid-column: 2; grid-row: 1 4 }
</style></pre>
- <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";
- grid-rows: "item1-start" 50px 1fr 50px "item1-end"
- }
+ <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";
+ grid-rows: "item1-start" 50px 1fr 50px "item1-end"
+ }
- #item1 {
- grid-column: "item1-start" "item1-end";
- grid-row: "item1-start" "item1-end"
- }
+ #item1 {
+ grid-column: "item1-start" "item1-end";
+ grid-row: "item1-start" "item1-end"
+ }
</style></pre>
- <!--End Section: Grid Lines-->
- </div>
- <div id="grid-concepts-cells" class="section">
- <h4><span class="secno">3.3 </span>Grid Cells</h4>
- <p>
- <dfn id="grid-cell">Grid Cells</dfn> are the logical space used to lay out one or more <a href="#grid-item">Grid Item</a>s. <a href="#grid-cell">Grid Cell</a>s may be defined explicitly using the <a href="#grid-template-property"><code>grid-template</code></a> property, or implicitly by referencing a region of the Grid using the properties <a href="#grid-row-property"><code>grid-row</code></a> and <a href="#grid-column-property"><code>grid-column</code></a> on a <a href="#grid-item">Grid Item</a>.
- </p>
- <p>
- Whether a <a href="#grid-cell">Grid Cell</a> is created explicitly or implicitly, there is no difference in the layout or drawing order of the <a href="#grid-item">Grid Item</a>s which are associated with that <a href="#grid-cell">Grid Cell</a>. <a href="#grid-cell">Grid Cell</a>s cannot be styled. Only the syntax used to refer to a region of space on the Grid differs between the implicit and explicit approach to provide authors with the tools to best suit their scenarios as illustrated in prior examples.
- </p>
- <pre class="example"><style type="text/css">
- /* using the template syntax */
- #grid {
-<!-- display: grid;
---> grid-template: "ad"
- "bd"
- "cd";
- grid-columns: 150px 1fr;
- grid-rows: 50px 1fr 50px
- }
- #item2 { grid-cell: "b" }
- #item3 { grid-cell: "b" }
+<h4 id="grid-concepts-cells">
+Slots</h4>
- /* Align items 2 and 3 at different points in the Grid Cell "b". */
- /* By default, Grid Items are stretched to fit their Grid Cell */
- /* and these items would layer one over the other. */
- #item2 { grid-row-align: start }
- #item3 { grid-column-align: end; grid-row-align: end }</style></pre>
- <!--End Section: Grid Cells-->
- </div>
-
- <!--End Section: Core Concepts of the Grid-->
+ <p><dfn id="slot">Slots</dfn> are the logical space used to lay out
+ one or more <a href="#grid-item">Grid Item</a>s.
+ <i>slots</i> can be defined explicitly using the 'grid-template'
+ property, or anonymously by referencing a region of the Grid using the
+ 'grid-row' and 'grid-column' properties on a <a href="#grid-item">Grid Item</a>.
-<p class=issues>Add slots.
+ <p>Whether a <i>slot</i> is created explicitly or implicitly, there
+ is no difference in the layout or drawing order of the
+ <a href="#grid-item">Grid Item</a>s which are associated with that
+ <i>slot</i>.
+ <pre class="example"><style type="text/css">
+/* using the template syntax */
+#grid {
+ display: grid;
+ grid-template: "ad"
+ "bd"
+ "cd";
+ grid-columns: 150px 1fr;
+ grid-rows: 50px 1fr 50px
+}
+#item2 { position: slot(b) }
+#item3 { position: slot(b) }
+/* Align items 2 and 3 at different points in the slot "b". */
+/* By default, Grid Items are stretched to fit their slot */
+/* and these items would layer one over the other. */
+#item2 { grid-row-align: start }
+#item3 { grid-column-align: end; grid-row-align: end }</style></pre>
<h2 id=display>
Declaring a grid template</h2>
<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''.
+
+<table class="propdef">
+ <tr>
+ <th>Name:
+ <td><dfn>display</dfn>
+ <tr>
+ <th><a href="#values">Value</a>:
+ <td>… | grid | inline-grid
+</table>
+
+<p>This module adds the ''grid'' and ''inline-grid'' values to the 'display'
+property [[CSS21]], as defined below:
+
+<dl>
+ <dt><dfn id=value-def-display-inline-grid>''grid''</dfn></dt>
+ <dd>A value of grid causes an element to display as a block-level <a href="#grid-element">Grid element</a>.</dd>
+ <dt><dfn id="value-def-display-inline-grid">''inline-grid''</dfn></dt>
+ <dd>A value of inline-grid causes an element to display as an inline-level <a href="#grid-element">Grid element</a>.</dd>
+ </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>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:
@@ -687,6 +659,7 @@
</ul>
<p>These properties are defined below.
+</div>
<p class=note>Block containers are, informally, elements that can have
block elements as children, such as blocks, inline blocks or table
@@ -699,49 +672,48 @@
<p class=issue>Use 'fr' unit (as in css3-grid-align) instead of '*' (as
in css3-layout).
-
-
-<h3>Declaring a template: 'grid-template'</h3>
+<h3 id="grid-templates">
+Declaring a template: 'grid-template'</h3>
<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>
- <tr>
- <th><a href="#values">Value</a>:
- <td>none | <var><string></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>no
- <tr>
- <th>Percentages:
- <td>N/A
- <tr>
- <th>Media:
- <td>visual
- <tr>
- <th>Computed value:
- <td>specified value
- <tr>
- <th>Canonical order:
- <td><abbr title="follows order of property value definition">per
- grammar</abbr>
- </table>
+ <tr>
+ <th>Name:
+ <td><dfn>grid-template</dfn>
+ <tr>
+ <th><a href="#values">Value</a>:
+ <td>none | <var><string></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>no
+ <tr>
+ <th>Percentages:
+ <td>N/A
+ <tr>
+ <th>Media:
+ <td>visual
+ <tr>
+ <th>Computed value:
+ <td>specified value
+ <tr>
+ <th>Canonical order:
+ <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
@@ -761,12 +733,8 @@
<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.
+multiple “*”s. Slot names are case-sensitive, so uppercase and
+lowercase letters are considered to be different letters.
<p>Non-rectangular slots and multiple slots with the same
letter are illegal. A template without any letter or
@@ -782,10 +750,11 @@
<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>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>Specifying the widths of columns: 'grid-columns'</h3>
@@ -824,8 +793,7 @@
<td>specified value
<tr>
<th>Canonical order:
- <td><abbr title="follows order of property value definition">per
- grammar</abbr>
+ <td><abbr title="follows order of property value definition">per grammar</abbr>
</table>
<p>Where
@@ -1161,7 +1129,7 @@
<td><dfn>position</dfn>
<tr>
<th><a href="#values">Value</a>:
- <td><var><letter></var> | <var><integer></var>
+ <td><var><slot></var> | <var><integer></var>
<var><integer></var> [ / <var><integer></var>
<var><integer></var>? ]?
<tr>
@@ -1192,7 +1160,7 @@
</table>
<p>All content positioned into the same slot, whether positioned by
-name ('position: a'), by coordinates ('position: 2 3') or implicitly
+name ('position: slot(a)'), by coordinates ('position: 2 3') or implicitly
by flowing into the default slot, forms a single flow, with content in
document order.
@@ -1260,11 +1228,11 @@
(Regions?).
<p>The slots of a <em>template element</em> can be individually
-addressed with the <dfn>''slot()'' pseudo-element.</dfn>
+addressed with the <dfn>''::slot()'' pseudo-element.</dfn>
<div class=example>
-<p>For example, the following sets the color and vertical alignment of
-some of the slots in a template:
+<p>For example, the following sets the background color and
+vertical alignment of some of the slots in a template:
<pre>
body { grid: "aaa"
@@ -1300,28 +1268,6 @@
fact the same slot, and the new name is an alias for that
slot. <span class=issue>Unless it has a different 'z-index'?</span>
-<p>The selector ''<var>E</var>::slot(<var>X</var>)'' selects the part
-of an element <var>E</var> that falls inside the slot with name
-<var>X</var> of a template <var>T</var>, where <var>T</var> is either
-the template of <var>E</var> itself (if <var>E</var> is a <em>template
-element</em>) or the template of the <em>template ancestor</em> of
-<var>E</var>. If there is no such template <var>T</var>, or if it does
-not contain a slot called <var>X</var>, the selector matches nothing.
-
-<div class=example>
-<p>The following example shows the difference between using the
-'::slot()' pseudo-element in combination with a template element and
-in combination with a descendant of such an element.
-
-<pre>
-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>
-
-<p class=issue>Expand example with a screen shot.
-</div>
-
<p>Only the following properties apply to the ''slot()''
pseudo-element. Those marked with a * apply only to the ''slot()''
pseudo-element of a template element.
@@ -1340,63 +1286,39 @@
<ul>
<li>background properties
-<li>* 'vertical-align' (see <a href="#vertical-align">“vertical
+<li>'vertical-align' (see <a href="#vertical-align">“vertical
alignment”</a> below)
-<li>* 'overflow' (see the sections on <a
+<li>'overflow' (see the sections on <a
href="#vertical-align">vertical alignment</a> and <a
href="#paged">paged media</a> below)
-<li class=issue>* 'writing-mode'
-<li class=issue>* 'direction'
-<li>* 'box-shadow'
-<li>font properties
-<li>'color'
-<li>'word-spacing'
-<li>'letter-spacing'
-<li>'text-decoration'
-<li>'text-transform'
-<li>'line-height'
-<li>* border properties <span class=issue
+<li class=issue>'writing-mode'
+<li class=issue>'direction'
+<li>'box-shadow'
+<li>border properties <span class=issue
>(<a href="http://www.w3.org/Style/CSS/Tracker/issues/37"
>ISSUE-37:</a> Can a slot have a border and if so, where is it
drawn?)</span>
-<li>* padding properties
-<li>'text-shadow'
-<li>* 'box-decoration-break'
-<li>* text-align <span class=issue
->(<a href="http://www.w3.org/Style/CSS/Tracker/issues/38"
->ISSUE-38:</a> Align content in a column on decimal points,
-etc.)</span>
-<li>* column properties
-<li>* 'content' <span class=issue>Useful? Gives the first content for
+<li>padding properties
+<li>'box-decoration-break'
+<li>column properties
+<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 class=issue>* margins [to align the contents of the slot to sides or center
+<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]
+<li class=issue>'z-index' [if margins can be negative, slots can overlap]
</ul>
-<div class=issue>
-<p>What is the text indent of a P that starts in slot a? 10pt or 20pt?
-<pre>
-P { font-size: 10pt; text-indent: 1em }
-P::slot(a) { font-size: 20pt }
-</pre>
-</div>
-
<p>The background of a slot is drawn immediately on top of the
background of the element itself. E.g., the background set on
''P::slot(a)'' is immediately in front of the background set on ''P''.
-<p class=issue>Need to define exactly how properties apply, similarly
-to :first-line: fictional tag sequence, ambiguous cases…
-
<p class=issue>Need to define the width when a slot has padding and
border, including when the width is too small.
<p class=note>Note that slots can have borders and padding, but no
margins (cf. table cells). <span class=issue>[still true?]</span>
-
<h2 id=vertical-align>Vertical alignment of elements in a slot</h2>
<p class=issue>Can use the margins of the '::slot()'' pseudo, or
Index: new.html
===================================================================
RCS file: /sources/public/csswg/css3-layout/new.html,v
retrieving revision 1.3
retrieving revision 1.4
diff -u -d -r1.3 -r1.4
--- new.html 14 Feb 2012 01:05:51 -0000 1.3
+++ new.html 14 Feb 2012 12:37:05 -0000 1.4
@@ -73,8 +73,8 @@
<dd><a
href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>
- with subject line “<kbd>[css3-grid-template] <var>… message
- topic …</var></kbd>”
+ with subject line “<kbd>[<!---->css3-grid-template] <var>…
+ message topic …</var></kbd>”
<dt>Editors:
@@ -169,8 +169,8 @@
[...980 lines suppressed...]
- <li>‘<a href="#slot"><code class=css>slot()</code></a>’
- pseudo-element., <a href="#slot-pseudo-element."
- title="''slot()'' pseudo-element."><strong>5.</strong></a>
+ <li>Slots, <a href="#slot" title=Slots><strong>2.0.3.</strong></a>
<li>style sheet
<ul>
@@ -2286,6 +2196,11 @@
<tbody>
<tr>
+ <th><a class=property href="#display0">display</a>
+
+ <td>… | grid | inline-grid
+
+ <tr>
<th><a class=property href="#grid">grid</a>
<td>none | [ [ <string> [ / <track-size> ]? ]+ ]
Received on Tuesday, 14 February 2012 12:37:13 UTC