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!

Objective

You should update your question: it was a bug in the validator, that is now patched. Cf. the discussion at github.com/w3c/css-validator/issues/42 – Amathist

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.

Sarthe

Agreed. If the spec defines it as optional, then unless there's something else saying it needs to be different for the data scheme, then the issue is with the validator if it fails your markup for missing them. – Goldy

I opened an issue on github. – Amathist