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

Question

我正在编写一个预处理组件(在 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 构成了 url() 的无效值。在 CSS 样式表中 (?)

但是我什么也找不到:

• https://www.w3.org/TR/css-values-3/

这支持了这一点。

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

谁能澄清一下(最好有权威引用)？

---

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

Answer 1

data: URI 实际上是符合 RFC 2397 的有效 URL，别担心，它们仍然是允许的。

不确定这篇 MDN 文章在说“例如数据 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: URLs”。