[css-variables] Specify that the first argument of var() must be an ident.

Author: tabatkins

css-variables/Overview.html

@@ -181,7 +181,7 @@ <h2 data-level=2 id=defining-variables><span class=secno>2 </span><span class=co
 
 	<div class=example>
 		Custom properties define variables,
-		referenced with the <a class=css data-link-type=maybe href=#variable-type>var()</a> notation,
+		referenced with the <a class=css data-link-type=maybe href=#funcdef-var>var()</a> notation,
 		which can be used for many purposes.
 		For example, a page that consistently uses a small set of colors in its design
 		can store the colors in custom properties
@@ -269,8 +269,8 @@ <h3 data-level=2.1 id=syntax><span class=secno>2.1 </span><span class=content>
 
 <p>	The initial value of a <a href=#custom-property>custom property</a> is an empty value;
 	that is, nothing at all.
-	This initial value has a special interaction with the <a class=css data-link-type=maybe href=#variable-type>var()</a> notation,
-	which is explained in the section defining <a class=css data-link-type=maybe href=#variable-type>var()</a>.
+	This initial value has a special interaction with the <a class=css data-link-type=maybe href=#funcdef-var>var()</a> notation,
+	which is explained in the section defining <a class=css data-link-type=maybe href=#funcdef-var>var()</a>.
 
 <h3 data-level=2.2 id=using><span class=secno>2.2 </span><span class=content>
 Using Custom Properties</span><a class=section-link href=#using>§</a></h3>
@@ -434,13 +434,13 @@ <h3 data-level=2.3 id=cycles><span class=secno>2.3 </span><span class=content>
 
 
 <h2 data-level=3 id=using-variables><span class=secno>3 </span><span class=content>
-Using Cascading Variables: the <a class=css data-link-type=maybe href=#variable-type>var()</a> notation</span><a class=section-link href=#using-variables>§</a></h2>
+Using Cascading Variables: the <a class=css data-link-type=maybe href=#funcdef-var>var()</a> notation</span><a class=section-link href=#using-variables>§</a></h2>
 
 <p>	Every <a href=#custom-property>custom property</a> automatically defines a corresponding <a href=#cascading-variable>cascading variable</a>,
-	which can then be substituted into another property with the <a class=css data-link-type=maybe href=#variable-type>var()</a> function.
-	The syntax of <a class=css data-link-type=maybe href=#variable-type>var()</a> is:
+	which can then be substituted into another property with the <a class=css data-link-type=maybe href=#funcdef-var>var()</a> function.
+	The syntax of <a class=css data-link-type=maybe href=#funcdef-var>var()</a> is:
 
