Simply Testable Blog

Figuring out how to automate away the pain of routine front-end web testing; the story behind

211 posts covering the initial idea, growth of the service, features, advances, failures and successes.

I learned yesterday from @johnholtripley that CSS background image data URLs were presenting CSS validation errors incorrectly.

By this I mean that the CSS validator was saying there is an error when there was not.

Let me quickly explain what data URLs in CSS are for this to make sense.

You can traditionally define a background image in CSS like this: {
    background-image: url('elephant.png');

Modern browsers allow you to use data URLs whereby binary data is encoded within the URL itself: {
    background-image: url(data:image/png;base64,iVBORw0KGgoAA

(examples courtesy of Wikipedia)

A modern browser will then translate that long text string back in to binary data which will be, in this case, a png image.

Take a look at the url(...); content above. See how it doesn't appear to be a regular URL as you know it?

It doesn't look like a regular URL to me and, despite it being valid CSS, it doesn't look like a regular URL to the W3C CSS validator either.

Try to validate the above and you get the lovely error:

Value Error : background-image url(data:image/png;base64,iVBORw0KGgoA…SuQmCC) is an incorrect URL

Notice how the url(...); content is directly in the brackets without quotes?

You're allowed to use both url("quoted"); and url(unquoted); values (so long as you properly escape quote characters).

Sadly the W3C CSS validator doesn't agree. Validation passes fine for quoted data URLs but not for valid unquoted data URLs.

Luckily for you, I just updated our CSS validator parser library to allow false background image data URL errors to be ignored.

If you now run a full-site CSS validation test and happen to be using valid unquoted data URLs you'll no longer be bothered by such false errors.