haz.io – what does my browser support?
Quite often I find myself looking at a browser I’m not 100% familiar with and wondering which of the fancy new HTML5 oder CSS3 features does it support. Does IE9 support SVG – or do I need to use a polyfill? Can I use the Geolocation API in Opera?
Until recently what I did was simply go to the Modernizr website because on the frontpage they had this table of features they are able to detect with their awesome library, and next to each a green checkmark if the browser you were using supports this feature.
Well, with the relase of Modernizr 2 came a new website and sadly the feature table disappeared completely. I don’t know why they did that or if it will ever come back.
Update 1: Read this tweet from the Modernizr team.
Last week I installed Seas0nPass on my AppleTV2. And with it comes a Webkit-based browser app. Me being the curious fellow I wanted to know how decent the support for the recent browser technologies is in that app in order to get an idea what I could do with that device.
That’s when I decided to put together a small website I could go to from any browser on any device, and that would tell me what this browser is capable of. The result of about two hours of hackery is this: haz.io.
It’s very simple. I have a JSON file with a list of features that should be tested for. I’m looping through that with jQuery and building the HTML from it. Each item representing one feature gets a class attribute with the feature name. Utilizing the fact that Modernizr adds the same class names to the <html> element and using some nice Sass trickery I’m able to put either a green «Yep» or a red «Nope» next to each item.
I also threw in a bit of responsiveness in there in order to make the feature tables look nice on mobile devices.
Update 2: I added support for Jdrop because I wanted to be able to save the data from a mobile device and review it on my computer. But unfortunately Steve Souders has not yet picked it up so for now you’ll get an error message when you press the «Jdrop» button at the bottom of the page.
Update 3: I recently removed Jdrop support again because I was unable to find the time to implement it properly. And maybe it wasn’t such a good idea to begin with. Thanks, Steve, for your support anyways.
What do you think about haz.io? Let me know in the comments.
The source is on GitHub.