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: https://github.com/fyrd/caniuse

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:

http://www.raymondcamden.com/demos/2012/sep/4/caniusedemo/test1.html

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:

http://www.raymondcamden.com/demos/2012/sep/4/caniusedemo/test2.html

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.