Skip to content

Commit af2c881

Browse files
LeaVerouLeaVerou
committed
Defer image-set() to Images 4
1 parent ccde9f0 commit af2c881

File tree

2 files changed

+83
-82
lines changed

2 files changed

+83
-82
lines changed

‎css-images-4/Overview.bs‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,88 @@ Image References: the ''url()'' notation {#url-notation}
9292

9393
Note: No change from [[css3-images]].
9494

95+
96+
97+
<!--
98+
████ ██ ██ ███ ██████ ████████ ██████ ████████ ████████ ███ ███
99+
██ ███ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
100+
██ ████ ████ ██ ██ ██ ██ ██ ██ ██ ██ ██
101+
██ ██ ███ ██ ██ ██ ██ ████ ██████ ███████ ██████ ██████ ██ ██ ██
102+
██ ██ ██ █████████ ██ ██ ██ ██ ██ ██ ██ ██
103+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
104+
████ ██ ██ ██ ██ ██████ ████████ ██████ ████████ ██ ███ ███
105+
-->
106+
107+
108+
Resolution Negotiation: the ''image-set()'' notation {#image-set-notation}
109+
--------------------------------------------------------------------------
110+
111+
Delivering the most appropriate image resolution for a user's device can be a difficult task.
112+
Ideally, images should be in the same resolution as the device they're being viewed in,
113+
which can vary between users.
114+
However, other factors can factor into the decision of which image to send;
115+
for example, if the user is on a slow mobile connection,
116+
they may prefer to receive lower-res images
117+
rather than waiting for a large proper-res image to load.
118+
The ''image-set()'' function allows an author to ignore most of these issues,
119+
simply providing multiple resolutions of an image
120+
and letting the UA decide which is most appropriate in a given situation.
121+
122+
Issue: This solution assumes that resolution is a proxy for filesize,
123+
and therefore doesn't appropriately handle multi-resolution sets of vector images,
124+
or mixing vector images with raster ones (e.g. for icons).
125+
For example, use a vector for high-res,
126+
pixel-optimized bitmap for low-res,
127+
and same vector again for low-bandwidth (because it's much smaller, even though it's higher resolution).
128+
129+
The syntax for ''image-set()'' is:
130+
131+
<pre class='prod'>
132+
<dfn caniuse="css-image-set">image-set()</dfn> = image-set( <<image-set-option>># )
133+
<dfn>&lt;image-set-option></dfn> = [ <<image>> | <<string>> ] <<resolution>>
134+
</pre>
135+
136+
Issue: We should add "w" and "h" dimensions as a possibility, and a "format()" function,
137+
to match the functionality of HTML's <a element>picture</a>.
138+
139+
The ''image-set()'' function can not be nested inside of itself,
140+
either directly
141+
or indirectly
142+
(as an argument to another <<image>> type).
143+
144+
Issue: Is this restriction needed?
145+
146+
Each <<string>> inside ''image-set()'' represents a <<url>>.
147+
148+
Every <<image-set-option>> in a given ''image-set()'' must have a different <<resolution>>,
149+
or else the function is invalid.
150+
151+
UAs must make a UA-specific choice of which <<image-set-option>> to load,
152+
based on whatever criteria they find relevant
153+
(such as the resolution of the display,
154+
connection speed,
155+
etc).
156+
The ''image-set()'' then represents the image associated with the URL of that choice.
157+
The image's <a spec=css-images-4>intrinsic resolution</a> is the resolution associated with that choice.
158+
UAs <strong>may</strong> change which <<image-set-option>> they wish to use for a given ''image-set()''
159+
over the lifetime of the page,
160+
if the criteria used to determine which option to choose change significantly enough to make it worthwhile in the UA's estimation.
161+
162+
<div class='example'>
163+
This example shows how to use ''image-set()'' to provide an image in three versions:
164+
a "normal" version,
165+
a "high-res" version,
166+
and an extra-high resolution version for use in high-quality printing
167+
(as printers can have <em>extremely</em> high resolution):
168+
169+
<pre>
170+
background-image: image-set( "foo.png" 1x,
171+
"foo-2x.png" 2x,
172+
"foo-print.png" 600dpi );
173+
</pre>
174+
</div>
175+
176+
95177
<!--
96178
████ ██ ██ ███ ██████ ████████ ███ ███
97179
██ ███ ███ ██ ██ ██ ██ ██ ██ ██

‎css-images/Overview.bs‎

Lines changed: 1 addition & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ Image Values: the <<image>> type {#image-values}
6161
The <<image>> value type denotes a 2D image.
6262
Its syntax is:
6363

64-
<pre class="prod"><dfn>&lt;image></dfn> = <<url>> | <<image-set()>> | <<cross-fade()>> | <<gradient>></pre>
64+
<pre class="prod"><dfn>&lt;image></dfn> = <<url>> | <<cross-fade()>> | <<gradient>></pre>
6565

6666
An <<image>> can be used in many CSS properties,
6767
including the 'background-image', 'list-style-image', 'cursor' properties [[!CSS21]]
@@ -101,86 +101,6 @@ Image References: the ''url()'' notation {#url-notation}
101101

102102

103103

104-
<!--
105-
████ ██ ██ ███ ██████ ████████ ██████ ████████ ████████ ███ ███
106-
██ ███ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
107-
██ ████ ████ ██ ██ ██ ██ ██ ██ ██ ██ ██
108-
██ ██ ███ ██ ██ ██ ██ ████ ██████ ███████ ██████ ██████ ██ ██ ██
109-
██ ██ ██ █████████ ██ ██ ██ ██ ██ ██ ██ ██
110-
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
111-
████ ██ ██ ██ ██ ██████ ████████ ██████ ████████ ██ ███ ███
112-
-->
113-
114-
115-
Resolution Negotiation: the ''image-set()'' notation {#image-set-notation}
116-
--------------------------------------------------------------------------
117-
118-
Delivering the most appropriate image resolution for a user's device can be a difficult task.
119-
Ideally, images should be in the same resolution as the device they're being viewed in,
120-
which can vary between users.
121-
However, other factors can factor into the decision of which image to send;
122-
for example, if the user is on a slow mobile connection,
123-
they may prefer to receive lower-res images
124-
rather than waiting for a large proper-res image to load.
125-
The ''image-set()'' function allows an author to ignore most of these issues,
126-
simply providing multiple resolutions of an image
127-
and letting the UA decide which is most appropriate in a given situation.
128-
129-
Issue: This solution assumes that resolution is a proxy for filesize,
130-
and therefore doesn't appropriately handle multi-resolution sets of vector images,
131-
or mixing vector images with raster ones (e.g. for icons).
132-
For example, use a vector for high-res,
133-
pixel-optimized bitmap for low-res,
134-
and same vector again for low-bandwidth (because it's much smaller, even though it's higher resolution).
135-
136-
The syntax for ''image-set()'' is:
137-
138-
<pre class='prod'>
139-
<dfn caniuse="css-image-set">image-set()</dfn> = image-set( <<image-set-option>># )
140-
<dfn>&lt;image-set-option></dfn> = [ <<image>> | <<string>> ] <<resolution>>
141-
</pre>
142-
143-
Issue: We should add "w" and "h" dimensions as a possibility, and a "format()" function,
144-
to match the functionality of HTML's <a element>picture</a>.
145-
146-
The ''image-set()'' function can not be nested inside of itself,
147-
either directly
148-
or indirectly
149-
(as an argument to another <<image>> type).
150-
151-
Issue: Is this restriction needed?
152-
153-
Each <<string>> inside ''image-set()'' represents a <<url>>.
154-
155-
Every <<image-set-option>> in a given ''image-set()'' must have a different <<resolution>>,
156-
or else the function is invalid.
157-
158-
UAs must make a UA-specific choice of which <<image-set-option>> to load,
159-
based on whatever criteria they find relevant
160-
(such as the resolution of the display,
161-
connection speed,
162-
etc).
163-
The ''image-set()'' then represents the image associated with the URL of that choice.
164-
The image's <a spec=css-images-4>intrinsic resolution</a> is the resolution associated with that choice.
165-
UAs <strong>may</strong> change which <<image-set-option>> they wish to use for a given ''image-set()''
166-
over the lifetime of the page,
167-
if the criteria used to determine which option to choose change significantly enough to make it worthwhile in the UA's estimation.
168-
169-
<div class='example'>
170-
This example shows how to use ''image-set()'' to provide an image in three versions:
171-
a "normal" version,
172-
a "high-res" version,
173-
and an extra-high resolution version for use in high-quality printing
174-
(as printers can have <em>extremely</em> high resolution):
175-
176-
<pre>
177-
background-image: image-set( "foo.png" 1x,
178-
"foo-2x.png" 2x,
179-
"foo-print.png" 600dpi );
180-
</pre>
181-
</div>
182-
183-
184104

185105
<!--
186106
██████ ████████ ███████ ██████ ██████ ████████ ███ ████████ ████████ ███ ███
@@ -1870,7 +1790,6 @@ Changes Since the <a href="https://www.w3.org/TR/2012/CR-css3-images-20120417/">
18701790
- The 'image-orientation' property has been marked as At-Risk.
18711791
- Added the 'image-rendering' property
18721792
- Added the ''cross-fade()'' notation
1873-
- Added the ''image-set()'' notation
18741793
- Defined <a href="#interpolation">Interpolation</a>
18751794
- Defined <a href="#serialization">Serialization</a>
18761795

0 commit comments

Comments
 (0)