-	<pre class=prod><dfn data-dfn-type=type data-export="" id=variable-type title="<variable>|var()">&lt;variable&gt;</dfn> = var( <var>variable-name</var> [, <a class=production data-link-type=type href=#typedef-any-value>&lt;any-value&gt;</a> ]? )
+	<pre class=prod><dfn data-dfn-type=function data-export="" id=funcdef-var>var()</dfn> = var( <a class=production data-link-type=type>&lt;ident&gt;</a> [, <a class=production data-link-type=type href=#typedef-any-value>&lt;any-value&gt;</a> ]? )
 </pre>
 <p>	A variable can be used in place of any part of a value in any property on an element.
 	Variables can not be used as
@@ -450,7 +450,8 @@ <h2 data-level=3 id=using-variables><span class=secno>3 </span><span class=conte
 	(Doing so usually produces invalid syntax,
 	or else a value whose meaning has no connection to the variable.)
 
-<p>	The second argument to the function, if provided,
+<p>	The first argument to the function is the name of the variable to be substituted.
+	The second argument to the function, if provided,
 	is a fallback value,
 	which is used as the substitution value when the referenced variable is invalid.
 
@@ -466,18 +467,18 @@ <h2 data-level=3 id=using-variables><span class=secno>3 </span><span class=conte
 
 	<ol>
 		<li>
-			If the variable named by the first argument to the <a class=css data-link-type=maybe href=#variable-type>var()</a> function is a valid variable,
-			replace the <a class=css data-link-type=maybe href=#variable-type>var()</a> function by the value of the corresponding <a href=#custom-property>custom property</a>.
+			If the variable named by the first argument to the <a class=css data-link-type=maybe href=#funcdef-var>var()</a> function is a valid variable,
+			replace the <a class=css data-link-type=maybe href=#funcdef-var>var()</a> function by the value of the corresponding <a href=#custom-property>custom property</a>.
 
 		<li>
-			Otherwise, if the <a class=css data-link-type=maybe href=#variable-type>var()</a> function has a fallback value as its second argument,
-			replace the <a class=css data-link-type=maybe href=#variable-type>var()</a> function by the fallback value.
-			If there are any <a class=css data-link-type=maybe href=#variable-type>var()</a> references in the fallback,
+			Otherwise, if the <a class=css data-link-type=maybe href=#funcdef-var>var()</a> function has a fallback value as its second argument,
+			replace the <a class=css data-link-type=maybe href=#funcdef-var>var()</a> function by the fallback value.
+			If there are any <a class=css data-link-type=maybe href=#funcdef-var>var()</a> references in the fallback,
 			<a href=#resolve-a-variable title="resolve a variable">resolve</a> them as well.
 
 		<li>
 			Otherwise,
-			the property containing the <a class=css data-link-type=maybe href=#variable-type>var()</a> function is <a href=#invalid-at-computed-value-time>invalid at computed-value time</a>.
+			the property containing the <a class=css data-link-type=maybe href=#funcdef-var>var()</a> function is <a href=#invalid-at-computed-value-time>invalid at computed-value time</a>.
 
 <p class=note>			Note: Other things can also make a property <a href=#invalid-at-computed-value-time>invalid at computed-value time</a>.
 	</ol>
@@ -964,9 +965,8 @@ <h2 class="no-num no-ref" id=index><span class=content>
 <li>invalid at computed-value time, <a href=#invalid-at-computed-value-time title="section 3.1">3.1</a>
 <li>invalid variable, <a href=#invalid-variable title="section 3.1">3.1</a>
 <li>resolve a variable, <a href=#resolve-a-variable title="section 3">3</a>
-<li>var(), <a href=#variable-type title="section 3">3</a>
+<li>var(), <a href=#funcdef-var title="section 3">3</a>
 <li>variable, <a href=#cascading-variable title="section 2.2">2.2</a>
-<li>&lt;variable&gt;, <a href=#variable-type title="section 3">3</a>
 </ul></div>
 
 <h2 class="no-num no-ref" id=property-index><span class=content>

css-variables/Overview.src.html

@@ -10,7 +10,7 @@ <h1>CSS Custom Properties for Cascading Variables Module Level 1</h1>
 Previous Version: http://www.w3.org/TR/2012/WD-css-variables-20120410/
 Editor: Tab Atkins Jr., Google, http://xanthir.com/contact
 Abstract: This module introduces cascading variables as a new primitive value type that is accepted by all CSS properties, and custom properties for defining them.
-Ignored Terms: var-0, var-foo, var-main-color, var-Bar, var-two, var-header-color, var-accent-background, var-foo-bar, var-bar, var-one
+Ignored Terms: var-0, var-foo, var-main-color, var-Bar, var-two, var-header-color, var-accent-background, var-foo-bar, var-bar, var-one, <ident>
 </pre>
 
 <h2>
@@ -386,7 +386,7 @@ <h2 id='using-variables'>
 	The syntax of ''var()'' is:
 
 	<pre class='prod'>
-	<dfn id='variable-type' title="<variable>|var()">&lt;variable></dfn> = var( <var>variable-name</var> [, <<any-value>> ]? )
+	<dfn>var()</dfn> = var( <<ident>> [, <<any-value>> ]? )
 	</pre>
 
 	A variable can be used in place of any part of a value in any property on an element.
@@ -397,6 +397,7 @@ <h2 id='using-variables'>
 	(Doing so usually produces invalid syntax,
 	or else a value whose meaning has no connection to the variable.)
 
+	The first argument to the function is the name of the variable to be substituted.
 	The second argument to the function, if provided,
 	is a fallback value,
 	which is used as the substitution value when the referenced variable is invalid.