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 best web browsers (opens in new tab) 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 (opens in new tab).
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 (opens in new tab) of Diana Smith (opens in new tab). 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. For more on old browsers, see our history of the web browser.
- 8 state-of-the-art CSS features (and how to use them) (opens in new tab)
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 only designed for Chrome, but don't let that stop you from trying it in other browsers: the older, the better! Here it is in Chrome 17, Firefox 3.6, Chrome 9, and (my favorite) Internet Explorer 5.1.7 for Mac. pic.twitter.com/dFNYKi8MyfMay 1, 2018
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 (opens in new tab) has saved us the trouble. Having already tried Smith's previous work, Francine (opens in new tab), 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.
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.
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.
If you fancy trying out Lace in your own collection of ancient browsers, you can find it here (opens in new tab). And to see more of Andy Baio's mistreatment of it, head to his blog post (opens in new tab).