[css-conditional-4] add color font example and warning counter-example

Author: svgeesus

css-conditional-4/Overview.bs

@@ -240,6 +240,62 @@ An ''@else'' rule that is not part of a <a>conditional rule chain</a> is invalid
 	the example would get <em>significantly</em> worse.
 </div>
 
+<div class="example">
+  In this example, three different color font technologies
+  are tested, in order of preference,
+  plus a monochrome fallback.
+  The most capable, COLRv1, supports both gradients and font variations;
+  the next best choice, SVG, supports gradients
+  while the least capable, COLRv0, supports flat color fill only.
+
+  The fallback has no test condition,
+  so will always be chosen unless one of the earlier conditions succeeds.
+
+  <pre class="lang-css">
+  @if font-technology(color-COLRv1) and font-technology(variations) {
+      @font-face { font-family: icons; src: url(icons-gradient-var.woff2); }
+  }
+  @else font-technology(color-SVG) {
+      @font-face { font-family: icons; src: url(icons-gradient.woff2); }
+  }
+  @else font-technology(color-COLRv0) {
+      @font-face { font-family: icons; src: url(icons-flat.woff2); }
+  }
+  @else {
+      @font-face { font-family: icons; src: url(icons-fallback.woff2); }
+  }
+  </pre>
+
+  Notice that in this example,
+  the variable color font is only downloaded
+  if COLRv1 is supported
+  and font variations are also supported.
+
+  Notice too that only one of the available options will be downloaded;
+  this would not be the case without @if and @else,
+  as the next example shows.
+</div>
+
+<div class="example">
+  In this example,
+  although it appears that the fallback will not be used
+  if COLRv1 is supported,
+  in fact both fonts will be downloaded,
+  which wastes bandwidth if it is not used.
+
+  The fallback might still be used for some characters;
+  for example, if the color font supports only Latin,
+  while the fallback supports Latin and Greek.
+
+  <pre class="lang-css">
+    @font-face { font-family: icons; src: url(icons-fallback.woff2);
+    @supports font-technology(color-COLRv1) {
+        @font-face { font-family: icons; src: url(icons-gradient-var.woff2); }
+    }
+    </pre>
+
+</div>
+
 <h2 class=no-num id="priv">Privacy Considerations</h2>
 
 No Privacy issues have been raised against this document
@@ -260,6 +316,7 @@ The @if and @else rules are based on a proposal by Tab Atkins.
   </h3>
 
   <ul>
+    <li>Added some examples</li>
     <li>Added @if and @else per CSSWG resolution</li>
     <li>Extended @supports feature to express font capabilities</li>
     <li>Added two co-editors per CSSWG resolution</li>