Skip to content

Commit c550bbe

Browse files
tabatkinstabatkins
committed
First draft of image-set() function
--HG-- extra : rebase_source : 464d831b2a5f1e168f180be12d06fd657b9d8d3e
1 parent 4411175 commit c550bbe

2 files changed

Lines changed: 162 additions & 16 deletions

File tree

‎css4-images/Overview.html‎

Lines changed: 100 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@
1616

1717
<h1>CSS Image Values and Replaced Content Module Level 4</h1>
1818

19-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 27 July 2012</h2>
19+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 3 August 2012</h2>
2020

2121
<dl>
2222
<dt>This Version:
2323

2424
<dd><a
2525
href="http://dev.w3.org/csswg/css4-images/">http://dev.w3.org/csswg/css4-images/</a>
26-
<!-- <dd><a href="http://www.w3.org/TR/2012/ED-css4-images-20120727/">http://www.w3.org/TR/2012/WD-css4-images-20120727/</a>-->
26+
<!-- <dd><a href="http://www.w3.org/TR/2012/ED-css4-images-20120803/">http://www.w3.org/TR/2012/WD-css4-images-20120803/</a>-->
2727
<!--
2828
<dt>Latest Version:
2929
<dd><a href="http://www.w3.org/TR/css4-images/">http://www.w3.org/TR/css4-images/</a>
@@ -174,18 +174,22 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
174174
Bidi-sensitive Images</a>
175175
</ul>
176176

177-
<li><a href="#element-notation"><span class=secno>4.3. </span> Using
177+
<li><a href="#image-set-notation"><span class=secno>4.3. </span>
178+
Resolution Negotiation: the ‘<code class=css>image-set()</code>’
179+
notation</a>
180+
181+
<li><a href="#element-notation"><span class=secno>4.4. </span> Using
178182
Elements as Images: the ‘<code class=css>element()</code>’
179183
notation</a>
180184
<ul class=toc>
181-
<li><a href="#paint-sources"><span class=secno>4.3.1. </span> Paint
185+
<li><a href="#paint-sources"><span class=secno>4.4.1. </span> Paint
182186
Sources</a>
183187

184-
<li><a href="#element-cycles"><span class=secno>4.3.2. </span> Cycle
188+
<li><a href="#element-cycles"><span class=secno>4.4.2. </span> Cycle
185189
Detection</a>
186190
</ul>
187191

188-
<li><a href="#cross-fade-function"><span class=secno>4.4. </span>
192+
<li><a href="#cross-fade-function"><span class=secno>4.5. </span>
189193
Combining images: the ‘<code class=css>cross-fade()</code>’
190194
notation</a>
191195
</ul>
@@ -444,6 +448,10 @@ <h2 id=resolution-units><span class=secno>3. </span> Resolution Units: the
444448
<dt><dfn id=dppx>‘<code class=css>dppx</code>’</dfn>
445449

446450
<dd>dots per ‘<code class=css>px</code>’ unit
451+
452+
<dt><dfn id=x>‘<code class=css>x</code>’</dfn>
453+
454+
<dd>identical to ‘<a href="#dppx"><code class=css>dppx</code></a>’
447455
</dl>
448456

449457
<p> The ‘<a href="#resolution-type"><code
@@ -484,6 +492,7 @@ <h2 id=image-values><span class=secno>4. </span> Image Values: the
484492

485493
<pre class=prod><dfn id=image-type>&lt;image></dfn> = <i>&lt;url></i> | <a
486494
href="#image-list-type"><i>&lt;image-list></i></a> | <a
495+
href="#image-set-type"><i>&lt;image-set></i></a> | <a
487496
href="#gradient-type"><i>&lt;gradient></i></a></pre>
488497

