CSS art gets brilliantly ruined by old browsers

[Rss Bot 1]

One of the most fun things about web design is that no matter how many intricately-defined standards there are, you can never be sure that whatever you create is going to look the same in all browsers. Even the very latest versions of the most popular browsers have different ways of handling assorted web technologies, which can affect the way your site renders; that's why cross-platform testing is so important, especially if you're relying on cutting-edge CSS animation.

While inconsistencies between browsers can be infuriating, every now and then they can throw up something utterly delightful, and here's one fantastic example: the pure CSS art of Diana Smith. She creates beautiful browser-based art inspired by classic paintings, using only hand-written HTML and CSS; her latest creation, Lace (in the style of Flemish and Baroque works) is a stunning piece.

• 8 state-of-the-art CSS features (and how to use them)

This is incredible work, if you look at it on a recent version of Chrome

At least, it is as long as you're looking at it in an up-to-date version of Chrome. CSS is one of those things that never quite works the same way across various browsers, and with an image like Lace that depends on certain CSS properties behaving in the way they do in Smith's browser, you can quickly spot the differences. 

Firefox Quantum makes a decent fist of it, but with some rough anti-aliasing and a lack of texture to the irises, while Safari loses the plot completely, layering stuff in the wrong order and ending up with a surrealistic nightmare vision, as seen above.

It's exactly the sort of thing that makes us want to deliberately feed Lace into older browsers to see just how they mess it up; thankfully Andy Baio has saved us the trouble. Having already tried Smith's previous work, Francine, in older browsers – we particularly love the almost Mondrian-like abstract effort by Internet Explorer 5.1.7 for Mac - he's given Lace the older browser treatment, with similarly fabulous results.

Don't mess with Safari 10.01

It's hard to beat the spectacular ruination that Safari has bestowed upon Lace; the weird thing is that if you go back a few versions to Safari 10.1 the results are a lot less random. However there's something weird going on with the shading, making the subject look severely bruised and beaten. "My theory is that Safari 10.01 tripped down some stairs, and two versions later, Safari 13 is feeling embarrassed about it," says Baio.

We adore the naive flatness of this effort

Going back to an old version of Chrome – in this case Chrome 45 from 2015 – yields excellent amusement, with the subject looking like a face painted onto a balloon. But the real joy's to be had from Internet Explorer 8, which renders Lace as a glorious piece of 8-bit neo-Cubism and loses every bit of detail, but still retains a certain degree of character and expression.

Internet Explorer 8's attempt is simply magnificent in its hopelessness

If you fancy trying out Lace in your own collection of ancient browsers, you can find it here. And to see more of Andy Baio's mistreatment of it, head to his blog post.

Related articles:

• 10 best CSS frameworks in 2019
• How to design with CSS shapes: An introduction
• 3 shiny new CSS properties for you to try today

View the full article