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

Question

I'm writing a pre-processing component (in PHP) which, in certain contexts, rewrites external image file requests in CSS such as:

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

as CSS-inlined Data URIs , such as:

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

I've just read (with some surprise) over at 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()

Really? This would seem to suggest that Data-URIs constitute an invalid value for url() in CSS Stylesheets (?)

But I can find nothing in:

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

that backs this up.

I was under the impression that a Data-URI is an entirely valid value for url() in CSS Stylesheets.

Can anyone clarify (ideally with an authoritative reference), please?

---

NB The tag below reads w3c-validation - I recognise it should probably read what-wg-validation .

Answer 1

data: URIs are actually valid URLs as per RFC 2397 , don't worry, they are still allowed.

Not sure what this MDN article tried to imply when it says "such as a data-uri" , but I did edit it out to URN since it's actually what happened in CSS 2 :

The specs did indeed extend the <url> notation to all URIs, by allowing Uniform Resource Names to be part of it too... I can't tell why they did this change, but it seems very weird to say the least, as I can't see how an URN could be any useful in a stylesheet... According to the specs wording, it seems its authors didn't quite know yet what it would be.

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: Specs define it as " data: URLs" from the fetch API .