489498
<p> An ‘<a href="#image-type"><code class=css>&lt;image></code></a>’
@@ -776,6 +785,73 @@ <h4 id=bidi-images><span class=secno>4.2.4. </span> Bidi-sensitive Images</h4>
776785
items, however, it will be flipped in the inline direction, so it still
777786
points into the content.
778787
</div>
788+
789+
<h3 id=image-set-notation><span class=secno>4.3. </span> Resolution
790+
Negotiation: the ‘<code class=css>image-set()</code>’ notation</h3>
791+
792+
<p> Delivering the most appropriate image resolution for a user's device
793+
can be a difficult task. Ideally, images should be in the same resolution
794+
as the device they're being viewed in, which can vary between users.
795+
However, other factors can factor into the decision of which image to
796+
send; for example, if the user is on a slow mobile connection, they may
797+
prefer to receive lower-res images rather than waiting for a large
798+
proper-res image to load. The ‘<code class=css>image-set()</code>’
799+
function allows an author to ignore most of these issues, simply providing
800+
multiple resolutions of an image and letting the UA decide which is most
801+
appropriate in a given situation.
802+
803+
<p> The syntax for ‘<code class=css>image-set()</code>’ is:
804+
805+
<pre class=prod>
806+
<!--
807+
--><dfn
808+
id=image-set-type>&lt;image-set></dfn> = image-set( [ <a
809+
href="#image-set-decl-type"><i>&lt;image-set-decl></i></a>, ]+ [ <i>image-set-decl></i> | &lt;color>] )
810+
<!--
811+
--><dfn
812+
id=image-set-decl-type>&lt;image-set-decl></dfn> = [ &lt;url> | &lt;string> ] <a
813+
href="#resolution-type"><i>&lt;resolution></i></a></pre>
814+
815+
<p> Each ‘<code class=css>&lt;string></code>’ or ‘<code
816+
class=css>&lt;url></code>’ inside ‘<code
817+
class=css>image-set()</code>’ represents an image, just as if the <a
818+
href="#url-notation">‘<code class=css>url()</code>’ notation</a> had
819+
been used. As usual for URLs in CSS, relative URLs are resolved to an
820+
absolute URL (as described in Values &amp; Units <a href="#CSS3VAL"
821+
rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>) when a specified
822+
‘<code class=css>image-set()</code>’ value is computed.
823+
824+
<p> Every <a href="#image-set-decl-type"><i>&lt;image-set-decl></i></a> in
825+
a given ‘<code class=css>image-set()</code>’ must have a different <a
826+
href="#resolution-type"><i>&lt;resolution></i></a>, or else the function
827+
is invalid.
828+
829+
<p> The value of ‘<code class=css>image-set()</code>’ is one or more <a
830+
href="#image-set-decl-type"><i>&lt;image-set-decl></i></a>s, composed of a
831+
URL and a resolution, and optionally a fallback color at the end of the
832+
list. The function represents the first such image that is not an <a
833+
href="#invalid-image"><i>invalid image</i></a>, loaded in whatever order
834+
the UA decides is best. (In other words, the order that they are declared
835+
in the function makes no difference.) If the optional fallback color is
836+
specified, the UA may decide at any point to use the fallback color
837+
instead of attempting to load additional <a
838+
href="#image-set-decl-type"><i>&lt;image-set-decl></i></a>s, in which case
839+
the function represents a solid-color image of the given color with no <a
840+
href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>. If all of
841+
the provided <a
842+
href="#image-set-decl-type"><i>&lt;image-set-decl></i></a>s are <a
843+
href="#invalid-image"><i>invalid images</i></a> and a fallback color was
844+
not provided, the entire ‘<code class=css>image-set()</code>’ function
845+
must be treated as an <a href="#invalid-image"><i>invalid image</i></a>.
846+
847+
<p> If an <a href="#image-set-decl-type"><i>&lt;image-set-decl></i></a> is
848+
chosen and successfully loaded, the associated <a
849+
href="#resolution-type"><i>&lt;resolution></i></a> is the image's <a
850+
href="#intrinsic-resolution"><i>intrinsic resolution</i></a>.
851+
852+
<div class=example>
853+
<p class=issue> Provide an example.
854+
</div>
779855
<!--
780856
EEEEEEEEEEEEEEEEEEEEEElllllll tttt
781857
E::::::::::::::::::::El:::::l ttt:::t
@@ -795,7 +871,7 @@ <h4 id=bidi-images><span class=secno>4.2.4. </span> Bidi-sensitive Images</h4>
795871
EEEEEEEEEEEEEEEEEEEEEEllllllll eeeeeeeeeeeeee mmmmmm mmmmmm mmmmmm eeeeeeeeeeeeee nnnnnn nnnnnn ttttttttttt
796872
-->
797873

798-
<h3 id=element-notation><span class=secno>4.3. </span> Using Elements as
874+
<h3 id=element-notation><span class=secno>4.4. </span> Using Elements as
799875
Images: the ‘<code class=css>element()</code>’ notation</h3>
800876

801877
<p> The ‘<code class=css>element()</code>’ function allows an author to
@@ -1097,7 +1173,7 @@ <h3 id=element-notation><span class=secno>4.3. </span> Using Elements as
10971173
preview boxes to help navigate through the page.
10981174
</div>
10991175

1100-
<h4 id=paint-sources><span class=secno>4.3.1. </span> Paint Sources</h4>
1176+
<h4 id=paint-sources><span class=secno>4.4.1. </span> Paint Sources</h4>
11011177

