Improve image slice examples, tie to image() notation so that there's a fallback story (meant to make this edit ages ago...)

Author: fantasai

css3-images/Overview.html

@@ -371,19 +371,38 @@ <h3 id=url><span class=secno>4.1. </span> Image References and Image
 
   <p>A portion of an image may be referenced (clipped out and used as a
    standalone image) by use of <a
-   href="http://www.w3.org/TR/media-frags/#naming-space">fragment
+   href="http://www.w3.org/TR/media-frags/#naming-space">media fragment
    identifiers</a>. <a href="#MEDIA-FRAGS"
    rel=biblioentry>[MEDIA-FRAGS]<!--{{!MEDIA-FRAGS}}--></a>
 
   <div class=example>
    <p>For example,</p>
 
-   <pre>background-image: url('logos.png#xywh=10,30,60,20')</pre>
+   <pre>background-image: url('sprites.png#xywh=10,30,60,20')</pre>
 
-   <p>uses the 60 pixel by 20 pixel rectangle of <code>logos.png</code>
+   <p>uses the 60 pixel by 20 pixel rectangle of <code>sprites.png</code>
     beginning at the point 10 pixels in from the left, 30 pixels down from
     the top.
   </div>
+
+  <p class=note>Note however that a UA that doesn't understand the media
+   fragments notation will display the entirety an image specified with
+   &lsquo;<code class=css>url</code>&rsquo;. However, since URLs with media
+   fragment identifiers can also be used in the &lsquo;<code
+   class=css>image()</code>&rsquo; notation defined below, authors can take
+   advantage of CSS's forward-compatible parsing rules to provide a fallback
+   when using an image fragment URL:
+
+  <div class=example>
+   <p>In the example below, the &lsquo;<code class=css>image()</code>&rsquo;
+    notation is used together with the media fragment syntax, so that UAs
+    that don't support media fragments fail to parse the second declaration
+    and use the first.
+
+   <pre>
+<!-- -->background-image: url('swirl.png'); /* old UAs */
+<!-- -->background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */</pre>
+  </div>
   <!-- ====================================================================== -->
 
   <h3 id=image-notation><span class=secno>4.2. </span> Image Annotations and
@@ -398,15 +417,26 @@ <h3 id=image-notation><span class=secno>4.2. </span> Image Annotations and
    that it can be automatically be reversed if used in text with a different
    directionality.
 
+  <p>So that authors can take advantage of CSS's forwards-compatible parsing
+   rules to provide a fallback for image slices, implementations that support
+   the &lsquo;<code class=css>image()</code>&rsquo; notation <em>must</em>
+   support the <code>xywh=#,#,#,#</code> form of media fragment identifiers
+   for images. <a href="#MEDIA-FRAGS"
+   rel=biblioentry>[MEDIA-FRAGS]<!--{{!MEDIA-FRAGS}}--></a>
+
+  <p>The &lsquo;<code class=css>image()</code>&rsquo; notation is defined as:
+   
+
   <pre class=prod><dfn id=ltimage-list>&lt;image-list></dfn> = 
 	image( [ &lt;image-decl> , ]* [ &lt;image-decl> | &lt;element-reference> | &lt;gradient> | &lt;color> ] )</pre>
 
   <p>where &lt;image-decl> is given by:
 
   <pre class=prod><dfn id=ltimage-decl>&lt;image-decl></dfn> = 
-	[ &lt;string> | &lt;url> ] [ snap? && &lt;resolution> ]? && [ ltr | rtl ]?
-
-	</pre>
+	[ &lt;string> | &lt;url> ] [ snap? && &lt;resolution> ]? && [ ltr | rtl ]?</pre>
+
+  <p class=issue>Is there a point to allowing &lsquo;<code
+   class=css>url()</code>&rsquo;?
 
   <p>Each <a href="#ltimage-decl"><i>&lt;image-decl></i></a> represents an
    external image. If a &lt;string> is provided, it represents the same image

css3-images/Overview.src.html

@@ -179,17 +179,34 @@ <h3 id="url">
 
 	<p>A portion of an image may be referenced (clipped out and used as a
 	standalone image) by use of
-	<a href="http://www.w3.org/TR/media-frags/#naming-space">fragment identifiers</a>.
+	<a href="http://www.w3.org/TR/media-frags/#naming-space">media fragment identifiers</a>.
 	[[!MEDIA-FRAGS]]
 
 	<div class="example">
 		<p>For example,</p>
 
-		<pre>background-image: url('logos.png#xywh=10,30,60,20')</pre>
+		<pre>background-image: url('sprites.png#xywh=10,30,60,20')</pre>
 
-		<p>uses the 60 pixel by 20 pixel rectangle of <code>logos.png</code> beginning
+		<p>uses the 60 pixel by 20 pixel rectangle of <code>sprites.png</code> beginning
 		at the point 10 pixels in from the left, 30 pixels down from the top.
 	</div>
+	
+	<p class="note">Note however that a UA that doesn't understand the media
+	fragments notation will display the entirety an image specified with ''url''.
+	However, since URLs with media fragment identifiers can also be used in the
+	''image()'' notation defined below, authors can take advantage of CSS's
+	forward-compatible parsing rules to provide a fallback when using an image
+	fragment URL:
+
+	<div class="example">
+		<p>In the example below, the ''image()'' notation is used together with
+		the media fragment syntax, so that UAs that don't support media fragments
+		fail to parse the second declaration and use the first.
+		<pre>
+<!-- -->background-image: url('swirl.png'); /* old UAs */
+<!-- -->background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */</pre>
+		</div>
+	</div>
 
 <!-- ====================================================================== -->
 
@@ -204,13 +221,22 @@ <h3 id="image-notation">
 	declare the directionality of an image so that it can be automatically be 
 	reversed if used in text with a different directionality.</p>
 
+	<p>So that authors can take advantage of CSS's forwards-compatible parsing
+	rules to provide a fallback for image slices, implementations that support
+	the ''image()'' notation <em>must</em> support the <code>xywh=#,#,#,#</code>
+	form of media fragment identifiers for images. [[!MEDIA-FRAGS]]
+
+	<p>The ''image()'' notation is defined as:
+
 	<pre class='prod'><dfn>&lt;image-list></dfn> = 
 	image( [ &lt;image-decl> , ]* [ &lt;image-decl> | &lt;element-reference> | &lt;gradient> | &lt;color> ] )</pre>
 
 	<p>where &lt;image-decl> is given by:</p>
 
 	<pre class='prod'><dfn>&lt;image-decl></dfn> = 
-	[ &lt;string> | &lt;url> ] [ snap? && &lt;resolution> ]? && [ ltr | rtl ]?
+	[ &lt;string> | &lt;url> ] [ snap? && &lt;resolution> ]? && [ ltr | rtl ]?</pre>
+
+	<p class="issue">Is there a point to allowing ''url()''?
 
 	<p>Each <i>&lt;image-decl></i> represents an external image.  If a &lt;string>
 	is provided, it represents the same image that it would if the the string