- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 06 May 2011 00:55:20 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv23280
Modified Files:
Overview.html Overview.src.html
Log Message:
Improve image slice examples, tie to image() notation so that there's a fallback story (meant to make this edit ages ago...)
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.84
retrieving revision 1.85
diff -u -d -r1.84 -r1.85
--- Overview.html 6 May 2011 00:05:59 -0000 1.84
+++ Overview.html 6 May 2011 00:55:17 -0000 1.85
@@ -371,19 +371,38 @@
<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
+ ‘<code class=css>url</code>’. However, since URLs with media
+ fragment identifiers can also be used in the ‘<code
+ class=css>image()</code>’ 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 ‘<code class=css>image()</code>’
+ 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 @@
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 ‘<code class=css>image()</code>’ 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 ‘<code class=css>image()</code>’ notation is defined as:
+
+
<pre class=prod><dfn id=ltimage-list><image-list></dfn> =
image( [ <image-decl> , ]* [ <image-decl> | <element-reference> | <gradient> | <color> ] )</pre>
<p>where <image-decl> is given by:
<pre class=prod><dfn id=ltimage-decl><image-decl></dfn> =
- [ <string> | <url> ] [ snap? && <resolution> ]? && [ ltr | rtl ]?
-
- </pre>
+ [ <string> | <url> ] [ snap? && <resolution> ]? && [ ltr | rtl ]?</pre>
+
+ <p class=issue>Is there a point to allowing ‘<code
+ class=css>url()</code>’?
<p>Each <a href="#ltimage-decl"><i><image-decl></i></a> represents an
external image. If a <string> is provided, it represents the same image
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.87
retrieving revision 1.88
diff -u -d -r1.87 -r1.88
--- Overview.src.html 6 May 2011 00:05:59 -0000 1.87
+++ Overview.src.html 6 May 2011 00:55:18 -0000 1.88
@@ -179,17 +179,34 @@
<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 @@
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><image-list></dfn> =
image( [ <image-decl> , ]* [ <image-decl> | <element-reference> | <gradient> | <color> ] )</pre>
<p>where <image-decl> is given by:</p>
<pre class='prod'><dfn><image-decl></dfn> =
- [ <string> | <url> ] [ snap? && <resolution> ]? && [ ltr | rtl ]?
+ [ <string> | <url> ] [ snap? && <resolution> ]? && [ ltr | rtl ]?</pre>
+
+ <p class="issue">Is there a point to allowing ''url()''?
<p>Each <i><image-decl></i> represents an external image. If a <string>
is provided, it represents the same image that it would if the the string
Received on Friday, 6 May 2011 00:55:22 UTC