關於在 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”。