Zach’s ugly mug (his face) Zach Leatherman

W3C Status Banners

August 25, 2014

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.

A comparison of the current and newly recreated banner

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.


< Newer
The Perfect GIF
Older >
Tablesaw: A Flexible Tool for Responsive Tables

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 79 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

13 Likes

Eric WallaceElly Loel ✨????Nathan KnowlerSeth A. RobyMottokrosh@mastodon.socialScott Kellum :typetura:AZ Guy ????Baldur BjarnasonkatherineDave RupertjailandradeJames NashFynn Becker
7 Comments
  1. Maxim Lebedev

    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.

  2. Zach Leatherman

    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

  3. Kilian Valkhof

    Kilian Valkhof

    @zachleat I'm not saying I'm disappointed but I clicked the link expecting one of those "xhtml 1.0" style badges..

  4. Zach Leatherman

    Zach Leatherman

    @Kilian ???????????????????????????????????????? someone should make this88×31 ????

  5. Zach Leatherman

    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

  1. Shepazu Disqus

    26 Aug 2014
    Thanks, Zach! I've forward this to our Communications team (who's in charge of that sort of thing), with the suggestion that they consider adopting them.
    1. zachleat Disqus

      26 Aug 2014
      Excellent!
Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)