Are unquoted data URIs valid in CSS?

Question

#something {
    background: url(data:image/png;base64,ABCDEF);
}

This snippet works in all browsers which support data URIs (obviously with something else than ABCDEF).

Also, it's valid according to the CSS 2.1 spec:

...optional single quote (') or double quote (") character followed by the URI itself...

But the validator won't accept it without quotes:

Value Error : background url(data:image/png;base64,ABCDEF) is an incorrect URL

If you surround the URI with single or double quotes, it validates.

Am I missing something? Is it a bug in the validator? EDIT: it was!

Answer 1

As long as the URI itself does not break the url() syntax in any way (e.g. ( and ) must either be escaped or URI-encoded so they don't prematurely end the function token, also mentioned in the spec), it should be valid even if unquoted.

It's probably a validator bug. Specifically, it doesn't appear to handle unquoted data URIs in any form, because when I simply change data to http (even though it obviously doesn't resemble a typical HTTP address):

#something {
    background: url(http:image/png;base64,ABCDEF);
}

... it then magically passes validation.