Add more detail to keywords section, define <identifier> type and case-sensitivity.

Author: fantasai

css3-values/Overview.html

@@ -146,20 +146,20 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
    <li><a href="#value-defs"><span class=secno>2. </span> Value Definition
     Syntax</a>
     <ul class=toc>
-     <li><a href="#value-types"><span class=secno>2.1. </span> Component
+     <li><a href="#component-types"><span class=secno>2.1. </span> Component
       value types</a>
 
-     <li><a href="#value-types"><span class=secno>2.2. </span> Component
-      value combinators</a>
+     <li><a href="#component-combinators"><span class=secno>2.2. </span>
+      Component value combinators</a>
 
-     <li><a href="#value-types"><span class=secno>2.3. </span> Component
-      value multipliers</a>
+     <li><a href="#component-multipliers"><span class=secno>2.3. </span>
+      Component value multipliers</a>
 
-     <li><a href="#value-types"><span class=secno>2.4. </span> Component
-      values and white space</a>
+     <li><a href="#component-whitespace"><span class=secno>2.4. </span>
+      Component values and white space</a>
 
-     <li><a href="#value-types"><span class=secno>2.5. </span> Property value
-      examples</a>
+     <li><a href="#value-examples"><span class=secno>2.5. </span> Property
+      value examples</a>
     </ul>
 
    <li><a href="#syntax-and-terminology"><span class=secno>3. </span>Syntax
@@ -168,16 +168,27 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
      <li><a href="#numbers-with-unit-identifiers"><span class=secno>3.1.
       </span>Numbers with unit identifiers</a>
 
-     <li><a href="#identifiers"><span class=secno>3.2. </span>Identifiers</a>
-      
-
-     <li><a href="#strings"><span class=secno>3.3. </span>Strings</a>
+     <li><a href="#strings"><span class=secno>3.2. </span>Strings</a>
 
-     <li><a href="#functional-notation"><span class=secno>3.4.
+     <li><a href="#functional-notation"><span class=secno>3.3.
       </span>Functional notation</a>
     </ul>
 
-   <li><a href="#keywords"><span class=secno>4. </span>Keywords</a>
+   <li><a href="#idents"><span class=secno>4. </span> Keywords and
+    Identifiers</a>
+    <ul class=toc>
+     <li><a href="#keywords"><span class=secno>4.1. </span> Pre-defined
+      Keywords</a>
+      <ul class=toc>
+       <li><a href="#initial-inherit"><span class=secno>4.1.1. </span> The
+        &lsquo;<code class=css>initial</code>&rsquo; and &lsquo;<code
+        class=css>inherit</code>&rsquo; keywords</a>
+      </ul>
+
+     <li><a href="#identifiers"><span class=secno>4.2. </span> User-defined
+      Identifiers: the &lsquo;<code
+      class=css>&lt;identifier&gt;</code>&rsquo; type</a>
+    </ul>
 
    <li><a href="#numeric-types"><span class=secno>5. </span> Numeric Data
     Types</a>
@@ -319,7 +330,7 @@ <h2 id=value-defs><span class=secno>2. </span> Value Definition Syntax</h2>
   <p>The syntax described here is used to define the set of valid values for
    CSS properties. A property value can have one or more components.
 
-  <h3 id=value-types><span class=secno>2.1. </span> Component value types</h3>
+  <h3 id=component-types><span class=secno>2.1. </span> Component value types</h3>
 
   <p>Component value types are designated in several ways:
 
@@ -355,7 +366,16 @@ <h3 id=value-types><span class=secno>2.1. </span> Component value types</h3>
   <p>Some property value definitions also include the slash (/) and/or the
    comma (,) as literals. These represent their corresponding tokens.
 
-  <h3 id=value-types><span class=secno>2.2. </span> Component value
+  <p>All CSS properties also accept the keyword values &lsquo;<code
+   class=css>inherit</code>&rsquo; and &lsquo;<code
+   class=css>initial</code>&rsquo; as their property value, but for
+   readability these are not listed explicitly in the property value syntax
+   definitions. These keywords cannot be combined with other component values
+   in same declaration; such a declaration is invalid. For example,
+   &lsquo;<code class=css>background: url(corner.png) no-repeat,
+   inherit;</code>&rsquo; is invalid.
+
+  <h3 id=component-combinators><span class=secno>2.2. </span> Component value
    combinators</h3>
 
   <p>Component values can be arranged into property values as follows:
