HTML and CSS Reference
In-Depth Information
Rather than create a function to detect all the HTML5 features, why not use a JavaScript library
written expressly for that purpose, especially when it's free? Modernizr is just such an open source
cally requested property or tag is available or not, it inserts a CSS class in the
<html>
tag. This strat-
egy makes it easy to set up CSS rules that do one thing if the property is available and another if it
is not. Best of all, setup is very straightforward. All you have to do is add a link to the Modernizr
JavaScript file and a class of
.no-js
to the
<html>
tag, like this:
<html class=”.no-js”>
<head>
<script src=”scripts/modernizr-1.5.js” type=”text/javascript”></script>
</head>
Modernizr is a very powerful, yet compact library used by a veritable Who's Who of major websites
including Twitter, NFL, The State of Texas, and more.
Try iT
In this Try It you learn how to detect if HTML5 functionality is available in the user's browser.
Lesson requirements
You will need the
tpa_geo.html
file from the Lesson_26 folder, as well as a text editor and a web
browser.
You can download the code and resources for this lesson from the topic's web
step-by-step
1.
Open your text editor.
2.
From the Lesson_26 folder, open
tpa_geo.html
.
3.
Put your cursor after the
<h2 id=”geolocation”>
tag and press Enter (Return).
4.
Enter the following code:
<script type=”text/javascript”>
if (navigator.geolocation) {
document.write(“I see you're still on Earth. Enter EARTHFREE to blast
off for 50% less!”);
} else {
document.write(“Your location could not be determined. No coupon
available.”);
}
</script>
