Everything about Web and Network Monitoring
Everything about Web and Network Monitoring
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.
The first step to cross browser HTML5 compatibility is to know which elements, properties and features that you plan to use and which browsers you need to support. Once you know these two things you can address each inconsistency either by providing a JavaScript based fallback or graceful degrading.
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.
Modernizr is a great tool for detecting browser support and handling compatibility issues. It’s an open-source JavaScript library that you can include in your projects, detailed installation instructions can be found here. By default Modernizr provides support for HTML5 sectioning elements (article, aside, footer, etc.) in Internet Explorer. For other HTML5/CSS3 features Modernizr only provides support detection, to enable support for these features you need polyfills.
A polyfill is a JavaScript shim that replicates the standard API for older browsers, with the proper polyfills in place you can deploy HTML5 code that works in unsupported browsers. There is a plethora of polyfills available adding support for most new HTML5 features, here’s a list of several popular polyfills.
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.
