[css-images-4] Add type() to image-set(). #656

Author: tabatkins

css-images-4/Overview.bs

@@ -19,6 +19,7 @@ Previous Version: https://www.w3.org/TR/2012/WD-css4-images-20120911/
 Ignored Terms: <offset>, background positioning area, border image area, <meetorslice>, <ending-shape>, Map, <image>, invalid image, invalid images, concrete object size, linear-gradient(), radial-gradient(), intrinsic dimensions, default object size, CSS
 Ignored Vars: H, P
 Include Can I Use Panels: yes
+Default Highlight: css
 </pre>
 
 <pre class=link-defaults>
@@ -149,7 +150,7 @@ Note: No change from [[css3-images]].
 -->
 
 
-Resolution Negotiation: the ''image-set()'' notation {#image-set-notation}
+Resolution/Type Negotiation: the ''image-set()'' notation {#image-set-notation}
 --------------------------------------------------------------------------
 
 	Delivering the most appropriate image resolution for a user's device can be a difficult task.
@@ -174,31 +175,76 @@ Resolution Negotiation: the ''image-set()'' notation {#image-set-notation}
 
 	<pre class='prod'>
 	<dfn caniuse="css-image-set">image-set()</dfn> = image-set( <<image-set-option>># )
-	<dfn>&lt;image-set-option></dfn> = [ <<image>> | <<string>> ] <<resolution>>
+	<dfn>&lt;image-set-option></dfn> = [ <<image>> | <<string>> ]
+	                     [ <<resolution>> || type(<<string>>) ]
 	</pre>
 
-	Issue: We should add "w" and "h" dimensions as a possibility, and a "format()" function,
+	Issue: We should add "w" and "h" dimensions as a possibility
 	to match the functionality of HTML's <a element>picture</a>.
 
+	Each <<string>> inside ''image-set()'' represents a <<url>>.
+
 	The ''image-set()'' function can not be nested inside of itself,
 	either directly
 	or indirectly
 	(as an argument to another <<image>> type).
 
-	Issue: Is this restriction needed?
-
-	Each <<string>> inside ''image-set()'' represents a <<url>>.
-
-	Every <<image-set-option>> in a given ''image-set()'' must have a different <<resolution>>,
-	or else the function is invalid.
+	Each <<image-set-option>> defines a possible image for the ''image-set()'' function to represent,
+	composed of three parts:
+
+	* An image reference (required).
+		This can be a URL,
+		or a CSS generated image,
+		such as a ''linear-gradient()''.
+
+	* A <<resolution>> (optional).
+		This is used to help the UA decide which <<image-set-option>> to choose.
+		If the image reference is for a raster image,
+		it also specifies the image's <a spec=css-images-4>intrinsic resolution</a>,
+		overriding any other source of data that might supply an [=intrinsic resolution=].
+
+		If not specified,
+		it behaves as ''1x'' for the purpose of selecting which <<image-set-option>> to use.
+		It also <em>defaults</em> the image's [=intrinsic resolution=] to ''1x'',
+		but if some other source of data supplies an [=intrinsic resolution=],
+		that resolution must be honored instead.
+
+	* A <dfn function for=image-set() lt=type()>type( <<string>> )</dfn> function (optional),
+		specifying the image's MIME type in the <<string>>.
+
+		If the <<string>>,
+		when parsed as a [=valid MIME type string=],
+		is either not valid,
+		or is valid but doesn't specify a supported image format,
+		the <<image-set-option>> does not define a valid option.
+		(This has no effect on the validity of the ''image-set()'' function.)
+
+		It does not have any effect on the image itself;
+		an <<image-set-option>> like <code highlight=css>url("picture.png") 1x format("image/jpeg")</code> is valid,
+		and if chosen will display the linked PNG image,
+		even tho it was declared to be a JPEG.
+
+		It not specified,
+		it has no effect on the <<image-set-option>>.
+
+
+	An ''image-set()'' function contains a list of one or more <<image-set-option>>s,
+	and must select only one of them
+	to determine what image it will represent:
+
+	1. First, remove any <<image-set-option>>s from the list
+		that specify an unknown or unsupported MIME type in their ''type()'' value.
+	2. Second, remove any <<image-set-option>>s from the list
+		that have the same <<resolution>> as a previous option in the list.
+	3. Finally, among the remaining <<image-set-option>>s,
+		make a UA-specific choice of which to load,
+		based on whatever criteria deemed relevant
+		(such as the resolution of the display,
+			connection speed,
+			etc).
+	4. The ''image-set()'' function then represents the <<image>>
+		of the chosen <<image-set-option>>.
 
-	UAs must make a UA-specific choice of which <<image-set-option>> to load,
-	based on whatever criteria they find relevant
-	(such as the resolution of the display,
-		connection speed,
-		etc).
-	The ''image-set()'' then represents the image associated with the URL of that choice.
-	The image's <a spec=css-images-4>intrinsic resolution</a> is the resolution associated with that choice.
 	UAs <strong>may</strong> change which <<image-set-option>> they wish to use for a given ''image-set()''
 	over the lifetime of the page,
 	if the criteria used to determine which option to choose change significantly enough to make it worthwhile in the UA's estimation.
@@ -217,6 +263,43 @@ Resolution Negotiation: the ''image-set()'' notation {#image-set-notation}
 		</pre>
 	</div>
 
+	<div class='example'>
+		This example shows use of the ''type()'' function
+		to serve multiple versions of the same image
+		in both new, higher-quality formats,
+		and older, more widely-supported formats:
+
+		<pre>
+			background-image: image-set( "foo.avif" type("image/avif"),
+			                             "foo.jpg" type("image/jpeg") );
+		</pre>
+
+		Note that the AVIF image is given first;
+		since both images have the same resolution
+		(defaulting to ''1x'' since it's unspecified),
+		the JPEG image,
+		coming second,
+		is automatically dropped in UAs that support AVIF images.
+
+		In older UAs, however,
+		the AVIF image is ignored
+		(because the UA knows it doesn't support <code>"image/avif"</code> files),
+		and so the JPEG is chosen instead.
+	</div>
+
+	<div class=example>
+		Raster images can be mixed with vector images,
+		or even CSS generated images.
+
+		For example, in this code snippet
+		a high-resolution image with subtle details is used on screens that can do it justice,
+		while an ordinary CSS ''linear-gradient()'' is used instead for low-resolution situations:
+
+		<pre>
+			background-image: image-set( linear-gradient(cornflowerblue, white) 1x,
+			                             url("detailed-gradient.png") 3x );
+		</pre>
+	</div>
 
 <!--
 ████ ██     ██    ███     ██████   ████████   ███ ███