Twitter: raymondcamden


Address: Lafayette, LA, USA

For your post-Christmas hangover, another CanIUse Mashup

12-26-2012 4,302 views HTML5 18 Comments

This will be short and quick as I've got to hit level 24 on Guild Wars 2. A while back I posted a few demos that made use of CanIUse.com data. These demos were kinda nice I think, although not the most prettiest examples of what you could do with CSS. Based on a suggestion from one of the commenters I created something a bit simpler and more direct.

Based on selecting a set of features, this new demo will tell you the minimum version of each major browser required to support those features.

So for example, if form field validation requires IE10 and canvas requires IE9 (I'm not going to rant about this again I'm not going to rant about this again) then the minimum version of IE you can use for both those features is IE10.

Here's a screenshot of this in action. As a reminder, CanIUse.com supports multiple browsers. The ones you see here were simply my list of what I thought was critical enough to include in the UI.

Ok, check it out, and let me know what you think.

Edit: Based on a recommendation by Jesse Freeman, I finally got around to adding 'bookmarkability' to the demo. Check this version: http://raymondcamden.com/demos/2012/dec/20/test4.html. As you select options, the URL will change. You can then bookmark and load up that version, or share the URL with others.

Edit 2: After a bug was found in test3.html, I fixed it in test4.html and modified all my links above to just use that version.

Related Blog Entries

18 Comments

These comments will soon be imported into Disqus. To add a comment, use Disqus above.
  • Commented on 12-26-2012 at 10:19 AM
    Really cool feature Ray. Better than having to sit there with a notepad and have to write all the features down one by one and cross reference manually.

    ---
    OT: Unfortunately I'm not a big fan of caniuse.com since I often find their data lacking on browsers older than a couple years old (I sometimes have clients that have older browsers with no option to upgrade any time soon).
  • Commented on 12-26-2012 at 10:26 AM
    Have you tried the settings? I didn't even realize they had settings until recently. It lets you tweak how far back to look.
  • Commented on 12-26-2012 at 10:39 AM
    I did not. Really cool.

    I still see the data is wrong though on pages like @font-face where it says FF started supporting it in 3.5. But At least they list their sources. Wikipedia also has it incorrectly marked as 3.5 - where they likely got their information.

    I've used font-face for many years now. Funnily enough IE practically invented it when they supported it in IE4 - years before other browsers considered it (granted, it was actually a CSS2 spec first, but it was a rare moment in IE history when they supported a CSS2 spec before anyone else). And FF of all browsers was actually the "last" browser to support @font-face starting in 3.6. Yeah, I know... useless knowledge :)
  • Commented on 12-26-2012 at 10:41 AM
    BTW, try "test4.html" (same dir) - supports bookmarking. (Waiting for someone to confirm it really works before I edit the post to mention it.)
  • Commented on 12-26-2012 at 10:49 AM
    Works for me (good idea).

    btw, those settings on their site are really cool. I keep playing with them now. Thanks for that tip :)
  • Randy Edmunds #
    Commented on 12-26-2012 at 6:56 PM
    Very cool!

    How about a feature that scans my HTML/JS/CSS to determine which of those features I'm using? :) Who can remember all those details?
  • Commented on 12-27-2012 at 11:33 AM
    Heh, I kinda thought about that. In theory I think you could do some of this, like for example, it would be trivial to look for the canvas tag. In theory you could look for certain CSS keywords too. But it just feels like something that would be incomplete and 'fuzzy' to the point of not using. (imo ;)
  • Randy Edmunds #
    Commented on 12-29-2012 at 8:23 PM
    Yes, it's definitely too much for 1 person to take on, but maybe it could be crowd-sourced!
  • Commented on 12-31-2012 at 12:37 PM
    Hmm. In theory, you write a list of strings and the minimum level browser required browser. So something like this (and these aren't real #s)

    canvas={ie:8, firefox:5}

    and a list of CSS things

    transform={ie:10, etc}

    Based on this, you scan for each keyword, and as you find matches, begin generating a minimum browser version required. So using the above examples, if I had both a canvas tag and a trasform item, the minimum version of IE would be 10.

    In theory - you write the code and then the 'slow' part is the data file, which others could help with.

    Hmm.... I'm tempted to start a Brackets extension for this. It could even provide a report of why IE10 was required. ("Oh, I use a CSS transform - if I remove that I get more coverage...")
  • Commented on 01-03-2013 at 9:57 AM
    Either I've missed the point of this, or it's not working quite right.

    If I pick "Canvas", the minimum is IE9.
    If I add JSON parsing, it drops to IE8.

    But if I use IE8, canvas wont work!

    That's not right is it? I'm using Chrome 23
  • Commented on 01-03-2013 at 10:12 AM
    Damn - you found a bug alright. I'll try to fix it asap.
  • Commented on 01-03-2013 at 10:24 AM
    Ok, I think I got it now. I've updated the demo link to use the nicer test4.html version.
  • Commented on 01-03-2013 at 11:46 AM
    Getting the same again, with CSS Gradients needing 10, then add Canvas and it drops to 9, Using an iPad 2.

    Sorry, it's a great tool though! Do you think you'll keep adding to it?
  • Commented on 01-03-2013 at 11:57 AM
    To be clear, are you hitting test4.html?
  • Commented on 01-03-2013 at 12:02 PM
    Yes, sorry, I'm not trying to be awkward. It's a cool tool, happy to help if the code's on Github?

    http://skeater.co.uk/samples/mashup.png
  • Commented on 01-03-2013 at 12:51 PM
    Ugh, this is so frustrating. This should be simple math. I'll check it again.
  • Commented on 01-03-2013 at 12:59 PM
    oh man - got it (not uploaded) - something small and stupid - will post after my meeting.
  • Commented on 01-03-2013 at 2:21 PM
    So it should be fixed now. Issue was a stupid string to # comparison issue. I wrapped the data with Number() and it worked. This has bitten me a few times lately - I need to blog it.