[css-grid] Change named line syntax to use parents+idents rather than strings.

Author: tabatkins

css-grid/Overview.html

@@ -648,13 +648,13 @@ <h3 id=grid-layering><span class=secno>1.4. </span> Grid Layering of
      * items.  The line names are assigned on either side of a column
      * or row sizing function where the line would logically exist. */
     grid-template-columns:
-      "start"        auto
-      "track-start"  0.5fr
-      "thumb-start"  auto
-      "fill-split"   auto
-      "thumb-end"    0.5fr
-      "track-end"    auto
-      "end";
+      (start)        auto
+      (track-start)  0.5fr
+      (thumb-start)  auto
+      (fill-split)   auto
+      (thumb-end)    0.5fr
+      (track-end)    auto
+      (end);
   }
 
   /* The grid-placement properties accept named lines. Below the
@@ -666,20 +666,20 @@ <h3 id=grid-layering><span class=secno>1.4. </span> Grid Layering of
    * changes, but grid lines can also work with layered grid items 
    * that have overlapping areas of different shapes like the thumb 
    * and track parts  in this example. */
-  #lower-label { grid-column-start: "start" }
-  #track       { grid-column: "track-start" / "track-end"; align-self: center }
-  #upper-label { grid-column-end: "end"; }
+  #lower-label { grid-column-start: start }
+  #track       { grid-column: track-start / track-end; align-self: center }
+  #upper-label { grid-column-end: end; }
 
   /* Fill parts are drawn above the track so set z-index to 5. */
-  #lower-fill  { grid-column: "track-start" / "fill-split"; 
+  #lower-fill  { grid-column: track-start / fill-split; 
                  align-self: end; 
                  z-index: 5 }
-  #upper-fill  { grid-column: "fill-split" / "track-end"; 
+  #upper-fill  { grid-column: fill-split / track-end; 
                  align-self: start; 
                  z-index: 5 }
 
   /* Thumb is the topmost part; assign it the highest z-index value. */
-  #thumb       { grid-column: "thumb-start" / "thumb-end"; z-index: 10 }
+  #thumb       { grid-column: thumb-start / thumb-end; z-index: 10 }
 &lt;/style>
 
 &lt;div id="grid">
@@ -794,13 +794,13 @@ <h3 id=grid-line-concept><span class=secno>2.2. </span> Grid Lines</h3>
   /* equivalent layout to the prior example, but using named lines */
   #grid {
     display: grid;
-    grid-template-columns: 150px "item1-start" 1fr "item1-end";
-    grid-template-rows: "item1-start" 50px 1fr 50px "item1-end"
+    grid-template-columns: 150px (item1-start) 1fr (item1-end);
+    grid-template-rows: (item1-start) 50px 1fr 50px (item1-end);
   }
 
   #item1 {
-    grid-column: "item1-start" / "item1-end";
-    grid-row: "item1-start" / "item1-end"
+    grid-column: item1-start / item1-end;
+    grid-row: item1-start / item1-end
   }
 &lt;/style></pre>
   </div>
@@ -1311,18 +1311,23 @@ <h3 id=track-sizing><span class=secno>5.1. </span> Track Sizing: the ‘<a
    of a <a href="#track-list"><i>track list</i></a> is:
 
   <pre>
-<dfn
-   id=lttrack-list>&lt;track-list></dfn>    = [ <var>&lt;string></var>* [ <a
+<dfn id=lttrack-list>&lt;track-list></dfn>    = [ <a
+   href="#ltline-names"><var>&lt;line-names></var></a>? [ <a
    href="#lttrack-size"><var>&lt;track-size></var></a> | <a
-   href="#ltrepeat-function"><var>&lt;repeat-function></var></a> ] ]+ <var>&lt;string></var>*
+   href="#ltrepeat-function"><var>&lt;repeat-function></var></a> ] ]+ <a
+   href="#ltline-names"><var>&lt;line-names></var></a>?
 <dfn
    id=lttrack-size>&lt;track-size></dfn>    = minmax( <a
    href="#lttrack-breadth"><var>&lt;track-breadth></var></a> , <a
    href="#lttrack-breadth"><var>&lt;track-breadth></var></a> ) | auto | <a
    href="#lttrack-breadth"><var>&lt;track-breadth></var></a>
 <dfn
    id=lttrack-breadth>&lt;track-breadth></dfn> = <var>&lt;length></var> | <var>&lt;percentage></var> | <a
-   href="#ltflex"><var>&lt;flex></var></a> | min-content | max-content</pre>
+   href="#ltflex"><var>&lt;flex></var></a> | min-content | max-content
+<dfn
+   id=ltline-names>&lt;line-names></dfn>    = ( <var>&lt;ident></var>+ )
+
+	</pre>
 
   <p>Where:
 
@@ -1457,10 +1462,6 @@ <h3 id=track-sizing><span class=secno>5.1. </span> Track Sizing: the ‘<a
 
   <h4 id=named-lines><span class=secno>5.1.1. </span> Named Grid Lines</h4>
 
