HTML5 and its companion CSS3 introduce all sorts of awesome new features for animations, graphics, multi-media, interactive elements, web storage and more. Although HTML5 has been in use for several years and is gaining popularity, it remains a W3 Candidate Recommendation and not yet an official standard. While much progress has been made, still not all HTML5 functionality is supported in all browsers. Fortunately there are tools that detect and deal with HTML5 browser inconsistencies, and in this article we’ll be using some of them to create a process of tuning for HTML5 cross browser compatibility.
You can find a full list of HTML5 tags at W3schools.com HTML5 reference it also shows which browsers support which tags. Caniuse.com features more detailed compatibility tables for HTML5 tags and features as well as other languages.
While polyfills are a great way to add html5 features for browsers that ordinarily don’t support them, using too many will greatly impact load times, so it’s important to balance the need for feature support for legacy browsers with the need for fast load times. Some features are nice to have on browsers that support them, but are not critical to the User Experience, since the vast majority of users will view your site from only one browser, they won’t notice if you omit some elements that are supported on modern browsers.
When you plan to exclude certain features on certain browsers, it is important to practice graceful degradation. Graceful degradation means addressing compatibility issues so that when the browser encounters an unsupported element or property it knows to disregard it, possibly adding a message that this content isn’t supported on the user’s browser. Without graceful degradation browsers would crash trying to process unsupported code.
So let’s recap this simple process for HTML5 cross browser compatibility. First analyze your situation, find out which HTML5 features you intend to use and which browsers you need to support. The next step is to incorporate Modernizr in your project, which adds support for HTML5 sectioning tags in older versions of IE, and efficiently detects browser support for other HTML5 features. You can use Modernizr.load to serve polyfills where HTML5 isn’t supported. Finally, determine which HTML5 features must be supported and add polyfills for those, and gracefully degrading for features that won’t be supported in all browsers.
Editor’s Note: By the time this article was published, a new cool tool has been launched by Microsoft. It allows developers to check if their website is compatible with various versions of Internet Explorer and get recommendations on how to make your website compatible.