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

Question

我正在编写一个预处理组件（在 PHP 中），它在某些情况下会重写 CSS 中的外部图像文件请求，例如：

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

作为 CSS 内联的Data URIs ，例如：

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

我刚刚在MDN上阅读（有些惊讶）：

在CSS Level 1中， url()功能符号仅描述了真实的 URL。 在CSS Level 2中， url()的定义被扩展为描述任何 URI，例如 data-uri。 CSS 值和单位 3 级返回到较窄的初始定义。 现在， url()仅表示真正的<url> s。

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

真的吗？ 这似乎表明Data-URIs构成 CSS 样式表中url()的无效值（？）

但我什么也找不到：

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

这支持了这一点。

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

任何人都可以澄清（最好是权威参考），好吗？

---

注意下面的标签读取w3c-validation - 我知道它可能应该读取what-wg-validation 。

Answer 1

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

不确定这篇 MDN 文章在说“例如 data-uri”时试图暗示什么，但我确实将其编辑为URN ，因为它实际上 是 CSS 2 中发生的事情：

规范确实将 <url> 表示法扩展到所有 URI，通过允许统一资源名称也成为其中的一部分......我不知道他们为什么要这样做，但至少可以说似乎很奇怪，因为我看不出 URN 在样式表中有何用处……根据规范的措辞，它的作者似乎还不太清楚它会是什么。

URL（统一资源定位器，参见 [RFC1738] 和 [RFC1808]）提供 Web 上资源的地址。 一种预期的识别资源的新方法称为 URN（统一资源名称）。 它们一起被称为 URI（统一资源标识符，参见 [URI]）。 本规范使用术语 URI。

---

Ps：规范将其定义为来自fetch API的“ data: URLs”。