[css-ui-4] Reorganise the section on appearance for better legibility

Author: frivoal

css-ui-4/Overview.bs

@@ -1829,7 +1829,7 @@ Animation type: discrete
 		Replaced elements other than form controls are not affected by this,
 		and remain replaced elements.
 		Form controls are <em>not</em> made to look like native controls of the host operating system.
-		See below for details.
+		See [[#appearance-decorative]] and [[#appearance-semantics]] for details.
 
 	<dt><dfn>auto</dfn>
 	<dd>
@@ -1872,6 +1872,32 @@ Animation type: discrete
 
 </dl>
 
+<div class=example>
+	An author wanting to customize the look and feel of check boxes in HTML could use the following:
+	<pre><code class="lang-css">
+	input[type=checkbox] {
+		all: unset; /* this shorthand includes resetting appearance to none */
+		width: 1em;
+		height: 1em;
+		display: inline-block;
+		background: red;
+	}
+	input[type=checkbox]:checked {
+		border-radius: 50%;
+		background: green;
+	}
+	input[type=checkbox]:focus-visible {
+		outline: auto;
+	}
+	</code></pre>
+
+	<code class="lang-markup">&lt;input type="checkbox"></code> would be rendered as
+	<span style="display: inline-block; width: 1em; height: 1em; background: red;"></span>,
+	while <code class="lang-markup">&lt;input type="checkbox" checked></code> would be rendered as
+	<span style="display: inline-block; width: 1em; height: 1em; background: green; border-radius: 50%;"></span>,
+	and activating (for example by clicking) the element would toggle the state as usual.
+</div>
+
 On form control elements where the computed value is ''appearance/auto'' or one of the <<compat>> values,
 and on any element where the computed value is ''appearance/button'',
 UAs may disregard some CSS properties
@@ -1904,6 +1930,12 @@ blacklisting those that are not?
 Either way, UAs do ignore some properties when rendering form controls,
 so this specification needs to say something about this.
 
+For compatibility with legacy content, UAs must also support <dfn property export>-webkit-appearance</dfn>
+as a [=legacy name alias=] of 'appearance'.
+
+<h4 id=appearance-decorative>
+Effects of 'appearance' on Decorative Aspects of Elements</h4>
+
 All decorative visual aspects of a form control which are not caused by a CSS style rule
 must be suppressed when the appearance is changed using 'appearance',
 even if the UA's internal representation for this element
@@ -1916,7 +1948,26 @@ was composed of multiple elements or pseudo elements combined together.
 	this must disappear.
 </div>
 
-However, the UA must preserve aspects of the form control
+UAs should include in their User Agent stylesheet style rules
+to give form controls a recognizable shape when 'appearance' is ''appearance/none''.
+
+Note: Authors may therefore need to override these UA style rules to get the styling
+they intended.
+
+<div class=advisement>
+	Authors may find it convenient to use ''all: unset'',
+	to get fully unstyled form control elements
+	which they can then style as they want without interference from the browser's UA stylesheet.
+	However, this also suppresses the focus indicators provided by the same UA stylesheet.
+	In order avoid damaging accessibility,
+	authors who do so should restore a focus indicator,
+	for instance by using '':focus-visible { outline: auto; }''.
+</div>
+
+<h4 id=appearance-semantics>
+Effects of 'appearance' on Semantic Aspects of Elements</h4>
+
+UAs must preserve aspects of the form control
 which are necessary to operate the control with its original semantics.
 The UA may however give them a different look and feel
 as long as it remains possible to operate the control.
@@ -1942,22 +1993,6 @@ what needs to be preserved.
 	which can be styled in different ways using the '':checked'' selector.
 </div>
 
-UAs should include in their User Agent stylesheet style rules
-to give form controls a recognizable shape when 'appearance' is ''appearance/none''.
-
-Note: Authors may therefore need to override these UA style rules to get the styling
-they intended.
-
-<div class=advisement>
-	Authors may find it convenient to use ''all: unset'',
-	to get fully unstyled form control elements
-	which they can then style as they want without interference from the browser's UA stylesheet.
-	However, this also suppresses the focus indicators provided by the same UA stylesheet.
-	In order avoid damaging accessibility,
-	authors who do so should restore a focus indicator,
-	for instance by using ''focus-visible { outline: auto; }''.
-</div>
-
 The behavior and semantics of elements remain defined by the document language,
 and are not influenced by this property.
 
@@ -1990,35 +2025,6 @@ that are typical of the element whose appearance it acquires.
 	is also not changed by the 'appearance' property.
 </div>
 
-<div class=example>
-	An author wanting to customize the look and feel of check boxes in HTML could use the following:
-	<pre><code class="lang-css">
-	input[type=checkbox] {
-		all: unset; /* this shorthand includes resetting appearance to none */
-		width: 1em;
-		height: 1em;
-		display: inline-block;
-		background: red;
-	}
-	input[type=checkbox]:checked {
-		border-radius: 50%;
-		background: green;
-	}
-	input[type=checkbox]:focus-visible {
-		outline: auto;
-	}
-	</code></pre>
-
-	<code class="lang-markup">&lt;input type="checkbox"></code> would be rendered as
-	<span style="display: inline-block; width: 1em; height: 1em; background: red;"></span>,
-	while <code class="lang-markup">&lt;input type="checkbox" checked></code> would be rendered as
-	<span style="display: inline-block; width: 1em; height: 1em; background: green; border-radius: 50%;"></span>,
-	and activating (for example by clicking) the element would toggle the state as usual.
-</div>
-
-For compatibility with legacy content, UAs must also support <dfn property export>-webkit-appearance</dfn>
-as a [=legacy name alias=] of 'appearance'.
-
 <h3 id=control-specific-rules>
 Form Control Specific Rules</h3>