11021178
<p> Host languages may define that some elements provide a <dfn
11031179
id=paint-source title=paint-source>paint source</dfn>. Paint sources have
@@ -1147,7 +1223,7 @@ <h4 id=paint-sources><span class=secno>4.3.1. </span> Paint Sources</h4>
11471223
define ways to refer to paint sources in external documents, or ones that
11481224
are created solely by script and never inserted into a document at all.
11491225

1150-
<h4 id=element-cycles><span class=secno>4.3.2. </span> Cycle Detection</h4>
1226+
<h4 id=element-cycles><span class=secno>4.4.2. </span> Cycle Detection</h4>
11511227

11521228
<p> The ‘<code class=css>element()</code>’ function can produce
11531229
nonsensical circular relationships, such as an element using itself as its
@@ -1193,7 +1269,7 @@ <h4 id=element-cycles><span class=secno>4.3.2. </span> Cycle Detection</h4>
11931269
-->
11941270

11951271

1196-
<h3 id=cross-fade-function><span class=secno>4.4. </span> Combining images:
1272+
<h3 id=cross-fade-function><span class=secno>4.5. </span> Combining images:
11971273
the ‘<code class=css>cross-fade()</code>’ notation</h3>
11981274

11991275
<p> When transitioning between images, CSS requires a way to explicitly
@@ -3926,7 +4002,7 @@ <h2 class=no-num id=index>Index</h2>
39264002
title="cover constraint"><strong>6.3.2.</strong></a>
39274003

39284004
<li>decorated bounding box, <a href="#decorated-bounding-box"
3929-
title="decorated bounding box"><strong>4.3.</strong></a>
4005+
title="decorated bounding box"><strong>4.4.</strong></a>
39304006

39314007
<li>default object size, <a href="#default-object-size"
39324008
title="default object size"><strong>6.1.</strong></a>
@@ -3944,10 +4020,10 @@ <h2 class=no-num id=index>Index</h2>
39444020
title="''dppx''"><strong>3.</strong></a>
39454021

39464022
<li>element-not-rendered, <a href="#element-not-rendered"
3947-
title=element-not-rendered><strong>4.3.</strong></a>
4023+
title=element-not-rendered><strong>4.4.</strong></a>
39484024

39494025
<li>&lt;element-reference>, <a href="#element-reference-type"
3950-
title="&lt;element-reference>"><strong>4.3.</strong></a>
4026+
title="&lt;element-reference>"><strong>4.4.</strong></a>
39514027

39524028
<li>ending shape, <a href="#ending-shape"
39534029
title="ending shape"><strong>5.2.</strong></a>
@@ -3981,7 +4057,7 @@ <h2 class=no-num id=index>Index</h2>
39814057
title="&lt;image>"><strong>4.</strong></a>
39824058

39834059
<li>&lt;image-combination>, <a href="#ltimage-combination"
3984-
title="&lt;image-combination>"><strong>4.4.</strong></a>
4060+
title="&lt;image-combination>"><strong>4.5.</strong></a>
39854061

39864062
<li>&lt;image-decl>, <a href="#image-decl-type"
39874063
title="&lt;image-decl>"><strong>4.2.</strong></a>
@@ -3995,6 +4071,12 @@ <h2 class=no-num id=index>Index</h2>
39954071
<li>image-resolution, <a href="#image-resolution"
39964072
title=image-resolution><strong>7.1.</strong></a>
39974073

4074+
<li>&lt;image-set>, <a href="#image-set-type"
4075+
title="&lt;image-set>"><strong>4.3.</strong></a>
4076+
4077+
<li>&lt;image-set-decl>, <a href="#image-set-decl-type"
4078+
title="&lt;image-set-decl>"><strong>4.3.</strong></a>
4079+
39984080
<li>intrinsic aspect ratio, <a href="#intrinsic-aspect-ratio"
39994081
title="intrinsic aspect ratio"><strong>6.1.</strong></a>
40004082

@@ -4031,7 +4113,7 @@ <h2 class=no-num id=index>Index</h2>
40314113
<li>objects, <a href="#objects" title=objects><strong>6.</strong></a>
40324114

40334115
<li>paint-source, <a href="#paint-source"
4034-
title=paint-source><strong>4.3.1.</strong></a>
4116+
title=paint-source><strong>4.4.1.</strong></a>
40354117

40364118
<li>&lt;position>, <a href="#position"
40374119
title="&lt;position>"><strong>5.2.1.</strong></a>
@@ -4070,6 +4152,9 @@ <h2 class=no-num id=index>Index</h2>
40704152
<li>as conformance class, <a href="#style-sheet"
40714153
title="style sheet, as conformance class"><strong>10.2.</strong></a>
40724154
</ul>
4155+
4156+
<li>‘<a href="#x"><code class=css>x</code></a>’, <a href="#x"
4157+
title="''x''"><strong>3.</strong></a>
40734158
</ul>
40744159
<!--end-index-->
40754160

