Skip to content

Commit 0275f96

Browse files
tabatkinstabatkins
committed
Re-added the image() function, stripped down to just do fallbacks for now. (That part seems pretty stable and trivial.)
1 parent 80aad90 commit 0275f96

2 files changed

Lines changed: 151 additions & 6 deletions

File tree

‎css3-images/Overview.html‎

Lines changed: 94 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,11 @@ <h2 class="no-num no-toc" id=contents> Table of contents</h2>
158158
Image Slices: the &lsquo;<code class=css>url()</code>&rsquo;
159159
notation</a>
160160

161-
<li><a href="#element-reference"><span class=secno>4.2. </span> Using
161+
<li><a href="#image-notation"><span class=secno>4.2. </span> Image
162+
Fallbacks: the &lsquo;<code class=css>image()</code>&rsquo;
163+
notation</a>
164+
165+
<li><a href="#element-reference"><span class=secno>4.3. </span> Using
162166
Elements as Images: the &lsquo;<code class=css>element()</code>&rsquo;
163167
notation</a>
164168
</ul>
@@ -402,12 +406,97 @@ <h3 id=url><span class=secno>4.1. </span> Image References and Image
402406
<p class=note>Note that a legacy UA that doesn't understand the media
403407
fragments notation will ignore the fragment and simply display the
404408
entirety of an image specified with &lsquo;<code
405-
class=css>url</code>&rsquo;. A future level of this module is intended to
406-
introduce an alternate image-referencing function that is guaranteed to
407-
support image fragments.</p>
409+
class=css>url</code>&rsquo;. However, since URLs with media fragment
410+
identifiers can also be used in the &lsquo;<code
411+
class=css>image()</code>&rsquo; notation defined below, authors can take
412+
advantage of CSS's forward-compatible parsing rules to provide a fallback
413+
when using an image fragment URL:
414+
415+
<div class=example>
416+
<p>In the example below, the &lsquo;<code class=css>image()</code>&rsquo;
417+
notation is used together with the media fragment syntax, so that UAs
418+
that don't support media fragments fail to parse the second declaration
419+
and use the first.</p>
420+
421+
<pre>
422+
<!-- -->background-image: url('swirl.png'); /* old UAs */
423+
<!-- -->background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */</pre>
424+
</div>
425+
<!-- ====================================================================== -->
426+
427+
<h3 id=image-notation><span class=secno>4.2. </span> Image Fallbacks: the
428+
&lsquo;<code class=css>image()</code>&rsquo; notation</h3>
429+
430+
<p>The &lsquo;<code class=css>image()</code>&rsquo; function allows an
431+
author to specify an image with fallback images to be used if the original
432+
image can't be decoded or is a type that the browser doesn't recognize.
433+
Additionally, the author can specify a color as an ultimate fallback to be
434+
used when none of the images can be.
435+
436+
<p>So that authors can take advantage of CSS's forwards-compatible parsing
437+
rules to provide a fallback for image slices, implementations that support
438+
the &lsquo;<code class=css>image()</code>&rsquo; notation <em>must</em>
439+
support the <code>xywh=#,#,#,#</code> form of media fragment identifiers
440+
for images. <a href="#MEDIA-FRAGS"
441+
rel=biblioentry>[MEDIA-FRAGS]<!--{{!MEDIA-FRAGS}}--></a>
442+
443+
<p>The &lsquo;<code class=css>image()</code>&rsquo; notation is defined as:
444+
445+
446+
<pre class=prod><dfn id=ltimage-list>&lt;image-list></dfn> =
447+
image( [ &lt;string> , ]* [ &lt;string> | &lt;color> ] )</pre>
448+
449+
<p>Each <code>&lt;string></code> must be a URL.
450+
451+
<p>Multiple arguments can be given separated by commas, in which case the
452+
function represents the first &lt;string> representing an image that the
453+
browser can successfully load and display. The final argument can specify
454+
a &lt;color> to serve as an ultimate fallback; this can be used, e.g. for
455+
&lsquo;<code class=property>background-image</code>&rsquo;, to ensure
456+
adequate contrast if none of the preceding &lt;image-decl>s can be used.
457+
If the final argument is a &lt;color>, it represents a solid-color image
458+
of the given color with no <a href="#intrinsic-dimensions"><i>intrinsic
459+
dimensions</i></a>.
460+
461+
<div class=example>
462+
<p>The rule below would tell the UA to load &lsquo;<code
463+
class=css>wavy.svg</code>&rsquo; if it can; failing that to load
464+
&lsquo;<code class=css>wavy.png</code>&rsquo;; failing that to display
465+
&lsquo;<code class=css>wavy.gif</code>&rsquo;; and finally, if none of
466+
the images can be loaded and displayed, to use the color &lsquo;<code
467+
class=css>rgba(0,0,255,0.5)</code>&rsquo; to create a dimensionless
468+
background image. For example, the browser might not understand how to
469+
render SVG images, the PNG may be malformed, and the GIF might not exist
470+
on the server and return an HTML 404 error page instead of an image.</p>
471+
472+
<pre>background-image: image("wavy.svg", 'wavy.png' , "wavy.gif", rgba(0,0,255,0.5));</pre>
473+
474+
<p>The &lsquo;<code class=property>background-size</code>&rsquo; property
475+
specifies that dimensionless images by default stretch to cover the
476+
entire background positioning area <a href="#CSS3BG"
477+
rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a>, so if none of the
478+
specified images can be displayed the background will be painted
479+
semi-transparent blue. As with any image, this fallback will be painted
480+
over the &lsquo;<code class=property>background-color</code>&rsquo; (if
481+
any).</p>
482+
</div>
483+
484+
<div class=example>
485+
<p>At times, one may need a solid-color image for a property or function
486+
that does not accept the &lt;color> type directly. The &lsquo;<code
487+
class=css>image()</code>&rsquo; function can be used for this: by
488+
specifying <em>only</em> a color without any URLs, the function
489+
immediately falls back to representing a solid-color image of the chosen
490+
color.
491+
492+
<pre>background-image: image(rgba(0,0,255,.5)), url("bg-image.png");</pre>
493+
494+
<p>In the above, the background is the image "bg-image.png", overlaid with
495+
partially-transparent blue.
496+
</div>
408497
<!-- ====================================================================== -->
409498

