[css-variables] Split apart custom properties chapter into sub-sections.

Author: tabatkins

css-variables/Overview.html

@@ -74,7 +74,10 @@ <h2 id="contents" class="no-num no-toc no-ref">Table of contents</h2>
 Introduction</a><ul class="toc"><li><a href="#module-interactions"><span class="secno">1.1 </span>
 Module Interactions</a></li><li><a href="#values"><span class="secno">1.2 </span>
 Values</a></li></ul></li><li><a href="#defining-variables"><span class="secno">2 </span>
-Defining Custom Properties: the <span data-autolink="property" href="#var-" class="property" title="var-*">var-*</span> family of properties</a></li><li><a href="#using-variables"><span class="secno">3 </span>
+Defining Custom Properties: the <span data-autolink="property" href="#var-" class="property" title="var-*">var-*</span> family of properties</a><ul class="toc"><li><a href="#syntax"><span class="secno">2.1 </span>
+Custom Property Value Syntax</a></li><li><a href="#using"><span class="secno">2.2 </span>
+Using Custom Properties</a></li><li><a href="#cycles"><span class="secno">2.3 </span>
+Resolving Dependency Cycles</a></li></ul></li><li><a href="#using-variables"><span class="secno">3 </span>
 Using Cascading Variables: the <span data-autolink="maybe" href="#variable-type" class="css">var()</span> notation</a><ul class="toc"><li><a href="#invalid-variables"><span class="secno">3.1 </span>
 Invalid Variables</a></li></ul></li><li><a href="#cssom"><span class="secno">4 </span>
 APIs</a><ul class="toc"><li><a href="#the-cssstyledeclaration-interface"><span class="secno">4.1 </span>
@@ -222,6 +225,9 @@ <h2 id="introduction" data-level="1"><span class="secno">1 </span>
 		while using <span data-autolink="maybe" class="css">var(FOO)</span> will refer to the second.
 	</p></div>
 
+<h3 id="syntax" data-level="2.1"><span class="secno">2.1 </span>
+Custom Property Value Syntax</h3>
+
 <p>	The allowed syntax for <a data-autolink="link" href="#custom-property">custom properties</a> is extremely permissive.
 	The <dfn id="any-value-production">&lt;any-value&gt;</dfn> production matches <em>any</em> sequence of one or more tokens,
 	so long as the sequence does not contain
@@ -273,7 +279,10 @@ <h2 id="introduction" data-level="1"><span class="secno">1 </span>
 	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>.
+</p><h3 id="using" data-level="2.2"><span class="secno">2.2 </span>
+Using Custom Properties</h3>
+
+<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,
 	allowing authors to "abstract" parts of their page's CSS out
 	and reuse it in several places.
@@ -336,6 +345,9 @@ <h2 id="introduction" data-level="1"><span class="secno">1 </span>
 &lt;/div&gt;
 </pre>	</div>
 
+<h3 id="cycles" data-level="2.3"><span class="secno">2.3 </span>
+Resolving Dependency Cycles</h3>
+
 <p>	<a data-autolink="link" href="#custom-property">Custom properties</a> may use variables in their own values to build up composite variables.
 	This can create cyclic dependencies
 	where two or more <a data-autolink="link" href="#custom-property">custom properties</a> each attempt to use the variable that the other defines;
@@ -948,7 +960,7 @@ <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>&lt;any-value&gt;, <a href="#any-value-production" title="section 2">2</a></li><li>associated style declaration, <a href="#associated-style-declaration" title="section 4.1">4.1</a></li><li>cascading variable, <a href="#cascading-variable" title="section 2">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>CSSVariablesMap, <a href="#cssvariablesmap" title="section 4.2">4.2</a></li><li>custom property, <a href="#custom-property" title="section 2">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>resolve a variable, <a href="#resolve-a-variable" title="section 3">3</a></li><li>var(), <a href="#variable-type" title="section 3">3</a></li><li>var-*, <a href="#var-" title="section 2">2</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>
+<div data-fill-with="index"><ul class="indexlist"><li>&lt;any-value&gt;, <a href="#any-value-production" title="section 2.1">2.1</a></li><li>associated style declaration, <a href="#associated-style-declaration" title="section 4.1">4.1</a></li><li>cascading variable, <a href="#cascading-variable" title="section 2.2">2.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>CSSVariablesMap, <a href="#cssvariablesmap" title="section 4.2">4.2</a></li><li>custom property, <a href="#custom-property" title="section 2">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>resolve a variable, <a href="#resolve-a-variable" title="section 3">3</a></li><li>var(), <a href="#variable-type" title="section 3">3</a></li><li>var-*, <a href="#var-" title="section 2">2</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">2.2</a></li></ul></div>
 
 <h2 id="property-index" class="no-num no-ref">
 Property index</h2>

css-variables/Overview.src.html

@@ -152,6 +152,9 @@ <h2 id='defining-variables'>
 		while using ''var(FOO)'' will refer to the second.
 	</div>
 
+<h3 id='syntax'>
+Custom Property Value Syntax</h3>
+
 	The allowed syntax for <a>custom properties</a> is extremely permissive.
 	The <dfn>&lt;any-value></dfn> production matches <em>any</em> sequence of one or more tokens,
 	so long as the sequence does not contain
@@ -205,6 +208,9 @@ <h2 id='defining-variables'>
 	This initial value has a special interaction with the ''var()'' notation,
 	which is explained in the section defining ''var()''.
 
+<h3 id='using'>
+Using Custom Properties</h3>
+
 	The primary purpose of <a>custom properties</a> is to define <a>cascading variables</a>.
 	In CSS, a <dfn title="variable|cascading variable">cascading variable</dfn> is a value that can be substituted into other properties,
 	allowing authors to "abstract" parts of their page's CSS out
@@ -274,6 +280,9 @@ <h2 id='defining-variables'>
 		</pre>
 	</div>
 
+<h3 id='cycles'>
+Resolving Dependency Cycles</h3>
+
 	<a>Custom properties</a> may use variables in their own values to build up composite variables.
 	This can create cyclic dependencies
 	where two or more <a>custom properties</a> each attempt to use the variable that the other defines;