-  <p class=issue> The syntax for named lines kindof sucks right now. See <a
-   href="http://lists.w3.org/Archives/Public/www-style/2013Mar/0266.html">thread
-   on www-style</a> and add your opinions!
-
   <p> While <a href="#grid-line"><i>grid lines</i></a> can always be referred
    to by their numerical index, they can also be explicitly named in the
    ‘<a href="#grid-template-rows"><code
@@ -1479,8 +1480,8 @@ <h4 id=named-lines><span class=secno>5.1.1. </span> Named Grid Lines</h4>
    <pre>&lt;style>
   #grid {
     display: grid;
-    grid-template-columns: "first" "nav" 150px "main" 1fr "last";
-    grid-template-rows: "first" "header" 50px "main" 1fr "footer" 50px "last";
+    grid-template-columns: (first nav) 150px (main) 1fr (last);
+    grid-template-rows: (first header) 50px (main) 1fr (footer) 50px (last);
   }
 &lt;/style></pre>
 
@@ -1523,17 +1524,17 @@ <h4 id=repeat-notation><span class=secno>5.1.2. </span> Repeating Rows and
 &lt;style>
   #grid {
     display: grid;
-    grid-template-columns: 10px "col-start" 250px "col-end" 
-                             10px "col-start" 250px "col-end" 
-                             10px "col-start" 250px "col-end" 
-                             10px "col-start" 250px "col-end" 10px;
+    grid-template-columns: 10px (col-start) 250px (col-end) 
+                           10px (col-start) 250px (col-end) 
+                           10px (col-start) 250px (col-end) 
+                           10px (col-start) 250px (col-end) 10px;
     grid-template-rows: 1fr;
   }
 
   /* Equivalent definition. */
   #grid {
     display: grid;
-    grid-template-columns: repeat(4, 10px "col-start" 250px "col-end") 10px;
+    grid-template-columns: repeat(4, 10px (col-start) 250px (col-end)) 10px;
     grid-template-rows: 1fr;
   }
 &lt;/style></pre>
@@ -1606,10 +1607,10 @@ <h4 id=resolved-track-list><span class=secno>5.1.4. </span> Resolved Values</h4>
   #grid {
     width: 500px;
     grid-template-columns:
-      "a"         auto
-      "b"         minmax(min-content, 1fr)
-      "b" "c" "d" repeat(2, "e" 40px)
-                  repeat(5, auto);
+      (a)     auto
+      (b)     minmax(min-content, 1fr)
+      (b c d) repeat(2, (e) 40px)
+              repeat(5, auto);
   }
 &lt;/style>
 &lt;div id="grid">
@@ -1619,7 +1620,7 @@ <h4 id=resolved-track-list><span class=secno>5.1.4. </span> Resolved Values</h4>
 &lt;script>
   var gridElement = document.getElementById("grid");
   getComputedStyle(gridElement).gridDefinitionColumns;
-  // "a" 50px "b" 320px "b" "c" "d" repeat(2, "e" 40px) repeat(4, 0px) 50px
+  // (a) 50px (b) 320px (b c d) repeat(2, (e) 40px) repeat(4, 0px) 50px
 &lt;/script></pre>
   </div>
 
@@ -2314,19 +2315,19 @@ <h3 id=grid-auto-flow-property><span class=secno>6.3. </span> Automatic
     display: grid;
     /* Define three columns, all content-sized,
        and name the corresponding lines. */
-    grid-template-columns: "labels" auto "controls" auto "oversized" auto;
+    grid-template-columns: (labels) auto (controls) auto (oversized) auto;
     grid-auto-flow: rows;
   }
   form > label {
     /* Place all labels in the "labels" column and 
        automatically find the next available row. */
-    grid-column: "labels";
+    grid-column: labels;
     grid-row: auto;
   }
   form > input, form > select {
     /* Place all controls in the "controls" column and 
        automatically find the next available row. */
-    grid-column: "controls";
+    grid-column: controls;
     grid-row: auto;
   }
 
@@ -2335,7 +2336,7 @@ <h3 id=grid-auto-flow-property><span class=secno>6.3. </span> Automatic
        in the first row where an area that spans three rows 
        won't overlap other explicitly placed items or areas 
        or any items automatically placed prior to this area. */
-    grid-column: "oversized";
+    grid-column: oversized;
     grid-row: span 3;
   }
 
@@ -2346,7 +2347,7 @@ <h3 id=grid-auto-flow-property><span class=secno>6.3. </span> Automatic
 
     /* Ensure the button area spans the entire grid element 
        in the row axis. */
-    grid-column: 1 / 1;
+    grid-column: 1 / -1;
     text-align: end;
   }
 &lt;/style>
@@ -3885,6 +3886,9 @@ <h2 class=no-num id=index> Index</h2>
     href="#function-ResolveContentBasedTrackSizingFunctionsForItems-inputs"
     title="section 8.2."><strong>8.2.</strong></a>
 
+   <li>&lt;line-names>, <a href="#ltline-names"
+    title="section 5.1."><strong>5.1.</strong></a>
+
    <li>max-content, <a href="#max-content"
     title="section 5.1."><strong>5.1.</strong></a>