Add more example for fallback color and more explanation for the goal of the Image Sprites section

Author: fantasai

css3-images/Overview.html

@@ -15,11 +15,11 @@
 
    <h1>CSS Image Values Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 9 June 2009</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 24 June 2009</h2>
 
    <dl>
     <dt>This version:</dt>
-    <!-- <dd><a href="http://www.w3.org/TR/2009/CR-css3-images-20090609/">http://www.w3.org/TR/2009/CR-css3-images-20090609/</a></dd> -->
+    <!-- <dd><a href="http://www.w3.org/TR/2009/CR-css3-images-20090624/">http://www.w3.org/TR/2009/CR-css3-images-20090624/</a></dd> -->
 
     <dd><a
      href="http://dev.w3.org/csswg/css3-images/">http://dev.w3.org/csswg/css3-images/</a>
@@ -104,9 +104,8 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
    <li><a href="#image"><span class=secno>3 </span>The &lt;image&gt; value
     type</a>
 
-   <li><a href="##url"><span class=secno>4 </span>Simple Image References and
-    Image Slices: the &lsquo;<code class=css>url()</code>&rsquo; notation</a>
-    
+   <li><a href="##url"><span class=secno>4 </span>Image References and Image
+    Slices: the &lsquo;<code class=css>url()</code>&rsquo; notation</a>
 
    <li><a href="##image"><span class=secno>5 </span>Image Fallbacks: the
     &lsquo;<code class=css>image()</code>&rsquo; notation</a>
@@ -206,8 +205,8 @@ <h2 id=image><span class=secno>3 </span>The &lt;image&gt; value type</h2>
     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
 
    <div>
-    <h2 id="#url"><span class=secno>4 </span>Simple Image References and
-     Image Slices: the &lsquo;<code class=css>url()</code>&rsquo; notation</h2>
+    <h2 id="#url"><span class=secno>4 </span>Image References and Image
+     Slices: the &lsquo;<code class=css>url()</code>&rsquo; notation</h2>
 
     <p>The simplest way to indicate an image is to reference an image file by
      URI. This is done with the <a
@@ -288,9 +287,22 @@ <h2 id="#image"><span class=secno>5 </span>Image Fallbacks: the
      single-color image with no intrinsic dimensions.
 
     <div class=example>
-     <p>Some examples:</p>
+     <p>For example, the rule below would tell the UA to load &lsquo;<code
+      class=css>wavy.svg</code>&rsquo; if it can; failing that to load
+      &lsquo;<code class=css>wavy.png</code>&rsquo; and display it at 150dpi;
+      failing that to display &lsquo;<code class=css>wavy.gif</code>&rsquo;;
+      and finally, if none of the images can be loaded and displayed, to use
+      the color &lsquo;<code class=css>blue</code>&rsquo; to create a
+      dimensionless background image.
 
      <pre>background-image: image(wavy.svg, 'wavy.png' 150dpi, "wavy.gif"  or blue);</pre>
+
+     <p>The &lsquo;<code class=property>background-image</code>&rsquo;
+      property specifies that dimensionless images must stretch to cover the
+      entire background positioning area [[CSS3BACKGROUND]], so if none of
+      the specified images can be displayed the background will be painted
+      blue. As with any image, this fallback will be painted over the
+      &lsquo;<code class=property>background-color</code>&rsquo; (if any).
     </div>
 
     <p>If the URL for the image ends in a file extension (a period followed
@@ -308,6 +320,27 @@ <h2 id="#image"><span class=secno>5 </span>Image Fallbacks: the
    <div>
     <h2 id=image-sprites><span class=secno>6 </span>Image Sprites</h2>
 
+    <p>The image sprites syntax is different from image slices noted above.
+     Image slice syntax allows you to specify the coordinates of a region in
+     the image and use that as a standalone image, but all the coordinates
+     must be specified inline. This is great for one-off cutouts, but becomes
+     unnecessarily verbose when the slices fit into a grid structure. The
+     goal of this section is to define a syntax that:
+
+    <ul>
+     <li>Makes it easy to specify an image slice and swap it out in later
+      subclass or :hover rules.
+
+     <li>Makes it easy to maintain a sprite image, so that adding or shifting
+      sections of the image don't require crawling through and modifying the
+      entire style sheet.
+
+     <li>Has straightforward handling of strict grids, but can also handle
+      more irregular sprite organization.
+
+     <li>(Any other use cases/requirements?)
+    </ul>
+
     <div class=issue>
      <p>As yet unwritten. Discussions/proposals include:</p>
 

css3-images/Overview.src.html

@@ -112,7 +112,7 @@ <h2 id="image">The &lt;image&gt; value type</h2>
     'background-image', 'list-style-image', 'cursor' properties [[!CSS21]].
 
 <div>
-  <h2 id="#url">Simple Image References and Image Slices: the ''url()'' notation</h2>
+  <h2 id="#url">Image References and Image Slices: the ''url()'' notation</h2>
 
   <p>The simplest way to indicate an image is to reference an image file
   by URI. This is done with the
@@ -178,9 +178,17 @@ <h2 id="#image">Image Fallbacks: the ''image()'' notation</h2>
   is treated as a single-color image with no intrinsic dimensions.
 
   <div class="example">
-    <p>Some examples:</p>
-
-    <pre>background-image: image(wavy.svg, 'wavy.png' 150dpi, "wavy.gif"  or blue);</pre>
+    <p>For example, the rule below would tell the UA to load ''wavy.svg'' if
+      it can; failing that to load ''wavy.png'' and display it at 150dpi;
+      failing that to display ''wavy.gif''; and finally, if none of the images
+      can be loaded and displayed, to use the color ''blue'' to create a
+      dimensionless background image.
+      <pre>background-image: image(wavy.svg, 'wavy.png' 150dpi, "wavy.gif"  or blue);</pre>
+    <p>The 'background-image' property specifies that dimensionless images
+       must stretch to cover the entire background positioning area
+       [[CSS3BACKGROUND]], so if none of the specified images can be displayed
+       the background will be painted blue. As with any image, this fallback
+       will be painted over the 'background-color' (if any).
   </div>
 
   <p>If the URL for the image ends in a file extension (a period followed by
@@ -196,6 +204,23 @@ <h2 id="#image">Image Fallbacks: the ''image()'' notation</h2>
 <div>
   <h2>Image Sprites</h2>
 
+  <p>The image sprites syntax is different from image slices noted above.
+    Image slice syntax allows you to specify the coordinates of a region
+    in the image and use that as a standalone image, but all the coordinates
+    must be specified inline. This is great for one-off cutouts, but becomes
+    unnecessarily verbose when the slices fit into a grid structure. The goal
+    of this section is to define a syntax that:
+  <ul>
+    <li>Makes it easy to specify an image slice and swap it out in later
+      subclass or :hover rules.
+    <li>Makes it easy to maintain a sprite image, so that adding or shifting
+      sections of the image don't require crawling through and modifying the
+      entire style sheet.
+    <li>Has straightforward handling of strict grids, but can also handle
+      more irregular sprite organization.
+    <li>(Any other use cases/requirements?)
+  </ul>
+
   <div class="issue">
     <p>As yet unwritten. Discussions/proposals include:</p>
     <ul>