Mashups of data

This post is more than 2 years old.

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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by Adam Tuttle posted on 9/5/2012 at 5:32 PM

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!

Comment 2 by Raymond Camden posted on 9/5/2012 at 5:45 PM

Nice changes - I pushed them up.

Comment 3 by Phillip Senn posted on 9/5/2012 at 7:46 PM

Maybe a legend to explain the colors, and a hover attribute for those who are color blind?

Comment 4 by Brian posted on 9/5/2012 at 8:00 PM

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.

Comment 5 by Raymond Camden posted on 9/5/2012 at 9: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.

Comment 6 by Raymond Camden posted on 9/5/2012 at 10:26 PM

@PS: Added TITLE support to both demos. Seems more useful on the gradient one.

Comment 7 by Pete posted on 9/6/2012 at 12:30 PM

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.

Comment 8 by Raymond Camden posted on 9/6/2012 at 7:27 PM

Excellent idea - and since I'm using Handlebars - it was trivial to do. Done on both. Thanks!

Comment 9 by Zach Leatherman posted on 12/19/2012 at 2:40 AM

Hey, that someone was me!

This looks great! Love the idea to use gradients. Would still like to see the minimum versions though.

Comment 10 by Raymond Camden posted on 12/19/2012 at 5:20 AM

Glad you like it Zach!

So, you would like to see it report the minimum across all the selected features?

Comment 11 by Zach Leatherman posted on 12/19/2012 at 8:04 PM

Yeah, I think it'd be useful to see if a feature has IE support starting with 8 or 9 (for example).

Comment 12 by Raymond Camden posted on 12/19/2012 at 8:08 PM

Shouldn't be difficult. I'll put it in my queue.

Comment 13 by Raymond Camden posted on 12/21/2012 at 7:35 AM

Zach, all, please try this demo:

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