This is what happens when aged browsers meet cutting-edge CSS.
(Image credit: Diana Smith/Andy Baio)
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 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. For more on old browsers, see our history of the web browser.
This is incredible work, if you look at it on a recent version of Chrome (Image credit: Diana Smith/Andy Baio)
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 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 (Image credit: Diana Smith/Andy Baio)
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 (Image credit: Diana Smith/Andy 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.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
Internet Explorer 8's attempt is simply magnificent in its hopelessness (Image credit: Diana Smith/Andy Baio)
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.
Jim McCauley is a writer, performer and cat-wrangler who started writing professionally way back in 1995 on PC Format magazine, and has been covering technology-related subjects ever since, whether it's hardware, software or videogames. A chance call in 2005 led to Jim taking charge of Computer Arts' website and developing an interest in the world of graphic design, and eventually led to a move over to the freshly-launched Creative Bloq in 2012. Jim now works as a freelance writer for sites including Creative Bloq, T3 and PetsRadar, specialising in design, technology, wellness and cats, while doing the occasional pantomime and street performance in Bath and designing posters for a local drama group on the side.
