关于在 CSS url() 中使用数据 URI 的有效性的说明

Clarification regarding validity of using data-URIs in CSS url()

我正在编写一个预处理组件(在 PHP 中),在某些情况下,它会在 CSS 中重写外部图像文件请求,例如:

background-image: url('/my-folder/my-image.png');

作为CSS内联数据URI,例如:

background-image: url('data:image/png;base64,[Base-64 Encoding Here]');

我刚刚在 MDN:

阅读(有些惊讶)

In CSS Level 1, the url() functional notation described only true URLs. In CSS Level 2, the definition of url() was extended to describe any URI, such as a data-uri. CSS Values and Units Level 3 returned to the narrower, initial definition. Now, url() denotes only true <url>s.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/url()

真的吗?这似乎表明 Data-URIs 在 CSS 样式表 (?)

中构成 url() 的无效值

但我在以下地方找不到任何东西:

支持这一点。

我的印象是 Data-URI 是 CSS 样式表中 url() 的完全有效值。

谁能澄清一下(最好有权威参考)?


N.B. 下面的标签显示为 w3c-validation - 我知道它应该显示为 what-wg-validation.

data: 根据 RFC 2397,URI 实际上是有效的 URL,别担心,它们仍然是允许的。

不确定这篇 MDN 文章在说 “例如 data-uri” 时试图暗示什么,但我确实将其编辑为 URN,因为它是实际上 what happened in CSS 2:

规范确实将 符号扩展到所有 URI,允许 Uniform Resource Names 也成为其中的一部分……我不知道他们为什么要进行此更改,但至少可以说这似乎很奇怪,因为我看不出 URN 在样式表中有什么用处……根据规范的措辞,它的作者似乎还不太清楚它会是什么。

URLs (Uniform Resource Locators, see [RFC1738] and [RFC1808]) provide the address of a resource on the Web. An expected new way of identifying resources is called URN (Uniform Resource Name). Together they are called URIs (Uniform Resource Identifiers, see [URI]). This specification uses the term URI.


Ps:规范将其定义为 fetch API.

中的“data: URL”