- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Sat, 13 Aug 2011 01:20:20 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv26982
Modified Files:
Overview.html Overview.src.html
Log Message:
Re-add image() function, trimmed to the basic functionality. Mark as at-risk.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.146
retrieving revision 1.147
diff -u -d -r1.146 -r1.147
--- Overview.html 13 Aug 2011 00:43:11 -0000 1.146
+++ Overview.html 13 Aug 2011 01:20:17 -0000 1.147
@@ -127,6 +127,8 @@
<p>The following features are at risk:
<ol>
+ <li>The <a href="#image-notation">image() function</a>
+
<li>The <a href="#element-reference">element() function</a>
<li>The "none" and "scale-down" values for ‘<a
@@ -158,7 +160,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>
@@ -367,7 +373,7 @@
Slices: the ‘<code class=css>url()</code>’ notation</h3>
<p>The simplest way to indicate an image is to reference an image file by
- URI. This is done with the <a
+ URL. This is done with the <a
href="http://www.w3.org/TR/CSS21/syndata.html#uri">‘<code
class=css>url()</code>’ notation</a>, defined in <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
@@ -402,12 +408,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.153
retrieving revision 1.154
diff -u -d -r1.153 -r1.154
--- Overview.src.html 13 Aug 2011 00:43:11 -0000 1.153
+++ Overview.src.html 13 Aug 2011 01:20:17 -0000 1.154
@@ -68,6 +68,8 @@
<p>The following features are at risk:</p>
<ol>
+ <li>The <a href="#image-notation">image() function</a></li>
+
<li>The <a href="#element-reference">element() function</a></li>
<li>The "none" and "scale-down" values for 'object-fit'</li>
@@ -208,10 +210,7 @@
<h3 id="url">
Image References and Image Slices: the ''url()'' notation</h3>
- <p>The simplest way to indicate an image is to reference an image file
- by URI. This is done with the
- <a href="http://www.w3.org/TR/CSS21/syndata.html#uri">''url()'' notation</a>,
- defined in [[!CSS21]].
+ <p>The simplest way to indicate an image is to reference an image file by URL. This is done with the <a href="http://www.w3.org/TR/CSS21/syndata.html#uri">''url()'' notation</a>, defined in [[!CSS21]].
<div class="example">
<p>In the example below, a background image is specified with ''url()''
@@ -220,10 +219,7 @@
<pre>background-image: url(wavy.png);</pre>
</div>
- <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">media fragment identifiers</a>.
- [[!MEDIA-FRAGS]]
+ <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">media fragment identifiers</a>. [[!MEDIA-FRAGS]]
<div class="example">
<p>For example, given the following image* and CSS:</p>
@@ -240,7 +236,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 Saturday, 13 August 2011 01:20:21 UTC