You want to implement HTML5 features when they’re supported by the browser, but
degrade to another solution when they’re not.
Solution

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.

<img src=”vscover.jpg” alt=”Veil &amp; 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″ /> &ldquo;Turn the Page&rdquo; </div>
</div>

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>

<script>
if (Modernizr.audio) {
function playPause() {
var myAudio = document.getElementsByTagName(‘audio’)[0];
if(myAudio.paused)
myAudio.play();
else
myAudio.pause();
}
}
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.

</script>

Advertisements