There is a new HTML5 tool, and her name is HTML5 Please. And she gives you the power to “use the new and shiny responsibly.” Touted in recent articles in eWeek’s application development section, and on Web Monkey, HTML5 Please helps you choose which parts of HTML5 and CSS3 you can use and gives advice for developers in making decisions about the new hypertext language to incorporate into your implementations.

Figure A

HTML5 Please is a community of developers, and if you wish to contribute to the cause, the project is on Github. It is the brainchild of several folks including Divya Manian who provides an informative back story about how it all got started and was over a year in the making. She also shares this slide show, which highlights an active web development timeline, showing where we are today. The list of contributors also includes Paul Irish, Tim Branyen, Connor Montgomery, Jake Verbaten and more. The list includes folks from HTML5 Boilerplate, Modernizr, and CSS3 Please.

The website When Can I Use provides you with compatibility tables for browser support of HTML5, CSS3, SVG, and more for desktop and mobile browsers; Modernizr furnishes you the power of feature detection; and now, HTML5 Please helps you out with recommendations for HTML5 cross-browser polyfills and implementations to help you choose which features to use and how best to implement each of them.

The Search and Explore features of HTML5 Please allows filtering depending on three main designations:

  • those that can be used now with fallback and Polyfills recommendations
  • those to use with caution
  • those features to avoid altogether

Use Explore Features by filtering for Internet Explorer support, including IE10+, IE9+, IE8+, IE7+, and no IE. You can also search for features that are not supported by mobile devices, and older mobile browsers. Other search filters include those requiring prefixes, polyfill, and fallback. Sort by features include “css”, “html”, “API”, and “js”, or just view “all” the features to show all.

Each HTML5 feature listing provides the suggested use status, a brief description, and links to When I can Use to view browser share percentages for that particular element/feature, as shown in Figure B.

Figure B

For example, when you select the “+” to expand the CSS3 feature for background-image options, you get a short description of its use along with implementation tips; then, at the bottom right, you can click on the View browser share % link and it takes you to the When Can I Use section for the CSS3 Background-image options. It offers a detailed view of the new properties that affect background images, including background-clip, background-origin, and background-size. Figure C shows the default compatibility tables.

Figure C

You can see that the candidate recommendation for the CSS3 Background-image options currently has a support level of 64.08% with 4.39% partial support, and for a total support of 68.46% across major desktop and mobile browsers. You also get to view the level of supported browsers including up to 12 versions back for each when you expand the Show All Versions selection. Resources are also available for further study on the specific feature, in this case, example detailed compatibility tables and demos and an information page are provided.

There is also a Browser comparison button where you can select two browsers to compare. A new table is generated, for example, Firefox 12.0 and Chrome 16.0 result in the partial table displayed in Figure D. This tool is quite useful, especially in cases where your customer might be limited to one or two browsers.

Figure D

HTML5 Please is a great new resource to add to your tool kit when looking for HTML5 coding advice.