What is an example usage of <url-modifier> at CSS url() function?

Question

3.4. Resource Locators: the <url> type describes a <url-modifier> at

A URL is a pointer to a resource and is a functional notation denoted by <url>. The syntax of a <url> is:

<url> = url( <string> <url-modifier>* )

In addition to the syntax defined above, a can sometimes be written in other ways:

• For legacy reasons, a <url> can be written without quotation marks around the URL itself. This syntax is specially-parsed, and produces a <url-token> rather than a function syntactically. [CSS3SYN]

• Some CSS contexts, such as @import, allow a <url> to be represented by a <string> instead. This behaves identically to writing a url() function containing that string. Because these alternate ways of writing a <url> are not functional notations, they cannot accept any <url-modifier>s.

Note: The special parsing rules for the legacy quotation mark-less <url> syntax means that parentheses, whitespace characters, single quotes (') and double quotes (") appearing in a URL must be escaped with a backslash, e.g. url(open\(parens), url(close\)parens). 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]. (If written as a normal function containing a string, ordinary string escaping rules apply; only newlines and the character used to quote the string need to be escaped.)

at

3.4.2. URL Modifiers

The url() function supports specifying additional <url-modifier>s, which change the meaning or the interpretation of the URL somehow. A <url-modifier> is either an <ident> or a function.

This specification does not define any <url-modifier>s, but other specs may do so.

See also CSS Values and Units Module Level 3 Editor’s Draft, 21 March 2016

---

• What are example usages of <ident> and function at url() ?

• What are differences between <string> , <ident>, function at url() ?

Answer 1

A <url-modifier> is either an <ident> or a function.

<ident> is an identifier.

A portion of the CSS source that has the same syntax as an <ident-token>.

<ident-token> Syntax ;

I could not find any examples of <ident> used within the url function but as mentioned in this email there are some possible future uses.

• Fetch options to control CORS/cookies/etc
• working with Subresource Integrity

Looking at the <ident> syntax you cannot use a key/value pair so i assume most of this would be implemented using a function which does not yet exist., resource hinting could be implemented using <ident>.

.foo { background-image: url("//aa.com/img.svg" prefetch); }

I did however find a "A Collection of Interesting Ideas" with a function <url-modifier> defined.

SVG Parameters (not official spec)

The params() function is a <url-modifier>

.foo { background-image: url("//aa.com/img.svg" param(--color var(--primary-color))); }