@@ -384,7 +404,7 @@ <h3 id=value-types><span class=secno>2.2. </span> Component value
 <!---->  a b   |   c ||   d &&   e f
 <!---->[ a b ] | [ c || [ d && [ e f ]]]</pre>
 
-  <h3 id=value-types><span class=secno>2.3. </span> Component value
+  <h3 id=component-multipliers><span class=secno>2.3. </span> Component value
    multipliers</h3>
 
   <p>Every type, keyword, or bracketed group may be followed by one of the
@@ -408,8 +428,8 @@ <h3 id=value-types><span class=secno>2.3. </span> Component value
     occurs one or more times, separated by comma tokens.
   </ul>
 
-  <h3 id=value-types><span class=secno>2.4. </span> Component values and
-   white space</h3>
+  <h3 id=component-whitespace><span class=secno>2.4. </span> Component values
+   and white space</h3>
 
   <p>Component values are specified in terms of tokens, as described in <a
    href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">Chapter 4</a>
@@ -428,7 +448,8 @@ <h3 id=value-types><span class=secno>2.4. </span> Component values and
    to get this parsed as the two lengths &lsquo;<code
    class=css>1em</code>&rsquo; and &lsquo;<code class=css>2em</code>&rsquo;.
 
-  <h3 id=value-types><span class=secno>2.5. </span> Property value examples</h3>
+  <h3 id=value-examples><span class=secno>2.5. </span> Property value
+   examples</h3>
 
   <p>Below are some examples of properties with their corresponding value
    definition fields
@@ -532,21 +553,7 @@ <h3 id=numbers-with-unit-identifiers><span class=secno>3.1. </span>Numbers
 </pre>
   </div>
 
-  <h3 id=identifiers><span class=secno>3.2. </span>Identifiers</h3>
-
-  <p>An <dfn id=identifier>identifier</dfn> is an sequence of characters.
-   Identifiers cannot start with a digit, and there are other restrictions <a
-   href="#CSS3SYN" rel=biblioentry>[CSS3SYN]<!--{{!CSS3SYN}}--></a> on what
-   characters an identifier can contain. Identifiers must not be quoted.
-
-  <div class=example>
-   <pre>
-pitch-range: inherit;
-counter-increment: header;
-</pre>
-  </div>
-
-  <h3 id=strings><span class=secno>3.3. </span>Strings</h3>
+  <h3 id=strings><span class=secno>3.2. </span>Strings</h3>
 
   <p>A <dfn id=string>string</dfn> is a sequence of characters enclosed by
    double quotes or single quotes. Double quotes cannot occur inside double
@@ -585,7 +592,7 @@ <h3 id=strings><span class=secno>3.3. </span>Strings</h3>
 </pre>
   </div>
 
-  <h3 id=functional-notation><span class=secno>3.4. </span>Functional
+  <h3 id=functional-notation><span class=secno>3.3. </span>Functional
    notation</h3>
 
   <p>Some values use a <dfn id=functional-notation0>functional notation</dfn>
@@ -606,45 +613,86 @@ <h3 id=functional-notation><span class=secno>3.4. </span>Functional
    that is not a compound value is a <dfn id=simple-value>simple value</dfn>.
 
 
-  <h2 id=keywords><span class=secno>4. </span>Keywords</h2>
+  <h2 id=idents><span class=secno>4. </span> Keywords and Identifiers</h2>
+
+  <p>An <dfn id=identifier>identifier</dfn> is a sequence of characters
+   conforming to the <code>IDENT</code> token in the <a
+   href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">grammar</a>.
+   <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> Identifiers
+   cannot be quoted; otherwise they would be interpreted as a string.
 
-  <p>In the value definition fields, keywords appear literally. Keywords are
-   identifiers.
+  <h3 id=keywords><span class=secno>4.1. </span> Pre-defined Keywords</h3>
+
+  <p>In the value definition fields, keywords with a pre-defined meaning
+   appear literally. Keywords are CSS <i>identifiers</i> and are interpreted
+   case-insensitively within the ASCII range (i.e., [a-z] and [A-Z] are
+   equivalent).
 
   <div class=example>
    <p>For example, here is the value definition for the &lsquo;<code
     class=property>border-collapse</code>&rsquo; property:</p>
 
-   <pre>
-Value:&nbsp;collapse | separate
-</pre>
+   <pre>Value:&nbsp;collapse | separate</pre>
 
    <p>And here is an example of its use:</p>
 
-   <pre>
-table { border-collapse: separate }
-</pre>
+   <pre>table { border-collapse: separate }</pre>
   </div>
 
