W3C Status Banners

November 29, 2023: this was updated as a web component.

Browsing the World Wide Web this weekend on a fancy HDPi screen, I noticed the iconic W3C Status Banners on the W3C specification documents were blurry images. In true first world problem fashion, I decided to improve them and recreate the banners using CSS.

• Demo
• Code on GitHub

For really no reason whatsoever, I’ve generated a random status banner on each visit to one of my blog posts that can be seen in the top left corner of the viewport (above a 42em width).

I’d be chuffed if the W3C actually used this code. I created a repo for it on GitHub. Usage instructions and browser compatibility are included there.

Performance

While it should be noted that switching from image content to CSS means that you’re shifting from non-blocking to blocking content, care can be taken to load the CSS in an asynchronous fashion to minimize the impact on initial page render.

It should be noted that after I wrote this, I discovered that all of the images were in fact also available in SVG format.

File Sizes

I’ve included the smallest and the largest SVG image file sizes below.

Take note that the single CSS file size for all of the banners, currently 1.5 KB (or 506 B after minimization and gzip), is almost half the size of the smallest SVG banner image. And the CSS has better browser support than raw SVG too, including Android 2.x (which does not support SVG).

So, yeah, take that SVG. You ain’t the best at everything.

Update: Take note that the original idea behind this was probably born from the iliveinomaha banner rewrite first introduced by Matt Steele in his blog post A Fresh Coat of Paint.