[css-variables] Dfn <fallback>.

Author: tabatkins

css-variables/Overview.html

@@ -147,7 +147,7 @@ <h2 id="introduction" data-level="1"><span class="secno">1 </span>
 <p>	This specification defines an open-ended set of properties called <a data-autolink="link" href="#custom-property">custom properties</a>,
 	which are used to define <a data-autolink="link" href="#cascading-variable">variables</a>.
 
-</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><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.
@@ -163,7 +163,7 @@ <h2 id="introduction" data-level="1"><span class="secno">1 </span>
 
 	</p><div class="example">
 		Custom properties define variables,
-		referenced with the <a data-autolink="maybe" class="css">var()</a> notation,
+		referenced with the <a data-autolink="maybe" class="css" href="#variable-type">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
@@ -233,8 +233,8 @@ <h2 id="introduction" data-level="1"><span class="secno">1 </span>
 
 </p><p>	The initial value of a <a data-autolink="link" 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 data-autolink="maybe" class="css">var()</a> notation,
-	which is explained in the section defining <a data-autolink="maybe" class="css">var()</a>.
+	This initial value has a special interaction with the <a data-autolink="maybe" class="css" href="#variable-type">var()</a> notation,
+	which is explained in the section defining <a data-autolink="maybe" class="css" href="#variable-type">var()</a>.
 
 </p><p>	The primary purpose of <a data-autolink="link" href="#custom-property">custom properties</a> is to define <a data-autolink="link" href="#cascading-variable">cascading variables</a>.
 	In CSS, a <dfn title="variable|cascading variable" id="cascading-variable">cascading variable</dfn> is a value that can be substituted into other properties,
@@ -392,13 +392,14 @@ <h2 id="introduction" data-level="1"><span class="secno">1 </span>
 
 
 <h2 id="using-variables" data-level="3"><span class="secno">3 </span>
-Using Cascading Variables: the <a data-autolink="maybe" class="css">var()</a> notation</h2>
+Using Cascading Variables: the <a data-autolink="maybe" class="css" href="#variable-type">var()</a> notation</h2>
 
 <p>	Every <a data-autolink="link" href="#custom-property">custom property</a> automatically defines a corresponding <a data-autolink="link" href="#cascading-variable">cascading variable</a>,
-	which can then be substituted into another property with the <a data-autolink="maybe" class="css">var()</a> function.
-	The syntax of <a data-autolink="maybe" class="css">var()</a> is:
+	which can then be substituted into another property with the <a data-autolink="maybe" class="css" href="#variable-type">var()</a> function.
+	The syntax of <a data-autolink="maybe" class="css" href="#variable-type">var()</a> is:
 
-	</p><pre><dfn id="default-var-type">&lt;variable&gt;</dfn> = var( <var>variable-name</var> [, <a data-autolink="link" class="production"><var>&lt;fallback&gt;</var></a> ]? )
+	</p><pre><dfn id="variable-type" title="&lt;variable&gt;|var()">&lt;variable&gt;</dfn> = var( <var>variable-name</var> [, <a data-autolink="link" class="production" href="#fallback-type"><var>&lt;fallback&gt;</var></a> ]? )
+<dfn id="fallback-type">&lt;fallback&gt;</dfn> = [ <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> ]+
 </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
@@ -408,22 +409,22 @@ <h2 id="using-variables" data-level="3"><span class="secno">3 </span>
 	(Doing so usually produces invalid syntax,
 	or else a value whose meaning has no connection to the variable.)
 