-  <p>All CSS3 properties accept the keyword values <span
-   class=css>&lsquo;<code class=property>inherit</code>&rsquo;</span> and
-   <span class=css>&lsquo;<code class=property>initial</code>&rsquo;</span>,
-   as described in <a href="#CSS3CASCADE"
-   rel=biblioentry>[CSS3CASCADE]<!--{{!CSS3CASCADE}}--></a>.
+  <h4 id=initial-inherit><span class=secno>4.1.1. </span> The &lsquo;<code
+   class=css>initial</code>&rsquo; and &lsquo;<code
+   class=css>inherit</code>&rsquo; keywords</h4>
+
+  <p>As defined <a href="#component-types">above</a>, all properties accept
+   the &lsquo;<code class=css>initial</code>&rsquo; and &lsquo;<code
+   class=css>inherit</code>&rsquo; keywords, which represent value concepts
+   common to all CSS properties.
+
+  <p>The <dfn id=inherit>&lsquo;<code class=css>inherit</code>&rsquo;</dfn>
+   keyword is <a
+   href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">defined</a>
+   in <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
+
+  <p>The <dfn id=initial>&lsquo;<code class=css>initial</code>&rsquo;</dfn>
+   keyword represents the value that is designated as the property's initial
+   value. <a href="#CSS3CASCADE"
+   rel=biblioentry>[CSS3CASCADE]<!--{{CSS3CASCADE}}--></a>
+
+  <p class=issue>Should these keywords affect the specified or computed
+   value? See <a
+   href="http://lists.w3.org/Archives/Public/www-style/2011Jan/0075.html">various</a>
+   <a
+   href="http://lists.w3.org/Archives/Public/www-style/2011May/0402.html">issues</a>.
+   
 
   <p class=issue>Would it be useful to have a &lsquo;<code
