[css-values-4] Add fetch() as a variant of url() that doesn't accept unquoted values. #541

Author: tabatkins

css-values-4/Overview.bs

@@ -15,6 +15,7 @@ At Risk: ''toggle()'', ''attr()''
 Ignored Terms: <spacing-limit>, containing block
 Ignored Vars: Cn+1, n
 Inline Github Issues: yes
+Default Highlight: css
 </pre>
 <pre class='link-defaults'>
 spec: css-backgrounds-3; type: type; text: <position>
@@ -459,11 +460,11 @@ Textual Data Types</h2>
 	the <a lt="specified value">specified</a> and <a>computed value</a> of a property
 	are exactly the provided Unicode values after parsing
 	(which includes character set conversion and [[css-syntax-3#escaping|escaping]]).
-	[[!UNICODE]] [[!CSS3SYN]]
+	[[!UNICODE]] [[!CSS-SYNTAX-3]]
 
 	<dfn export lt="CSS identifier | CSS ident | identifier | ident">CSS identifiers</dfn>,
 	generically denoted by <dfn>&lt;ident></dfn>,
-	consist of a sequence of characters conforming to the <<ident-token>> grammar. [[!CSS3SYN]]
+	consist of a sequence of characters conforming to the <<ident-token>> grammar. [[!CSS-SYNTAX-3]]
 	Identifiers cannot be quoted;
 	otherwise they would be interpreted as strings.
 	CSS properties accept two classes of <a>identifiers</a>:
@@ -657,7 +658,7 @@ Quoted Strings: the <<string>> type</h3>
 	[=Strings=] are denoted by <dfn id="string-value">&lt;string></dfn>
 	and consist of a sequence of characters delimited by double quotes or
 	single quotes. They correspond to the <<string-token>> production
-	in the <a href="https://www.w3.org/TR/css-syntax/">CSS Syntax Module</a> [[!CSS3SYN]].
+	in the <a href="https://www.w3.org/TR/css-syntax/">CSS Syntax Module</a> [[!CSS-SYNTAX-3]].
 
 	<div class=example>
 		Double quotes cannot occur inside double quotes, unless
@@ -706,51 +707,85 @@ Quoted Strings: the <<string>> type</h3>
 <h3 id="urls">
 Resource Locators: the <<url>> type</h3>
 
-	The <dfn>url()</dfn> <a>functional notation</a>,
-	denoted by <<url>>,
+	The <<url>> type
 	represents a <l spec=url>[=/URL=]</l>,
 	which is a pointer to a resource.
-	The typical syntax of a <<url>> is:
 
-	<pre class="prod"><dfn id="url-value">&lt;url></dfn> = url( <<string>> <<url-modifier>>* )</pre>
+	Typically, a <<url>> is written with the <dfn>url()</dfn>
+	or <dfn>fetch()</dfn> <a>functional notations</a>:
+
+	<pre class="prod">
+		<dfn id="url-value">&lt;url></dfn> = url( <<string>> <<url-modifier>>* ) |
+		        fetch( <<string>> <<url-modifier>>* )
+	</pre>
 
 	<div class="example">
-		Below is an example of a URL being used as a background image:
+		This example shows a URL being used as a background image:
 
-		<pre>body { background: url("http://www.example.com/pinkish.gif") }</pre>
+		<pre highlight=css>
+		body { background: url("http://www.example.com/pinkish.gif") }
+		</pre>
 	</div>
 
-	A <<url>> may alternately be written without quotation marks around the URL itself,
+	For legacy reasons, a ''url()'' can be written without quotation marks around the URL itself,
 	in which case it is <a lt="consume a url token" spec=css-syntax-3>specially-parsed</a>
-	as a <<url-token>> [[!CSS3SYN]].
+	as a <<url-token>> [[!CSS-SYNTAX-3]].
+	Because of this special parsing, ''url()'' is only able to specify its URL literally;
+	''fetch()'' lacks this special parsing rule,
+	and so its URL can be provided by functions,
+	such as ''var()''.
 
 	<div class="example">
 		For example, the following declarations are identical:
+
 		<pre>
 			background: url("http://www.example.com/pinkish.gif");
 			background: url(http://www.example.com/pinkish.gif);
 		</pre>
+
+		And these have the same meaning as well:
+
+		<pre>
+			background: fetch("http://www.example.com/pinkish.gif");
+			--foo: "http://www.example.com/pinkish.gif";
+			background: fetch(var(--foo));
+		</pre>
+
+		But this does <em>not</em> work:
+
+		<pre>
+			--foo: "http://www.example.com/pinkish.gif";
+			background: url(var(--foo));
+		</pre>
+
+		...because the unescaped "(" in the value causes a parse error,
+		so the entire declaration is thrown out as invalid.
 	</div>
 
-	Note: This unquoted syntax cannot accept a <<url-modifier>> argument
-	and has extra escaping requirements:
-	parentheses, <a href="https://www.w3.org/TR/css-syntax/#whitespace">whitespace</a> characters,
-	single quotes (&#39;) and double quotes (") appearing in a URL
-	must be escaped with a backslash,
-	e.g. ''url(open\(parens)'', ''url(close\)parens)''.
-	(In quoted <<string>> ''url()''s,
-	only newlines and the character used to quote the string need to be escaped.)
-	Depending on the type of URL,
-	it might also be possible to write these characters as URL-escapes
-	(e.g. ''url(open%28parens)'' or ''url(close%29parens)'')
-	as described in [[URL]].
+	<div class=note>
+		The unquoted ''url()'' syntax cannot accept a <<url-modifier>> argument
+		and has extra escaping requirements:
+		parentheses, <a href="https://www.w3.org/TR/css-syntax/#whitespace">whitespace</a> characters,
+		single quotes (&#39;) and double quotes (") appearing in a URL
+		must be escaped with a backslash,
+		e.g. ''url(open\(parens)'', ''url(close\)parens)''.
+		(In quoted <<string>> ''url()''s,
+		only newlines and the character used to quote the string need to be escaped.)
+		Depending on the type of URL,
+		it might also be possible to write these characters as URL-escapes
+		(e.g. ''url(open%28parens)'' or ''url(close%29parens)'')
+		as described in [[URL]].
+
+		The precise requirements for parsing the unquoted ''url()'' syntax
+		are normatively defined in [[!CSS-SYNTAX-3]].
+	</div>
 
 	Some CSS contexts (such as ''@import'') also allow a <<url>>
-	to be represented by a bare <<string>>, without the ''url()'' wrapper.
+	to be represented by a bare <<string>>, without the function wrapper.
 	In such cases the string behaves identically to a ''url()'' function containing that string.
 
 	<div class="example">
-		For example, the following statements are identical:
+		For example, the following statements act identically:
 		<pre>
 			@import url("base-theme.css");
 			@import "base-theme.css";
@@ -950,7 +985,7 @@ Integers: the <<integer>> type</h3>
 	When written literally,
 	an <dfn export>integer</dfn> is one or more decimal digits ''0'' through ''9''
 	and corresponds to a subset of the <<number-token>> production
-	in the CSS Syntax Module [[!CSS3SYN]].
+	in the CSS Syntax Module [[!CSS-SYNTAX-3]].
 	The first digit of an integer may be immediately preceded by <css>-</css> or <css>+</css>
 	to indicate the integer's sign.
 
@@ -996,7 +1031,7 @@ Real Numbers: the <<number>> type</h3>
 	or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits
 	and optionally an exponent composed of "e" or "E" and an integer.
 	It corresponds to the <<number-token>> production
-	in the <a href="https://www.w3.org/TR/css-syntax/">CSS Syntax Module</a> [[!CSS3SYN]].
+	in the <a href="https://www.w3.org/TR/css-syntax/">CSS Syntax Module</a> [[!CSS-SYNTAX-3]].
 	As with integers, the first character of a number may be immediately preceded by <css>-</css> or <css>+</css>
 	to indicate the number's sign.
 
@@ -1031,7 +1066,7 @@ Numbers with Units: <a>dimension</a> values</h3>
 	immediately followed by a unit identifier,
 	which is an <a>identifier</a>.
 	It corresponds to the <<dimension-token>> production
-	in the <a href="https://www.w3.org/TR/css-syntax/">CSS Syntax Module</a> [[!CSS3SYN]].
+	in the <a href="https://www.w3.org/TR/css-syntax/">CSS Syntax Module</a> [[!CSS-SYNTAX-3]].
 	Like keywords, unit identifiers are <a>ASCII case-insensitive</a>.
 
 	<wpt>
@@ -1104,7 +1139,7 @@ Percentages: the <<percentage>> type</h3>
 	a <dfn export>percentage</dfn> consists of a <a>number</a>
 	immediately followed by a percent sign <css>%</css>.
 	It corresponds to the <<percentage-token>> production
-	in the <a href="https://www.w3.org/TR/css-syntax/">CSS Syntax Module</a> [[!CSS3SYN]].
+	in the <a href="https://www.w3.org/TR/css-syntax/">CSS Syntax Module</a> [[!CSS-SYNTAX-3]].
 
 	Percentage values are always relative to another quantity,
 	for example a length.