css - 在 CSS url() 函数中的示例用法是什么？

Question

3.4. Resource Locators: the <url> type描述了一个 <url-modifier>在

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.)

在

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.

另见 CSS Values and Units Module Level 3Editor’s Draft, 21 March 2016

---

• <ident> 的示例用法是什么？和 function在 url() ?

• <string> 之间有什么区别？ , <ident> , function在 url() ？

Answer 1

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

<ident>是一个标识符。

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

<ident-token> Syntax ;

我找不到 <ident> 的任何示例在 url 中使用功能但是如 this email 中所述有一些可能的 future 用途。

• 获取控制 CORS/cookies/等的选项
• 处理子资源完整性

查看 <ident>语法你不能使用键/值对所以我假设其中大部分将使用 function 实现尚不存在。资源提示可以使用 <ident> 实现.

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

不过，我确实找到了一个带有 function 的“有趣的想法集” <url-modifier>定义。

SVG Parameters (非官方规范)

params() function是 <url-modifier>

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