CSS url()函数中<url-modifier>的示例用法是什么？

Question

3.4.资源定位器:<url>类型描述了一个<url-modifier>at

甲URL是一个指向一个资源并且是表示的函数表示法<url>.a的语法<url>是:

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

除了上面定义的语法之外,有时可以用其他方式编写:

• 由于遗留原因,<url>可以在URL本身周围不带引号的情况下编写.这种语法是经过特殊解析的,并且<url-token>在语法上产生一个而不是一个函数.[ CSS3SYN ]

• 一些CSS上下文,例如@import,允许用a <url>代表<string>.这与写入url()包含该字符串的函数的行为相同.因为这些替代的写作方式<url>不是功能性符号,所以它们不能接受任何<url-modifier>s.

注意:传统无引号标记<url>语法的特殊解析规则 意味着必须使用反斜杠转义URL中出现的括号,空白字符,单引号(')和双引号("),例如url(open\(parens),url(close\)parens).根据类型而定对于URL,也可以将这些字符写为URL转义(例如url(open%28parens)或者 url(close%29parens)),如[ URL ]中所述.(如果写为包含字符串的普通函数,则应用普通字符串转义规则;仅使用换行符和字符引用需要转义的字符串.)

在

3.4.2.URL修饰符

该url()函数支持指定附加的<url-modifier>s,它以某种方式改变URL的含义或解释.A <url-modifier>是一个<ident>或一个函数.

此规范未定义任何<url-modifier>s,但其他规范可能会这样做.

另请参见CSS值和单位模块级别3编辑草案,2016年3月21日

---

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

• 有什么差异<string>,<ident>,function在url()？

Answer 1

A<url-modifier>是 an<ident>或 a function。

<ident>是一个标识符。

CSS 源的一部分，其语法与<ident-token>.

<ident-token>句法;

我找不到<ident>该函数中使用的任何示例url，但正如本电子邮件中提到的，未来可能有一些用途。

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

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

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

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

SVG 参数（非官方规范）

这是一个params() function<url-modifier>

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