In 2009 the team here at Deep Blue Sky launched one of the first HTML5 and CSS3 testing websites as a tool to help the web community embrace new technologies.
The site, fmbip.com, has been well received for a couple of years now. More recently however, there's been a plethora of new and similar services spring up to the point where I've found it difficult to keep track of the options we now have available to us as web designers.
We felt it would be helpful if we rounded up a selection of the best and most popular services out there for you to evaluate. The following list is by no means comprehensive but I provides a good overview of the options available today.
Haz.io
Built by Philipp Bosch, haz.io uses the power of Modernzir to give you a quick overview of your browser’s support for recent technologies in the world of HTML, CSS and Javascript. Similar in concept to fmbip.com, the site features a striking green design and is responsive down to mobile for testing on the go!
There are currently some small glitches with edge case mobile device results but in general this site provides a really great overview.
HTML5Please
A community project contributed to by the likes of Paul Irish, html5please.us aims to provide users with a clear and opinionated statement on whether a given HTML5/CSS3 feature is ready to use.
Three statuses are availble to provide you with an instant answer:
- Use (use with polyfill)
- Caution (use with fallback)
- Avoid (not well supported)
Given that it's produced by the people behind HTML5 Boilerplate, Modernizr and CSS3please Please you can be pretty sure that the tests are accurate, reliable and up to date. In short - a great resource.
Mobile HTML5
Unlike many of the other sites in this roundup mobilehtml5.org doesn't aim to provide a detailed breakdown of ever minor test. Instead it details whether a paritcular W3C Standard is supported or not.
As you'd expect from the title, the site focuses exclusively on mobile. Whilst it's still marked as "beta" it's brought to you by Nokia Developer Champion and mobile expert Maximiliano Firtman and so you can be confident it's a worthy resource.
The HTML5 Test
The HTML5 Test website tests your current browsers' support for HTML and CSS3 features and returns a score out of 475. Whilst the score itself is perhaps less useful, it's great to be able to quickly scan a well presented round up of the features support by your current browser.
The site provides test for a wide range of features and creator Niels Leenheer appears to be actively developing the site so expect more tests to be added as and when new features appear.
HTML5 Readiness
One of the more unusual layouts in this list, html5readiness.com provides the vistor with a series of bands representing different HTML5 & CSS3 features. Each band radiates outwards and is split into colours based on which browsers support the given feature.
The intention is to give an immediate visual overview of which features are best support. As a bonus you can also wind back the clock on the chart and see support from 2008 onwards.
When can I use
Perhaps the most widely known site on this list, caniuse.com provides a comprehensives overview of HTML5 and CSS3 features and grades the support of each browser as:
- Supported
- Not supported
- Partially supported
- Support unknown
The tests encompass both older versions of each browser as well as what future versions are expected to implement. In theory this should allow you to make informed choices about whether to include a feature in your site. Combine that with the regular updates and caniuse.com becomes an indispensible part of any developers toolkit.
As a bonus the entire test suite which produces the tests can be found at tests.caniuse.com, which is extremely useful and interesting in and of itself.
Quirksmode.org - compatibility tables
Managed by well known mobile platform strategist, consultant, and trainer Peter-Paul Koch, Quirksmode's compaitibity tables provide a wealth of information about browser compatibility. Tables are provided for CSS2 & 3, various DOM items as well as a smaller (as yet incomplete) set for HTML5.
Perhaps the most useful of these are the CSS tables which go into detail on a variety of features.
http://www.quirksmode.org/compatibility.html
FindMeByIP
Of course we couldn't have made this list without including our very own FindMeByIP.com. Recently relaunched it now features a range of new HTML5 and CSS3 tests and browser support tests all of which have been hand-checked against the other sites on this list.
In the pipeline is a page of Mobile device browser support which should prove extremely useful
I hope this has been a useful round up. If you think I've missed off any great resources please let us know in the comments and we'll be sure to update the list.
Write a comment.