[css-variables] Relax the <ident> requirement on custom property suffixes.

Author: tabatkins

css-variables/Overview.html

@@ -13,7 +13,7 @@
 </a></p>
   <h1 class="p-name no-ref" id="title">CSS Custom Properties for Cascading Variables Module Level 1</h1>
   <h2 class="no-num no-toc no-ref" id="subtitle">Editor's Draft,
-    <span class="dt-updated"><span class="value-title" title="20130330">30 March 2013</span></span></h2>
+    <span class="dt-updated"><span class="value-title" title="20130401">1 April 2013</span></span></h2>
   <div data-fill-with="spec-metadata"><dl><dt>This version:</dt><dd><a href="http://dev.w3.org/csswg/css-variables/" class="u-url">http://dev.w3.org/csswg/css-variables/</a></dd><dt>Latest version:</dt><dd><a href="http://www.w3.org/TR/css-variables/">http://www.w3.org/TR/css-variables/</a></dd><dt>Editor's Draft:</dt><dd><a href="http://dev.w3.org/csswg/css-variables/">http://dev.w3.org/csswg/css-variables/</a></dd><dt>Previous Versions:</dt><dd><a href="http://www.w3.org/TR/2013/WD-css-variables-20130312/" rel="previous">http://www.w3.org/TR/2013/WD-css-variables-20130312/</a></dd><dd><a href="http://www.w3.org/TR/2012/WD-css-variables-20120410/" rel="previous">http://www.w3.org/TR/2012/WD-css-variables-20120410/</a>
 </dd><dt>Feedback:</dt>
     <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-variables%5D%20feedback">www-style@w3.org</a> 
@@ -150,6 +150,7 @@ <h2 id="introduction" data-level="1"><span class="secno">1 </span>
 </p><table class="propdef"><tbody><tr><th>Name:</th><td><dfn id="var-">var-*</dfn></td></tr><tr><th>Values:</th><td>[ <a data-autolink="link" class="production" href="#value-production"><var>&lt;value&gt;</var></a> | <a data-autolink="link" class="production" href="#cdo-production"><var>&lt;CDO&gt;</var></a> | <a data-autolink="link" class="production" href="#cdc-production"><var>&lt;CDC&gt;</var></a> ]</td></tr><tr><th>Initial:</th><td>(nothing, see prose)</td></tr><tr><th>Applies To:</th><td>all elements</td></tr><tr><th>Inherited:</th><td>yes</td></tr><tr><th>Computed Value:</th><td>specified value with variables substituted (but see prose for "invalid variables")</td></tr><tr><th>Media:</th><td>all</td></tr></tbody></table>
 <p>	A <dfn id="custom-property">custom property</dfn> is any property
 	whose name starts with "var-",
+	and contains at least one additional character.
 	and the rest of the name conforms to the grammar for an identifier <a data-autolink="biblio" U00022="" data-biblio-type="normative" title="CSS3VAL" href="#css3val">[CSS3VAL]</a>.
 	<a data-autolink="link" href="#custom-property">Custom properties</a> are solely for use by authors and users;
 	CSS will never give them a meaning beyond what is presented here.
@@ -180,11 +181,12 @@ <h2 id="introduction" data-level="1"><span class="secno">1 </span>
 	</p></div>
 
 	<div class="example">
-		The part of the custom property name after the "var-"
-		must be an identifier by itself.
-		This means that, for example,
-		<a data-autolink="maybe" class="css">var-0</a> is not a valid custom property name,
+		Authors are recommended to choose custom property names
+		so that the part after the "var-" is an identifier by itself,
+		so that it can be referenced without <a href="http://www.w3.org/TR/CSS21/syndata.html#escaped-characters">character escaping</a>.
+		For example, <a data-autolink="property" class="property" title="var-0">var-0</a> needs to be referenced as <a data-autolink="maybe" class="css">var(\30)</a>,
 		because <a data-autolink="maybe" class="css">0</a> isn't a valid identifier.
+		(U+0030 is the hexadecimal code for the <a data-autolink="maybe" class="css">0</a> character.)
 	</div>
 
 <p>	Unlike other CSS properties,
@@ -686,7 +688,7 @@ <h3 id="the-cssstyledeclaration-interface" data-level="4.1"><span class="secno">
 				</td></tr><tr>
 					<td><code>el.style.var.Bar</code>
 					</td><td><code>"red"</code>
-					</td><td>The value of 'var-Bar'.
+					</td><td>The value of <a data-autolink="property" class="property" title="var-Bar">var-Bar</a>.
 				</td></tr><tr>
 					<td><code>el.style.var["foo-bar"]</code>
 					</td><td><code>"50%"</code>
@@ -705,7 +707,7 @@ <h3 id="the-cssstyledeclaration-interface" data-level="4.1"><span class="secno">
 					</td><td>Retrieves the value of <a data-autolink="property" class="property" title="var-foo">var-foo</a>
 						(the string <code>"16px"</code>)
 						and subtracts some unrelated JavaScript variable named "bar" from it,
-						rather than just retrieving the value of 'var-foo-bar'.
+						rather than just retrieving the value of <a data-autolink="property" class="property" title="var-foo-bar">var-foo-bar</a>.
 		</td></tr></tbody></table>
 		<style scoped="">
 		#var-code-examples td { padding: 2px; }

css-variables/Overview.src.html

@@ -75,6 +75,7 @@ <h2 id='defining-variables'>
 
 	A <dfn>custom property</dfn> is any property
 	whose name starts with "var-",
+	and contains at least one additional character.
 	and the rest of the name conforms to the grammar for an identifier [[!CSS3VAL]].
 	<a>Custom properties</a> are solely for use by authors and users;
 	CSS will never give them a meaning beyond what is presented here.
@@ -107,11 +108,12 @@ <h2 id='defining-variables'>
 	</div>
 
 	<div class='example'>
-		The part of the custom property name after the "var-"
-		must be an identifier by itself.
-		This means that, for example,
-		''var-0'' is not a valid custom property name,
+		Authors are recommended to choose custom property names
+		so that the part after the "var-" is an identifier by itself,
+		so that it can be referenced without <a href="http://www.w3.org/TR/CSS21/syndata.html#escaped-characters">character escaping</a>.
+		For example, 'var-0' needs to be referenced as ''var(\30)'',
 		because ''0'' isn't a valid identifier.
+		(U+0030 is the hexadecimal code for the ''0'' character.)
 	</div>
 
 	Unlike other CSS properties,