10
#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!

MM.
  • 2,653
  • 4
  • 26
  • 36
  • 1
    You should update your question: it was a bug in the validator, that is now patched. Cf. the discussion at https://github.com/w3c/css-validator/issues/42 – Clément Mar 17 '17 at 16:12

1 Answers1

11

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 2
    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. – PhonicUK Mar 18 '13 at 15:55
  • 1
    I opened an issue on [github](https://github.com/w3c/css-validator/issues/42#issuecomment-155572400). – Clément Nov 11 '15 at 03:13