‎css4-images/Overview.src.html‎

Lines changed: 62 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,9 @@ <h2 id='resolution-units'>
177177

178178
<dt><dfn>''dppx''</dfn>
179179
<dd>dots per ''px'' unit
180+
181+
<dt><dfn>''x''</dfn>
182+
<dd>identical to ''dppx''
180183
</dl>
181184

182185
<p>
@@ -211,7 +214,7 @@ <h2 id="image-values">
211214
or <a href="#gradients">gradient notation</a>.
212215
Its syntax is:
213216

214-
<pre class="prod"><dfn id='image-type'>&lt;image></dfn> = <i>&lt;url></i> | <i>&lt;image-list></i> | <i>&lt;gradient></i></pre>
217+
<pre class="prod"><dfn id='image-type'>&lt;image></dfn> = <i>&lt;url></i> | <i>&lt;image-list></i> | <i>&lt;image-set></i> | <i>&lt;gradient></i></pre>
215218

216219
<p>
217220
An ''&lt;image>'' can be used in many CSS properties,
@@ -504,6 +507,64 @@ <h4 id='bidi-images'>
504507
</div>
505508

506509

510+
<h3 id='image-set-notation'>
511+
Resolution Negotiation: the ''image-set()'' notation</h3>
512+
513+
<p>
514+
Delivering the most appropriate image resolution for a user's device can be a difficult task.
515+
Ideally, images should be in the same resolution as the device they're being viewed in,
516+
which can vary between users.
517+
However, other factors can factor into the decision of which image to send;
518+
for example, if the user is on a slow mobile connection,
519+
they may prefer to receive lower-res images
520+
rather than waiting for a large proper-res image to load.
521+
The ''image-set()'' function allows an author to ignore most of these issues,
522+
simply providing multiple resolutions of an image
523+
and letting the UA decide which is most appropriate in a given situation.
524+
525+
<p>
526+
The syntax for ''image-set()'' is:
527+
528+
<pre class='prod'>&#xa;<!--
529+
--><dfn id='image-set-type'>&lt;image-set></dfn> = image-set( [ <i>&lt;image-set-decl></i>, ]+ [ <i>image-set-decl></i> | &lt;color>] )&#xa;<!--
530+
--><dfn id='image-set-decl-type'>&lt;image-set-decl></dfn> = [ &lt;url> | &lt;string> ] <i>&lt;resolution></i></pre>
531+
532+
<p>
533+
Each ''&lt;string>'' or ''&lt;url>'' inside ''image-set()'' represents an image,
534+
just as if the <a href="#url-notation">''url()'' notation</a> had been used.
535+
As usual for URLs in CSS,
536+
relative URLs are resolved to an absolute URL
537+
(as described in Values &amp; Units [[!CSS3VAL]])
538+
when a specified ''image-set()'' value is computed.
539+
540+
<p>
541+
Every <i>&lt;image-set-decl></i> in a given ''image-set()'' must have a different <i>&lt;resolution></i>,
542+
or else the function is invalid.
543+
544+
<p>
545+
The value of ''image-set()'' is one or more <i>&lt;image-set-decl></i>s,
546+
composed of a URL and a resolution,
547+
and optionally a fallback color at the end of the list.
548+
The function represents the first such image that is not an <i>invalid image</i>,
549+
loaded in whatever order the UA decides is best.
550+
(In other words, the order that they are declared in the function makes no difference.)
551+
If the optional fallback color is specified,
552+
the UA may decide at any point to use the fallback color instead of attempting to load additional <i>&lt;image-set-decl></i>s,
553+
in which case the function represents a solid-color image of the given color with no <i>intrinsic dimensions</i>.
554+
If all of the provided <i>&lt;image-set-decl></i>s are <i>invalid images</i>
555+
and a fallback color was not provided,
556+
the entire ''image-set()'' function must be treated as an <i>invalid image</i>.
557+
558+
<p>
559+
If an <i>&lt;image-set-decl></i> is chosen and successfully loaded,
560+
the associated <i>&lt;resolution></i> is the image's <i>intrinsic resolution</i>.
561+
562+
<div class='example'>
563+
<p class='issue'>
564+
Provide an example.
565+
</div>
566+
567+
507568
<!--
508569
EEEEEEEEEEEEEEEEEEEEEElllllll tttt
509570
E::::::::::::::::::::El:::::l ttt:::t

0 commit comments

Comments
 (0)