410-
<h3 id=element-reference><span class=secno>4.2. </span> Using Elements as
499+
<h3 id=element-reference><span class=secno>4.3. </span> Using Elements as
411500
Images: the &lsquo;<code class=css>element()</code>&rsquo; notation</h3>
412501

413502
<p>The &lsquo;<code class=css>element()</code>&rsquo; function allows an

‎css3-images/Overview.src.html‎

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,63 @@ <h3 id="url">
240240
<p><small>* SVG-in-&lt;img> support required. Click the picture to view the SVG directly.</small></p>
241241
</div>
242242

243-
<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>
243+
<p class="note">Note that a legacy UA that doesn't understand the media
244+
fragments notation will ignore the fragment and simply display the
245+
entirety of an image specified with ''url''. However, since URLs with
246+
media fragment identifiers can also be used in the ''image()'' notation
247+
defined below, authors can take advantage of CSS's forward-compatible
248+
parsing rules to provide a fallback when using an image fragment URL:</p>
249+
250+
<div class="example">
251+
<p>In the example below, the ''image()'' notation is used together with
252+
the media fragment syntax, so that UAs that don't support media fragments
253+
fail to parse the second declaration and use the first.</p>
254+
255+
<pre>
256+
<!-- -->background-image: url('swirl.png'); /* old UAs */
257+
<!-- -->background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */</pre>
258+
</div>
259+
260+
<!-- ====================================================================== -->
261+
262+
<h3 id="image-notation">
263+
Image Fallbacks: the ''image()'' notation</h3>
264+
265+
<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>
266+
267+
<p>So that authors can take advantage of CSS's forwards-compatible parsing
268+
rules to provide a fallback for image slices, implementations that support
269+
the ''image()'' notation <em>must</em> support the <code>xywh=#,#,#,#</code>
270+
form of media fragment identifiers for images. [[!MEDIA-FRAGS]]
271+
272+
<p>The ''image()'' notation is defined as:
273+
274+
<pre class='prod'><dfn>&lt;image-list></dfn> =
275+
image( [ &lt;string> , ]* [ &lt;string> | &lt;color> ] )</pre>
276+
277+
<p>Each <code>&lt;string></code> must be a URL.</p>
278+
279+
<p>Multiple arguments can be given separated by commas, in which case the function represents the first &lt;string> representing an image that the browser can successfully load and display. The final argument can specify a &lt;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 &lt;image-decl>s can be used. If the final argument is a &lt;color>, it represents a solid-color image of the given color with no <i>intrinsic dimensions</i>.
280+
281+
<div class="example">
282+
<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>
283+
284+
<pre>background-image: image("wavy.svg", 'wavy.png' , "wavy.gif", rgba(0,0,255,0.5));</pre>
285+
286+
<p>The 'background-size' property specifies that dimensionless images
287+
by default stretch to cover the entire background positioning area
288+
[[CSS3BG]], so if none of the specified images can be displayed
289+
the background will be painted semi-transparent blue. As with any image,
290+
this fallback will be painted over the 'background-color' (if any).</p>
291+
</div>
292+
293+
<div class='example'>
294+
<p>At times, one may need a solid-color image for a property or function that does not accept the &lt;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.
295+
296+
<pre>background-image: image(rgba(0,0,255,.5)), url("bg-image.png");</pre>
297+
298+
<p>In the above, the background is the image "bg-image.png", overlaid with partially-transparent blue.
299+
</div>
244300

245301
<!-- ====================================================================== -->
246302

0 commit comments

Comments
 (0)