- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 09 Aug 2011 22:24:44 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv26493
Modified Files:
Overview.html Overview.src.html
Log Message:
Re-added the image() function, stripped down to just do fallbacks for now. (That part seems pretty stable and trivial.)
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.136
retrieving revision 1.137
diff -u -d -r1.136 -r1.137
--- Overview.html 9 Aug 2011 02:02:13 -0000 1.136
+++ Overview.html 9 Aug 2011 22:24:41 -0000 1.137
@@ -158,7 +158,11 @@
Image Slices: the ‘<code class=css>url()</code>’
notation</a>
- <li><a href="#element-reference"><span class=secno>4.2. </span> Using
+ <li><a href="#image-notation"><span class=secno>4.2. </span> Image
+ Fallbacks: the ‘<code class=css>image()</code>’
+ notation</a>
+
+ <li><a href="#element-reference"><span class=secno>4.3. </span> Using
Elements as Images: the ‘<code class=css>element()</code>’
notation</a>
</ul>
@@ -402,12 +406,97 @@
<p class=note>Note that a legacy UA that doesn't understand the media
fragments notation will ignore the fragment and simply display the
entirety of an image specified with ‘<code
- class=css>url</code>’. A future level of this module is intended to
- introduce an alternate image-referencing function that is guaranteed to
- support image fragments.</p>
+ 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.</p>
+
+ <pre>
+<!-- -->background-image: url('swirl.png'); /* old UAs */
+<!-- -->background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */</pre>
+ </div>
<!-- ====================================================================== -->
- <h3 id=element-reference><span class=secno>4.2. </span> Using Elements as
+ <h3 id=image-notation><span class=secno>4.2. </span> Image Fallbacks: the
+ ‘<code class=css>image()</code>’ notation</h3>
+
+ <p>The ‘<code class=css>image()</code>’ function allows an
+ author to specify an image with fallback images to be used if the original
+ image can't be decoded or is a type that the browser doesn't recognize.
+ Additionally, the author can specify a color as an ultimate fallback to be
+ used when none of the images can be.
+
+ <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( [ <string> , ]* [ <string> | <color> ] )</pre>
+
+ <p>Each <code><string></code> must be a URL.
+
+ <p>Multiple arguments can be given separated by commas, in which case the
+ function represents the first <string> representing an image that the
+ browser can successfully load and display. The final argument can specify
+ a <color> to serve as an ultimate fallback; this can be used, e.g. for
+ ‘<code class=property>background-image</code>’, to ensure
+ adequate contrast if none of the preceding <image-decl>s can be used.
+ If the final argument is a <color>, it represents a solid-color image
+ of the given color with no <a href="#intrinsic-dimensions"><i>intrinsic
+ dimensions</i></a>.
+
+ <div class=example>
+ <p>The rule below would tell the UA to load ‘<code
+ class=css>wavy.svg</code>’ if it can; failing that to load
+ ‘<code class=css>wavy.png</code>’; failing that to display
+ ‘<code class=css>wavy.gif</code>’; and finally, if none of
+ the images can be loaded and displayed, to use the color ‘<code
+ class=css>rgba(0,0,255,0.5)</code>’ to create a dimensionless
+ background image. For example, the browser might not understand how to
+ render SVG images, the PNG may be malformed, and the GIF might not exist
+ on the server and return an HTML 404 error page instead of an image.</p>
+
+ <pre>background-image: image("wavy.svg", 'wavy.png' , "wavy.gif", rgba(0,0,255,0.5));</pre>
+
+ <p>The ‘<code class=property>background-size</code>’ property
+ specifies that dimensionless images by default stretch to cover the
+ entire background positioning area <a href="#CSS3BG"
+ rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a>, so if none of the
+ specified images can be displayed the background will be painted
+ semi-transparent blue. As with any image, this fallback will be painted
+ over the ‘<code class=property>background-color</code>’ (if
+ any).</p>
+ </div>
+
+ <div class=example>
+ <p>At times, one may need a solid-color image for a property or function
+ that does not accept the <color> type directly. The ‘<code
+ class=css>image()</code>’ function can be used for this: by
+ specifying <em>only</em> a color without any URLs, the function
+ immediately falls back to representing a solid-color image of the chosen
+ color.
+
+ <pre>background-image: image(rgba(0,0,255,.5)), url("bg-image.png");</pre>
+
+ <p>In the above, the background is the image "bg-image.png", overlaid with
+ partially-transparent blue.
+ </div>
+ <!-- ====================================================================== -->
+
+ <h3 id=element-reference><span class=secno>4.3. </span> Using Elements as
Images: the ‘<code class=css>element()</code>’ notation</h3>
<p>The ‘<code class=css>element()</code>’ function allows an
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.143
retrieving revision 1.144
diff -u -d -r1.143 -r1.144
--- Overview.src.html 9 Aug 2011 02:02:13 -0000 1.143
+++ Overview.src.html 9 Aug 2011 22:24:42 -0000 1.144
@@ -240,7 +240,63 @@
<p><small>* SVG-in-<img> support required. Click the picture to view the SVG directly.</small></p>
</div>
- <p class="note">Note that a legacy UA that doesn't understand the media fragments notation will ignore the fragment and simply display the entirety of an image specified with ''url''. A future level of this module is intended to introduce an alternate image-referencing function that is guaranteed to support image fragments.</p>
+ <p class="note">Note that a legacy UA that doesn't understand the media
+ fragments notation will ignore the fragment and simply display the
+ entirety of 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:</p>
+
+ <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.</p>
+
+ <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">
+Image Fallbacks: the ''image()'' notation</h3>
+
+ <p>The ''image()'' function allows an author to specify an image with fallback images to be used if the original image can't be decoded or is a type that the browser doesn't recognize. Additionally, the author can specify a color as an ultimate fallback to be used when none of the images can be.</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( [ <string> , ]* [ <string> | <color> ] )</pre>
+
+ <p>Each <code><string></code> must be a URL.</p>
+
+ <p>Multiple arguments can be given separated by commas, in which case the function represents the first <string> representing an image that the browser can successfully load and display. The final argument can specify a <color> to serve as an ultimate fallback; this can be used, e.g. for 'background-image', to ensure adequate contrast if none of the preceding <image-decl>s can be used. If the final argument is a <color>, it represents a solid-color image of the given color with no <i>intrinsic dimensions</i>.
+
+ <div class="example">
+ <p>The rule below would tell the UA to load ''wavy.svg'' if it can; failing that to load ''wavy.png''; failing that to display ''wavy.gif''; and finally, if none of the images can be loaded and displayed, to use the color ''rgba(0,0,255,0.5)'' to create a dimensionless background image. For example, the browser might not understand how to render SVG images, the PNG may be malformed, and the GIF might not exist on the server and return an HTML 404 error page instead of an image.</p>
+
+ <pre>background-image: image("wavy.svg", 'wavy.png' , "wavy.gif", rgba(0,0,255,0.5));</pre>
+
+ <p>The 'background-size' property specifies that dimensionless images
+ by default stretch to cover the entire background positioning area
+ [[CSS3BG]], so if none of the specified images can be displayed
+ the background will be painted semi-transparent blue. As with any image,
+ this fallback will be painted over the 'background-color' (if any).</p>
+ </div>
+
+ <div class='example'>
+ <p>At times, one may need a solid-color image for a property or function that does not accept the <color> type directly. The ''image()'' function can be used for this: by specifying <em>only</em> a color without any URLs, the function immediately falls back to representing a solid-color image of the chosen color.
+
+ <pre>background-image: image(rgba(0,0,255,.5)), url("bg-image.png");</pre>
+
+ <p>In the above, the background is the image "bg-image.png", overlaid with partially-transparent blue.
+ </div>
<!-- ====================================================================== -->
Received on Tuesday, 9 August 2011 22:24:49 UTC