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

csswg/css3-layout Overview.html,1.17,1.18 new.html,1.3,1.4 new.src.html,1.5,1.6

From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
Date: Tue, 14 Feb 2012 12:37:07 +0000
To: public-css-commits@w3.org
Message-Id: <E1RxHd5-0003f5-W7@lionel-hutz.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
-   &#8220;css3-layout&#8221; 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 &#8220;css3-layout&#8221; in the subject, preferably like this:
    &#8220;[<!---->css3-layout<!---->] <em>&hellip;summary of
    comment&hellip;</em>&#8221;
 
-  <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 @@
 &lt;style type="text/css"&gt;
   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) }
 &lt;/style&gt;
 &lt;dl&gt;
   &lt;dt id=sym1&gt;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>
-&lt;div id=article>
-  &lt;p>&lt;img src="sunset" alt="">
-  &lt;h1>Introduction&lt;/h1>
-  &lt;p>This is an example…
-    
-  &lt;h1>More Details&lt;/h1>
-  &lt;p>This illustrates…
-  &lt;p>Then, the example…
-  &lt;p>Finally, this…
-&lt;/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 @@
 &lt;/style&gt;</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">&lt;style type="text/css"&gt;
-    #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">&lt;style type="text/css"&gt;
+#grid { 
+    display: grid; 
+    grid-columns: 150px 1fr; /* two columns */
+    grid-rows: 50px 1fr 50px /* three rows  */
+}
 &lt;/style&gt;</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">&lt;style type="text/css"&gt;
-    #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">&lt;style type="text/css"&gt;
+  #grid { 
+      display: grid; 
+      grid-columns: 150px 1fr;
+      grid-rows: 50px 1fr 50px
+  }
+
+  #item1 { grid-column: 2; grid-row: 1 4 }
 &lt;/style&gt;</pre>
 
-    <pre class="example">&lt;style type="text/css"&gt;
-    /* 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">&lt;style type="text/css"&gt;
+  /* 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" 
+  }
 &lt;/style&gt;</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">&lt;style type="text/css"&gt;
-    /* 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 }&lt;/style&gt;</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">&lt;style type="text/css"&gt;
+/* 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 }&lt;/style&gt;</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>&hellip; | 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>&lt;string&gt;</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&nbsp;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>&lt;string&gt;</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&nbsp;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>&lt;letter&gt;</var> | <var>&lt;integer&gt;</var>
+      <td><var>&lt;slot&gt;</var> | <var>&lt;integer&gt;</var>
       <var>&lt;integer&gt;</var> [ / <var>&lt;integer&gt;</var>
       <var>&lt;integer&gt;</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 &ldquo;<kbd>[css3-grid-template] <var>&hellip; message
-     topic &hellip;</var></kbd>&rdquo;
+     with subject line &ldquo;<kbd>[<!---->css3-grid-template] <var>&hellip;
+     message topic &hellip;</var></kbd>&rdquo;
 
     <dt>Editors:
 
@@ -169,8 +169,8 @@
[...980 lines suppressed...]
 
-   <li>&lsquo;<a href="#slot"><code class=css>slot()</code></a>&rsquo;
-    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>&hellip; | grid | inline-grid
+
+    <tr>
      <th><a class=property href="#grid">grid</a>
 
      <td>none | [ [ &lt;string&gt; [ / &lt;track-size&gt; ]? ]+ ]
Received on Tuesday, 14 February 2012 12:37:13 UTC

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