[css-lists-3] Reorder notes and examples.

Author: fantasai

css-lists-3/Overview.bs

@@ -210,6 +210,19 @@ Properties Applying to ''::marker''</h4>
   All properties can be set on a ''::marker'' pseudo-element
   and will have a [=computed value=]
   which will then inherit to its text content.
+
+  <div class=example>
+    Inheritable properties that apply to text
+    can be set on the ''::marker'' pseudo-element:
+    these will inherit to and take effect on its text contents.
+    Some examples of such properties include:
+    <ul>
+      <li>'text-transform', 'letter-spacing', 'word-spacing' (see [[CSS-TEXT-3]])
+      <li>all the font properties (see [[CSS-FONTS-3]] and its successors)
+      <li>the 'color' property (see [[CSS-COLOR-3]])
+    </ul>
+  </div>
+
   However,
   only the following CSS properties
   actually apply to a [=marker box=]:
@@ -220,30 +233,19 @@ Properties Applying to ''::marker''</h4>
     <li>all animation and transition properties (see [[CSS-ANIMATIONS-1]] and [[CSS-TRANSITIONS-1]])
   </ul>
 
-  <p class="note">
-    It is expected that future specifications will extend this list of properties;
-    however at the moment outside marker box layout is not fully defined,
-    so only these properties are allowed.
-
   Other properties should not have an effect on the [=marker box=]
   when declared directly on ''::marker''
   in the [=author origin|author=] or [=user origin=] of the [=cascade=].
   UAs may either treat such properties as not applying,
   or enforce their value or inheritance from the [=originating element=]
   by setting a [=user-agent origin=] ''!important'' rule.
 
-  <div class=example>
-    Inheritable properties that apply to text
-    can be set on the ''::marker'' pseudo-element:
-    these will inherit to and take effect on its text contents.
-    Some examples of such properties include:
-    <ul>
-      <li>'text-transform', 'letter-spacing', 'word-spacing' (see [[CSS-TEXT-3]])
-      <li>all the font properties (see [[CSS-FONTS-3]] and its successors)
-      <li>the 'color' property (see [[CSS-COLOR-3]])
-    </ul>
-  </div>
+  NOTE: It is expected that future specifications will extend this list of properties
+  and relax the restriction on which properties can take effect.
+  However at the moment outside marker box layout is not fully defined,
+  so to avoid future compatibility problems only these properties are allowed.
 
+  Additionally,
   UAs must add the following rule to their default style sheet:
   <pre>
     ::marker, ::before::marker, ::after::marker {
@@ -254,6 +256,12 @@ Properties Applying to ''::marker''</h4>
     }
   </pre>
 
+  ISSUE: ''white-space: pre'' doesn't have quite the right behavior;
+  ''text-space-collapse: preserve-spaces'' + ''text-space-trim: discard-after''
+  might be closer to what's needed here.
+  See discussion in <a href="https://github.com/w3c/csswg-drafts/issues/4448">Issue 4448</a>
+  and <a href="https://github.com/w3c/csswg-drafts/issues/4891">Issue 4891</a>.
+
   Note: Although the ''::marker'' pseudo-element can represent
   the [=marker box=] of a ''::before'' or ''::after'' pseudo-element,
   the [=compound selector=] ''::marker'',
@@ -263,11 +271,6 @@ Properties Applying to ''::marker''</h4>
   needs to be explicitly specified in the [=selector=],
   e.g. ''::before::marker''.
 
-  ISSUE: ''white-space: pre'' doesn't have quite the right behavior;
-  ''text-space-collapse: preserve-spaces'' + ''text-space-trim: discard-after''
-  might be closer to what's needed here.
-  See discussion in <a href="https://github.com/w3c/csswg-drafts/issues/4448">Issue 4448</a>
-  and <a href="https://github.com/w3c/csswg-drafts/issues/4891">Issue 4891</a>.
 
 <h3 id='content-property'>
 Generating Marker Contents</h3>