Twitter: raymondcamden

Address: Lafayette, LA, USA

Mashups of data

09-04-2012 5,703 views Development, JavaScript, HTML5 13 Comments

I would hope, really hope, that my readers are aware of When Can I Use. It's a site that gives you quick access to a multitude of HTML5/CSS/etc features and their support over a wide variety of browsers and versions. It is the place I check when I need to see if a particular feature is supported on a particular platform. Towards the end of last week, someone tweeted that it would be cool if you could see a support matrix for multiple features at once. So for example, what if I wanted to see what browsers support both canvas and html5 form features. (Because certainly the browser engineers would focus their time on useful form features over silly graphical drawing surfaces. Oh god, I've gone off on a rant again. Ignore me.) Turns out that all of the data for the site is shared publicly on GitHub:

I thought to myself - what if I took that data and used my incredible design skills to build such a tool. And I did. Except my incredible design skills were lost in the last hurricane so you get to deal with my not-so-incredible design skills instead.

In the first demo, I decided to get fancy and build gradients that represented support. I focused on the current version of the major browsers only. Here's an example that shows three particular CSS features. Notice that the bottom is red in IE and Opera showing that support for the flexible box layout module is missing:

Here's another example with 8 features selected:

You get the idea. Want to test it yourself? Check it out here:

Note that I tested this in Firefox and Chrome. Your results may vary in other browsers.

So after showing this to Brian Rinaldi, he made a simple suggestion. Instead of a gradient of colors, why not simply show the worst case scenario? I.e., given N features, if support for one is lacking, then show red to indicate that you can't use all these features together. I tweaked the code a bit and created this simpler version that does just that:

Play with it and enjoy seeing how fast you can make IE turn red.

Anyway - view source - check out the code - and let me know what you think. The code isn't optimized nor is it very pretty. But it was fun to play with the data.

Related Blog Entries


  • Commented on 09-05-2012 at 8:32 AM
    Adding the following CSS makes it a bit more usable by making the gradient boxes and list of selected features fixed-position so you can still see them when scrolling through the list:

    #browserTable { position: fixed; left: 310px; }
    #selectedFeaturesList { position: fixed; left: 310px; top: 220px }

    Neat tool though. Thanks!
  • Commented on 09-05-2012 at 8:45 AM
    Nice changes - I pushed them up.
  • Commented on 09-05-2012 at 10:46 AM
    Maybe a legend to explain the colors, and a hover attribute for those who are color blind?
  • Brian #
    Commented on 09-05-2012 at 11:00 AM
    The irony of you graphically representing charts while ranting about Canvas support is delicious. Probably tastes better with a warm Triple Bock, but I digress.
  • Commented on 09-05-2012 at 12:44 PM
    @PS: Oh yeah - that would be very smart. I'll add it. Not sure about hover support though. On the gradient demo I don't know how possible it would. Hmm - wait. Actually - I just need to use the TITLE attribute of the div. If that works. Will test.

    @Brian: Heh, well, I didn't use Canvas, did I? ;) Don't get me wrong - I'm happy Canvas was added to browsers. But - I find it incredible that it was added BEFORE the new form stuff. I can count - on one hand - the number of times I would have used Canvas over the past 15 years or so. On the flip side, I use forms pretty much every day. I'd be willing to bet most folks will find the form updates a lot more useful than Canvas.
  • Commented on 09-05-2012 at 1:26 PM
    @PS: Added TITLE support to both demos. Seems more useful on the gradient one.
  • Commented on 09-06-2012 at 3:30 AM
    Cool demo Ray. This could really take off, if doesn't add it first.

    One little thing, if you put the [x] to the left of the css features, then it's easier to roll the mouse down and delete them.

    Not that important, just makes it a little easier to clear the list.
  • Commented on 09-06-2012 at 10:27 AM
    Excellent idea - and since I'm using Handlebars - it was trivial to do. Done on both. Thanks!
  • Commented on 12-18-2012 at 3:40 PM
    Hey, that someone was me!

    This looks great! Love the idea to use gradients. Would still like to see the minimum versions though.
  • Commented on 12-18-2012 at 6:20 PM
    Glad you like it Zach!

    So, you would like to see it report the minimum across all the selected features?
  • Commented on 12-19-2012 at 9:04 AM
    Yeah, I think it'd be useful to see if a feature has IE support starting with 8 or 9 (for example).
  • Commented on 12-19-2012 at 9:08 AM
    Shouldn't be difficult. I'll put it in my queue.
  • Commented on 12-20-2012 at 8:35 PM
    Zach, all, please try this demo:

    If it seems to be working well, I'll blog it tomorrow.

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty