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() ?

This cannot be answered beyond what is already given in the quotations because there are no known <url-modifier> definitions in any specification. If you're looking for made-up examples, then this question is off-topic. — BoltClock
– BoltClock, Commented Apr 3, 2016 at 13:54
@BoltClock The specification defines that using a <url-modifier> is possible at url(). Question is asking how this available feature can be, or is implemented ? If the feature has been used in the wild, how so ? The second portion of Question is if there are differences between <string>, <ident> at url() function ? Not certain how this would be considered "off-topic" ? How can it be determined that no browser, or individual user has implemented the feature without asking ? — guest271314
– guest271314, Commented Apr 3, 2016 at 14:07
Putting aside the assumption that just because it's been defined in the spec means implementations must exist in the wild, the question is too broad. Even if you're asking for existing impls, you're still asking for a list that is likely to change as new definitions and new impls appear (and that isn't counting nonstandard impls, since technically every impl right now will be nonstandard). The second question can be answered partially and rather easily at that - the spec itself says a modifier can only either be an ident or a function, therefore <string> must represent the URL itself. — BoltClock
– BoltClock, Commented Apr 3, 2016 at 14:15
@BoltClock This Question stackoverflow.com/questions/36072936/… is related to the degree that if a <url-modifier> could be implemented, could we use that feature to display an .html document at url() function at content ? Trying to find a procedure to interpret, pre-process an .html document in such a manner that it could be rendered without converting the document to an image or embedding an svg. — guest271314
– guest271314, Commented Apr 3, 2016 at 14:21
url("/foo" bar) and url("/foo" bar(3)), I presume. Since there are no implementations yet the question is moot imho. — a better oliver
– a better oliver, Commented Apr 8, 2016 at 11:59

TarranJones · Accepted Answer · 2016-05-12 10:32:42Z

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))); }

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related