-   class=property>default</code>&rsquo; value, defined to be equivalent to
-   <span class=css>&lsquo;<code class=property>inherit</code>&rsquo;</span>
-   for properties that are inherited by default and equivalent to <span
-   class=css>&lsquo;<code class=property>initial</code>&rsquo;</span> for
-   properties that are not inherited by default? This might be easier for
-   authors to use than <span class=css>&lsquo;<code
-   class=property>initial</code>&rsquo;</span> and <span
-   class=css>&lsquo;<code class=property>inherit</code>&rsquo;</span> since
-   it wouldn't require thinking about whether a property is inherited by
-   default or not (which isn't obvious for some properties, such as
+   class=property>default</code>&rsquo; value, defined to be equivalent to <a
+   class=css href="#inherit">&lsquo;<code
+   class=property>inherit</code>&rsquo;</a> for properties that are inherited
+   by default and equivalent to <a class=css href="#initial">&lsquo;<code
+   class=property>initial</code>&rsquo;</a> for properties that are not
+   inherited by default? This might be easier for authors to use than <a
+   class=css href="#initial">&lsquo;<code
+   class=property>initial</code>&rsquo;</a> and <a class=css
+   href="#inherit">&lsquo;<code class=property>inherit</code>&rsquo;</a>
+   since it wouldn't require thinking about whether a property is inherited
+   by default or not (which isn't obvious for some properties, such as
    text-decoration and visibility).
 
+  <h3 id=identifiers><span class=secno>4.2. </span> User-defined Identifiers:
+   the &lsquo;<a href="#identifier-value"><code
+   class=css>&lt;identifier&gt;</code></a>&rsquo; type</h3>
+
+  <p>Some properties accept arbitrary user-defined identifiers as a component
+   value. This generic data type is denoted by <dfn
+   id=identifier-value><code>&lt;identifier&gt;</code></dfn>, and represents
+   any valid CSS <a href="#identifier"><i>identifier</i></a> that does not
+   otherwise appear as a pre-defined keyword in that property's value
+   definition. Such identifiers are fully case-sensitive, even in the ASCII
+   range (e.g. &lsquo;<code class=css>example</code>&rsquo; and &lsquo;<code
+   class=css>EXAMPLE</code>&rsquo; are two different, unrelated user-defined
+   identifiers).
+
   <h2 id=numeric-types><span class=secno>5. </span> Numeric Data Types</h2>
 
   <h3 id=integers><span class=secno>5.1. </span> Integers: the &lsquo;<a
@@ -1940,16 +1988,6 @@ <h3 class=no-num id=normative-references>Normative references</h3>
     href="http://www.w3.org/TR/2007/WD-css3-grid-20070905">http://www.w3.org/TR/2007/WD-css3-grid-20070905</a>
     </dd>
    <!---->
-
-   <dt id=CSS3SYN>[CSS3SYN]
-
-   <dd>L. David Baron. <a
-    href="http://www.w3.org/TR/2003/WD-css3-syntax-20030813"><cite>CSS3
-    module: Syntax.</cite></a> 13 August 2003. W3C Working Draft. (Work in
-    progress.) URL: <a
-    href="http://www.w3.org/TR/2003/WD-css3-syntax-20030813">http://www.w3.org/TR/2003/WD-css3-syntax-20030813</a>
-    </dd>
-   <!---->
   </dl>
   <!--end-normative-->
 
@@ -1961,6 +1999,16 @@ <h3 class=no-num id=other-references>Other references</h3>
    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
     <!---->
 
+   <dt id=CSS3CASCADE>[CSS3CASCADE]
+
+   <dd>H&#229;kon Wium Lie. <a
+    href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215"><cite>CSS3
+    module: Cascading and inheritance.</cite></a> 15 December 2005. W3C
+    Working Draft. (Work in progress.) URL: <a
+    href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215">http://www.w3.org/TR/2005/WD-css3-cascade-20051215</a>
+    </dd>
+   <!---->
+
    <dt id=CSS3NAMESPACE>[CSS3NAMESPACE]
 
    <dd>Elika J. Etemad; Anne van Kesteren. <a
@@ -2016,7 +2064,7 @@ <h2 class=no-num id=index>Index</h2>
     title="&lt;color&gt;"><strong>5.6.</strong></a>
 
    <li>compound value, <a href="#compound-value" title="compound
-    value"><strong>3.4.</strong></a>
+    value"><strong>3.3.</strong></a>
 
    <li>computed value, <a href="#computed-value" title="computed
     value"><strong>6.2.</strong></a>
@@ -2040,7 +2088,7 @@ <h2 class=no-num id=index>Index</h2>
     (unit)"><strong>5.13.1.</strong></a>
 
    <li>functional notation, <a href="#functional-notation0" title="functional
-    notation"><strong>3.4.</strong></a>
+    notation"><strong>3.3.</strong></a>
 
    <li>grad (grads), <a href="#grad" title="grad
     (grads)"><strong>5.7.</strong></a>
@@ -2052,7 +2100,17 @@ <h2 class=no-num id=index>Index</h2>
 
 
    <li>identifier, <a href="#identifier"
-    title=identifier><strong>3.2.</strong></a>
+    title=identifier><strong>4.</strong></a>
+
+   <li><a href="#identifier-value"><code>&lt;identifier&gt;</code></a>, <a
+    href="#identifier-value"
+    title="&lt;identifier&gt;"><strong>4.2.</strong></a>
+
+   <li>&lsquo;<code class=css>inherit</code>&rsquo;, <a href="#inherit"
+    title="''inherit''"><strong>4.1.1.</strong></a>
+
+   <li>&lsquo;<code class=css>initial</code>&rsquo;, <a href="#initial"
+    title="''initial''"><strong>4.1.1.</strong></a>
 
    <li>integer, <a href="#integer" title=integer><strong>5.1.</strong></a>
 
@@ -2072,7 +2130,7 @@ <h2 class=no-num id=index>Index</h2>
    <li>ms (milliseconds), <a href="#ms" title="ms
     (milliseconds)"><strong>5.8.</strong></a>
 
-   <li>newline, <a href="#newline" title=newline>3.3.</a>
+   <li>newline, <a href="#newline" title=newline>3.2.</a>
 
    <li>number, <a href="#number" title=number><strong>5.2.</strong></a>
 
@@ -2113,15 +2171,15 @@ <h2 class=no-num id=index>Index</h2>
    <li>root em, <a href="#rem" title="root em"><strong>5.4.2.4.</strong></a>
 
    <li>simple value, <a href="#simple-value" title="simple
-    value"><strong>3.4.</strong></a>
+    value"><strong>3.3.</strong></a>
 
    <li>specified value, <a href="#specified-value" title="specified
     value"><strong>6.1.</strong></a>
 
    <li>s (seconds), <a href="#s" title="s
     (seconds)"><strong>5.8.</strong></a>
 
-   <li>string, <a href="#string" title=string><strong>3.3.</strong></a>
+   <li>string, <a href="#string" title=string><strong>3.2.</strong></a>
 
    <li>&lt;string&gt;, <a href="#ltstringgt0"
     title="&lt;string&gt;"><strong>5.5.</strong></a>