Detecting HTML5 Features with JavaScript
Problem
You want to implement HTML5 features when they’re supported by the browser, but degrade to another solution when they’re not.Solution
HTML5 comes with great cutting-edge technologies that, as a designer, you may be eager to take advantage of.
Unfortunately, HTML5 currently comes with limited browser support. You may like to implement some of these new technologies, but you also want to accommodate browsers that don’t yet support them.
Modernizr (see http://modernizr.com) is a JavaScript library that makes it very easy to do just that: it detects the availability of various HTML5 and CSS3 features within a user’s browser, and allows you to create fallbacks when a desired feature isn’t currently supported (see Below Figure).
You want to implement HTML5 features when they’re supported by the browser, but degrade to another solution when they’re not.Solution
HTML5 comes with great cutting-edge technologies that, as a designer, you may be eager to take advantage of.
Unfortunately, HTML5 currently comes with limited browser support. You may like to implement some of these new technologies, but you also want to accommodate browsers that don’t yet support them.
Modernizr (see http://modernizr.com) is a JavaScript library that makes it very easy to do just that: it detects the availability of various HTML5 and CSS3 features within a user’s browser, and allows you to create fallbacks when a desired feature isn’t currently supported (see Below Figure).
Using Modernizr
To see how Modernizr works, let’s run through an example using the JavaScript library where we create an audio player using HTML5’s audio tag. If the user is viewing the page with a browser that doesn’t support the audio element, we want to display an error message alerting the user of the problem.
Here is our basic HTML code for our player:
<img src="vscover.jpg" alt="Veil & Subdue: Courtship of the Black Sultan"/>
<div id="caption">
<div id="audio">
<audio>
<source src="turnthepage.ogg">
<source src="turnthepage.mp3" />
</audio>
<p><input type=button onclick="playPause()" value=" " tabindex="0" /> “Turn the Page” </div>
</div><!--end caption-->We’ve included an image of the album cover art, and our audio element along with customized controls.
First, download the Modernizr JavaScript library from http://modernizr.com. Include reference to this file within the <head> of your HTML document:
<script src="js/modernizr-1.6.min.js"></script>
Once this script runs, it detects whether or not the browser supports the audio element, and then it:
1. Assigns a value (true or false) to the JavaScript property Modernizr.audio, and
2. Adds a class to the HTML tag. If the browser supports the audio element, it will add a class called “audio.” If the browser doesn't support the audio element, it will add a class called “no-audio.”
Now you can write a script specifying what to do if the Modernizr.audio property is true or false, and code your CSS specifying styles for elements when the audio element is supported and when it isn't.
So, let’s write a small script (we can put this in the head of our document) that only runs when the audio element is supported:
<script>
if (Modernizr.audio) {
function playPause() {
var myAudio = document.getElementsByTagName('audio')[0];
if(myAudio.paused)
myAudio.play();
else
myAudio.pause();
}
}
</script>
To see how Modernizr works, let’s run through an example using the JavaScript library where we create an audio player using HTML5’s audio tag. If the user is viewing the page with a browser that doesn’t support the audio element, we want to display an error message alerting the user of the problem.
Here is our basic HTML code for our player:
<img src="vscover.jpg" alt="Veil & Subdue: Courtship of the Black Sultan"/>
<div id="caption">
<div id="audio">
<audio>
<source src="turnthepage.ogg">
<source src="turnthepage.mp3" />
</audio>
<p><input type=button onclick="playPause()" value=" " tabindex="0" /> “Turn the Page” </div>
</div><!--end caption-->We’ve included an image of the album cover art, and our audio element along with customized controls.
First, download the Modernizr JavaScript library from http://modernizr.com. Include reference to this file within the <head> of your HTML document:
<script src="js/modernizr-1.6.min.js"></script>
Once this script runs, it detects whether or not the browser supports the audio element, and then it:
1. Assigns a value (true or false) to the JavaScript property Modernizr.audio, and
2. Adds a class to the HTML tag. If the browser supports the audio element, it will add a class called “audio.” If the browser doesn't support the audio element, it will add a class called “no-audio.”
Now you can write a script specifying what to do if the Modernizr.audio property is true or false, and code your CSS specifying styles for elements when the audio element is supported and when it isn't.
So, let’s write a small script (we can put this in the head of our document) that only runs when the audio element is supported:
<script>
if (Modernizr.audio) {
function playPause() {
var myAudio = document.getElementsByTagName('audio')[0];
if(myAudio.paused)
myAudio.play();
else
myAudio.pause();
}
}
</script>
This script adds functionality to the custom controls we added to the page. This script will only activate if the Modernizr.audio value is true (and thus won't waste browser resources in the instance that it doesn't support the audio element).
Next, it would be nice if we could get rid of the customized controls altogether when the browser doesn’t support the audio element. This is easy to do with Modernizr, as we can take advantage of the class it added to the HTML tag:
.no-audio #audio {
display: none;
}
.audio #audio input[type="button"] {
width: 45px;
height: 29px;
background: url(button.png);
border: 0px solid #000;
float: left;
margin-right: 10px;
}
Next, it would be nice if we could get rid of the customized controls altogether when the browser doesn’t support the audio element. This is easy to do with Modernizr, as we can take advantage of the class it added to the HTML tag:
.no-audio #audio {
display: none;
}
.audio #audio input[type="button"] {
width: 45px;
height: 29px;
background: url(button.png);
border: 0px solid #000;
float: left;
margin-right: 10px;
}
When the audio element isn't supported, Modernizr adds a “no-audio” class to the header element. So, we can select for this class in our CSS, and set the display value for “none” for any element we want to disappear.
Here, it would be the div we labeled “audio,” which encloses the controls.
When the audio element is supported, however, it adds the “audio” class to the header element, instead.
So, we can select for this class, too, and style our control button as we please.
The next step is to set up a an error message when the audio element isn't supported.
First, we need to add the HTML for this error box to our HTML and then place a notice underneath the “audio” div:
<div id="error">
<p>“Turn the Page” / <em>Veil & Subdue</em> / Paul Ramey</p>
<div id="error-box">
<p>Too bad! This browser does not support the audio features on this page. Might I suggest installing </div>
</div>
Here, it would be the div we labeled “audio,” which encloses the controls.
When the audio element is supported, however, it adds the “audio” class to the header element, instead.
So, we can select for this class, too, and style our control button as we please.
The next step is to set up a an error message when the audio element isn't supported.
First, we need to add the HTML for this error box to our HTML and then place a notice underneath the “audio” div:
<div id="error">
<p>“Turn the Page” / <em>Veil & Subdue</em> / Paul Ramey</p>
<div id="error-box">
<p>Too bad! This browser does not support the audio features on this page. Might I suggest installing </div>
</div>
Using the same basic technique as above, we can hide this div when the element is supported, and style it appropriately when audio is not supported:
.audio #error {
display: none;
}
.no-audio #error-box {
background-color: #ffffcc;
padding: 1px 10px;
color: #000;
border: 5px solid #ffff66;
}
.no-audio #error-box a {
color: #333;
}
.audio #error {
display: none;
}
.no-audio #error-box {
background-color: #ffffcc;
padding: 1px 10px;
color: #000;
border: 5px solid #ffff66;
}
.no-audio #error-box a {
color: #333;
}
Figure1 shows the audio element supported by the browser, while Figure2 shows the result from a browser that does not support the audio element.
Currently Modernizr checks for over twenty HTML5 and CSS3 features and also includes the shim technique covered in the previous section.
Each checked feature comes with its own specific CSS classes and JavaScript property.
Check out Modernizr's documentation at http://modernizr.com/docs/, which includes sample code for each feature that it supports.
Figure1 The audio controls appear in the browser that supports the audio element.
Currently Modernizr checks for over twenty HTML5 and CSS3 features and also includes the shim technique covered in the previous section.
Each checked feature comes with its own specific CSS classes and JavaScript property.
Check out Modernizr's documentation at http://modernizr.com/docs/, which includes sample code for each feature that it supports.
Figure1 The audio controls appear in the browser that supports the audio element.
Figure2. How the page looks when the audio element is not supported.
Discussion
Modernizr isn’t the only tool available to assess and work around this issue: Traditionally, “UA-sniffing” or “browser-sniffing” was used to determine which browser a user was running. Then, the designer could implement browser-specific code to customize the page.
This method, however, is unreliable in a number of ways. First of all, a browser can fake a UA string, which is the value that the browser-sniffing technique looks at to determine the browser.
Additionally, users can switch off certain features of their browsers, so that even if you can determine the correct browser, you still can't be sure which features are supported.
Also, if the user is running a new browser, a newer version of a browser, or an alternative browser that you may not have bothered to check for, your code may fail to recognize it altogether. Not to mention that it falls on your shoulders to be on top of what browsers support which features.
Modernizr avoids these pitfalls, as it detects, specifically, which features are supported, rather than merely trying to detect what browser the user is viewing the page through.
This is a far more reliable method if you want fine-tuned control over the user’s experience of your web site.
This method, however, is unreliable in a number of ways. First of all, a browser can fake a UA string, which is the value that the browser-sniffing technique looks at to determine the browser.
Additionally, users can switch off certain features of their browsers, so that even if you can determine the correct browser, you still can't be sure which features are supported.
Also, if the user is running a new browser, a newer version of a browser, or an alternative browser that you may not have bothered to check for, your code may fail to recognize it altogether. Not to mention that it falls on your shoulders to be on top of what browsers support which features.
Modernizr avoids these pitfalls, as it detects, specifically, which features are supported, rather than merely trying to detect what browser the user is viewing the page through.
This is a far more reliable method if you want fine-tuned control over the user’s experience of your web site.
No comments:
Post a Comment