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.
![image1.gif]()
Figure1
But if we try to load this page in
Internet Explorer 8 or earlier, you'll see something more like Figure 2.
![image2.gif]()
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 of
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');
}
![image3.gif]()
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 lacks 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.
or, 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'
});