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.
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.
| Status | PNG | SVG |
|---|---|---|
| Mean (of 13 images) | 1.4 KB | 7.5 KB |
| W3C Note | 0.7 KB | 2.8 KB |
| … | ||
| W3C Proposed Edited Recommendation | 1.5 KB | 11 KB |
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.
7 Comments
Maxim Lebedev
@zachleat That's all great, but it seems a bit redundant to use API of WebComponents for something simple that can be implemented on bare HTML + CSS. Besides, components don't work with JavaScript turned off, which is bad for HTML + CSS-only components.
Zach Leatherman
@toby3d Yep—you’re right. This is a JS component! I do include an example in the README that can show fallback text if you want that.I did write a whole blog post on this exact topic recently: https://www.zachleat.com/web/a-taxonomy-of-web-component-types/ An Attempted Taxonomy … Truncated
Kilian Valkhof
@zachleat I'm not saying I'm disappointed but I clicked the link expecting one of those "xhtml 1.0" style badges..
Zach Leatherman
@Kilian ???????????????????????????????????????? someone should make this88×31 ????
Zach Leatherman
@Kilian oh my god don’t click this link https://cyber.dabamos.de/88x31/ the bandwidth costs ???? The 88x31 GIF Collection | Part 1
Shepazu Disqus
26 Aug 2014zachleat Disqus
26 Aug 2014