-</p><p>	The <a data-autolink="link" class="production"><var>&lt;fallback&gt;</var></a> value is identical to the syntax of a <a data-autolink="link" href="#custom-property">custom property</a> value:
+</p><p>	The <a data-autolink="link" class="production" href="#fallback-type"><var>&lt;fallback&gt;</var></a> value is identical to the syntax of a <a data-autolink="link" href="#custom-property">custom property</a> value:
 	it accepts anything allowed by the core syntax of CSS
 	(except that, since it's a value in a function rather than a value in a declaration,
-	some tokens that were allowed in a <a data-autolink="link" href="#custom-property">custom property</a> don't work in a <a data-autolink="link" class="production"><var>&lt;fallback&gt;</var></a> and vice versa,
+	some tokens that were allowed in a <a data-autolink="link" href="#custom-property">custom property</a> don't work in a <a data-autolink="link" class="production" href="#fallback-type"><var>&lt;fallback&gt;</var></a> and vice versa,
 	because they'd close the function early).
 
-</p><p class="note">	Note: The syntax of <a data-autolink="link" class="production"><var>&lt;fallback&gt;</var></a>, like that of <a data-autolink="link" href="#custom-property">custom properties</a>, allows commas.
+</p><p class="note">	Note: The syntax of <a data-autolink="link" class="production" href="#fallback-type"><var>&lt;fallback&gt;</var></a>, like that of <a data-autolink="link" href="#custom-property">custom properties</a>, allows commas.
 	For example, a variable use like <a data-autolink="maybe" class="css">var(foo, red, blue)</a> defines a fallback of <a data-autolink="maybe" class="css">red, blue</a>;
-	that is, anything between the first comma and the end of the function is considered a <a data-autolink="link" class="production"><var>&lt;fallback&gt;</var></a> value.
+	that is, anything between the first comma and the end of the function is considered a <a data-autolink="link" class="production" href="#fallback-type"><var>&lt;fallback&gt;</var></a> value.
 
 </p><p>	If the variable named by the first argument is valid, 
 	the variable's value is substituted as normal. 
 	If the variable is invalid, 
-	and a <a data-autolink="link" class="production"><var>&lt;fallback&gt;</var></a> was provided, 
-	the <a data-autolink="link" class="production"><var>&lt;fallback&gt;</var></a> is substituted instead. 
-	Otherwise, the result of evaluating the <a data-autolink="maybe" class="css">var()</a> function will mean 
+	and a <a data-autolink="link" class="production" href="#fallback-type"><var>&lt;fallback&gt;</var></a> was provided, 
+	the <a data-autolink="link" class="production" href="#fallback-type"><var>&lt;fallback&gt;</var></a> is substituted instead. 
+	Otherwise, the result of evaluating the <a data-autolink="maybe" class="css" href="#variable-type">var()</a> function will mean 
 	that the containing declaration is invalid at computed-value time.
 
 	</p><div class="example">
@@ -894,11 +895,11 @@ <h3 id="informative" class="no-num no-ref">
 
 <h2 id="index" class="no-num no-ref">
 Index</h2>
-<div data-fill-with="index"><ul class="indexlist"><li>associated style declaration, <a href="#associated-style-declaration" title="section 4.1">4.1</a></li><li>authoring tool, <a href="#authoring-tool" title="section ??">??</a></li><li>cascading variable, <a href="#cascading-variable" title="section 2">2</a></li><li>&lt;CDC&gt;, <a href="#cdc-production" title="section 2">2</a></li><li>&lt;CDO&gt;, <a href="#cdo-production" title="section 2">2</a></li><li>creator, <a href="#cssvariablesdeclaration-creator" title="section 4.2">4.2</a></li><li>CSS declaration block declarations, <a href="#css-declaration-block-declarations" title="section 4.2">4.2</a></li><li>CSSStyleDeclaration, <a href="#cssstyledeclaration" title="section 4.1">4.1</a></li><li>CSSVariablesDeclaration, <a href="#cssvariablesdeclaration" title="section 4.2">4.2</a></li><li>custom property, <a href="#custom-property" title="section 2">2</a></li><li>deleter, <a href="#cssvariablesdeclaration-deleter" title="section 4.2">4.2</a></li><li>getter, <a href="#cssvariablesdeclaration-getter" title="section 4.2">4.2</a></li><li>invalid at computed-value time, <a href="#invalid-at-computed-value-time" title="section 3.1">3.1</a></li><li>invalid variable, <a href="#invalid-variable" title="section 3.1">3.1</a></li><li>renderer, <a href="#renderer" title="section ??">??</a></li><li>setter, <a href="#cssvariablesdeclaration-setter" title="section 4.2">4.2</a></li><li>style sheet!!as conformance class, <a href="#style-sheet" title="section ??">??</a></li><li>&lt;value&gt;, <a href="#value-production" title="section 2">2</a></li><li>var-*, <a href="#var-" title="section 2">2</a></li><li>&lt;variable&gt;, <a href="#default-var-type" title="section 3">3</a></li><li>variable, <a href="#cascading-variable" title="section 2">2</a></li></ul></div>
+<div data-fill-with="index"><ul class="indexlist"><li>associated style declaration, <a href="#associated-style-declaration" title="section 4.1">4.1</a></li><li>authoring tool, <a href="#authoring-tool" title="section ??">??</a></li><li>cascading variable, <a href="#cascading-variable" title="section 2">2</a></li><li>&lt;CDC&gt;, <a href="#cdc-production" title="section 2">2</a></li><li>&lt;CDO&gt;, <a href="#cdo-production" title="section 2">2</a></li><li>creator, <a href="#cssvariablesdeclaration-creator" title="section 4.2">4.2</a></li><li>CSS declaration block declarations, <a href="#css-declaration-block-declarations" title="section 4.2">4.2</a></li><li>CSSStyleDeclaration, <a href="#cssstyledeclaration" title="section 4.1">4.1</a></li><li>CSSVariablesDeclaration, <a href="#cssvariablesdeclaration" title="section 4.2">4.2</a></li><li>custom property, <a href="#custom-property" title="section 2">2</a></li><li>deleter, <a href="#cssvariablesdeclaration-deleter" title="section 4.2">4.2</a></li><li>&lt;fallback&gt;, <a href="#fallback-type" title="section 3">3</a></li><li>getter, <a href="#cssvariablesdeclaration-getter" title="section 4.2">4.2</a></li><li>invalid at computed-value time, <a href="#invalid-at-computed-value-time" title="section 3.1">3.1</a></li><li>invalid variable, <a href="#invalid-variable" title="section 3.1">3.1</a></li><li>renderer, <a href="#renderer" title="section ??">??</a></li><li>setter, <a href="#cssvariablesdeclaration-setter" title="section 4.2">4.2</a></li><li>style sheet!!as conformance class, <a href="#style-sheet" title="section ??">??</a></li><li>&lt;value&gt;, <a href="#value-production" title="section 2">2</a></li><li>var-*, <a href="#var-" title="section 2">2</a></li><li>var(), <a href="#variable-type" title="section 3">3</a></li><li>&lt;variable&gt;, <a href="#variable-type" title="section 3">3</a></li><li>variable, <a href="#cascading-variable" title="section 2">2</a></li></ul></div>
 
 <h2 id="property-index" class="no-num no-ref">
 Property index</h2>
-<div data-fill-with="property-index"><table class="proptable"><thead><tr><th scope="col">Name</th><th scope="col">Values</th><th scope="col">Initial</th><th scope="col">Applies To</th><th scope="col">Inh.</th><th scope="col">%ages</th><th scope="col">Media</th><th scope="col">Computed Value</th></tr><tr><th scope="row"><a data-property="" data-autolink="link" href="#var-">var-*</a></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><td>(nothing, see prose)</td><td>all elements</td><td>yes</td><td></td><td>all</td><td>specified value with variables substituted (but see prose for "invalid variables")</td></tr></thead></table></div>
+<div data-fill-with="property-index"><table class="proptable"><thead><tr><th scope="col">Name</th><th scope="col">Values</th><th scope="col">Initial</th><th scope="col">Applies To</th><th scope="col">Inh.</th><th scope="col">%ages</th><th scope="col">Media</th><th scope="col">Computed Value</th></tr><tr><th scope="row"><a data-property="" data-autolink="link" href="#var-">var-*</a></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><td>(nothing, see prose)</td><td>all elements</td><td>yes</td><td></td><td>all</td><td>specified value with variables substituted (but see prose for "invalid variables")</td></tr></thead></table></div>
 
 
 </body></html>

css-variables/Overview.src.html

@@ -65,7 +65,7 @@ <h2 id='defining-variables'>
 
 	<xmp class='propdef'>
 	Name: var-*
-	Values: [ <<value>> | <<CDO>> | <<CDC>> ]
+	Values: [ <<value>> | <<CDO>> | <<CDC>> ]+
 	Initial: (nothing, see prose)
 	Applies To: all elements
 	Inherited: yes
@@ -340,7 +340,8 @@ <h2 id='using-variables'>
 	The syntax of ''var()'' is:
 
 	<pre>
-	<dfn id='default-var-type'>&lt;variable></dfn> = var( <var>variable-name</var> [, <<fallback>> ]? )
+	<dfn id='variable-type' title="<variable>|var()">&lt;variable></dfn> = var( <var>variable-name</var> [, <<fallback>> ]? )
+	<dfn id='fallback-type'>&lt;fallback></dfn> = [ <<value>> | <<CDO>> | <<CDC>> ]+
 	</pre>
 
 	A variable can be used in place of any part of a value in any property on an element.