An HTML5 Adoption Strategy for Multiple Browsers

Introduction

Many web designers use browser detection techniques to ensure that their sites display properly when viewed with specific browsers. Some browser detection techniques encounter problems when sites are viewed with later versions of the browser. Now, we will create a page with some of the new tags like <header> and <article>, add some new CSS features like border-radius and box-shadow, and even add a <canvas> element to draw an HTML5 logo on your page.

Let's look at fixing the issues that arise when viewing my HTML5 page, depicted in Figure 1, in Internet Explorer 8 instead of Internet Explorer 9.

In newer browsers like Internet Explorer 9, Firefox 4 and later, or Google Chrome you will see the following Figure1.

Figure1

But if we try to load this page in Internet Explorer 8 or earlier, you'll see something more like Figure 2.

Figure2

HTML

<html lang="en">
<head>
<meta charset="utf-8" />
<title> My Name</title>
<style>
body { font-size: 16px; font-family: arial,helvetica,clean,sans-serif; }
header h1 { font-size: 36px; margin-bottom: 25px; }
article
{
background: lightblue;
margin: 20px;
padding: 5px;
width: 350px;
border-radius: 10px;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
article h1 { font-size: 12px; }
</style>
</head>
<body>
<header>
<h1>My best Site</h1>
</header>
<article>
<header>
<h1>Hello</h1>
</header>
<p>Isn't this Good Site?</p>
</article>
<canvas id="canvas" width="250" height="275"></canvas>
</body>
<script src="../js/html5CanvasLogo.js" type="text/javascript"></script>
</html>

you need to know to build Web sites for a broad spectrum of browsers. By the time we're finished, you'll have a solid strategy for adopting HTML5 technologies with confidence and without delay. You'll also have some tools you can use to progressively enhance sites for newer browsers, while gracefully degrading for others.

Here, we will cover.

Feature detection versus user agent (UA) sniffing
Poly filling with JavaScript
Graceful degradation

These three subjects should tell you much about what you need to know to build Web sites for a broad spectrum of browsers.

Feature Detection

HTML 5 is probably the most exciting improvement to come to the web, since the popularization of AJAX. only the most cutting edge browsers support many of the new HTML 5 features. To progressively enhance a site for HTML 5 enabled browsers, developers need a way to detect if the browser supports a desired HTML 5 feature. it was common to determine that information with JavaScript.

< script type = "text/javascript" >
var userAgent = navigator.userAgent;
if (userAgent.indexOf('MSIE') >= 0) {
console.log("Hello, IE user");
} else if (userAgent.indexOf('Firefox') >= 0) {
console.log("Hello, Firefox user");
} else if (userAgent.indexOf('Chrome') >= 0) {
console.log("Hello, Chrome user");
}
<
/script>

This technique, known as UA sniffing, is widely used for determining which browser is requesting your page. The logic is that by knowing the user's browser Internet Explorer 7, for instance, you can make runtime decisions about what features of your site to enable or disable.

Problem With UA sniffing

The problem with this approach is that browsers can be made to lie. The UA string is a user-configurable piece of information that doesn't really provide a 100 percent accurate picture of the browser in question. Many browser vendors added extra content to their own UA strings as a way to trick scripts into drawing incorrect assumptions about which browser was being used, thus routing around detection. Some browsers now even include a facility that allows users to change their UA string with just a few clicks.

Using Modernizr for Feature Detection

Alternatives to UA sniffing is Modernizr-This is called object or feature detection. These terms are mostly interchangeable, but I'll stick to "feature detection".

We can use the excellent Modernizr JavaScript library. Modernizr contains checks for almost all HTML 5 you might want to test for and will make sure the tests are checked against all relevant browsers.

if (Modernizr.eventsource) {
var source = new EventSource('home/events');
source.onmessage = function(e) {
$('<li>').text(e.data).appendTo('#messages');
};
source.addEventListener('ping', function(e) {
$('<li>').text(e.data).appendTo('#messages');
console.log(e.data);
}, false);
} else {
$("<li>This browser doesn't support Server-Sent Events</li>").css('color', 'red').appendTo('#messages');
}

Figure3

Adding a reference to Modernizr in your pages supplies four major features:

A comprehensive list of features supported that's cleverly added to your markup, which enables conditional CSS definitions.
A JavaScript object that aids in script-based feature detection.
All of the new HTML5 tags added to the DOM at run time, for the benefit of Internet Explorer 8 and previous Internet Explorer browsers (more on that in a moment).
A script loader for conditionally loading polyfills into your pages.

Polyfilling

Modernizr, one of the great tools for feature detection, is considered a polyfill. It helps detect browser features and only apply shims to only browsers that lack the features. Without changing code, you are able to apply shims and polyfills as needed.

The name Modernizr might throw you for a second, we'll admit. The library does allow you to use the new HTML5 sectioning elements in IE, but aside from that, it doesn't modernize any other features. The name Modernizr actually stems from the goal of modernizing our development practices (and ourselves). However! Modernizr still pairs extremely well with scripts that do provide support when native browser support is lacking. In general, these scripts are called polyfills.

polyfill (n)- A JavaScript shim that replicates the standard API for older browsers. Standard API refers to a given HTML5 technology or feature, like canvas.

Using Modernizr to Polyfill Canvas Support

Modernizr.load({
test: Modernizr.canvas,
nope: '../js/excanvas.js',
complete: function () {
Modernizr.load('../js/html5CanvasLogo.js');
}
}]);

Here, I'm using the Modernizr script loader to specify three things.

A Boolean expression to test
A path to a script to load if the expression evaluates to false
A callback to run after the check or script loading is complete

In the context of canvas, this is all I need to add some intelligence and polyfilling to my application. Modernizr will asynchronously load excanvas.js only for browsers that don't support canvas, and then will load my script library for drawing the HTML5 logo on the page.

Using Modernizr and PIE to Add CSS3 Support

Modernizr.load({
test: Modernizr.borderradius || Modernizr.boxshadow,
nope: '../js/PIE.js',
callback: function () {
$('article').each(function () {
PIE.attach(this);
});
}
});

Using Polyfills to Aid in Graceful Degradation

Graceful degradation is the practice of building an application for modern browsers while ensuring it remains functional in older browsers. Graceful degradation is one solution. It is the practice of building a web site or application so it provides a good level of user experience in modern browsers. However, it will degrade gracefully for those using older browsers. Since HTML is continually changing and different browsers support different elements, graceful degradation is the key to making sure that pages are readable and accessible in all browsers. When a browser encounters tags it doesn't understand or can't display, degradation takes place. Whether this degradation will cause some of your page content to be lost to the browser, or whether the content of your page can still be accessed fully is dependent on whether the degradation is graceful.

For Example

A simple example is the use of 24-bit alpha-transparent PNGs. Those images can be displayed on modern browsers without problems. IE5.5 and IE6 would show the image, but transparency effects would fail (it can be made to work if necessary). Older browsers that do not support PNG would show alt text or an empty space.

Using Modernizr to Provide Graceful Degradation

Modernizr.load({
test: Modernizr.geolocation,
yep: '../js/fullGeolocation.js',
nope: '../js/geolocationFallback.js'
});