We've covered the principles behind Modernizr and its feature detection. We are also aware of what feature detection actually is and how this library can save you a great deal of time as well as headache. Now we are in a good place where we can start putting these concepts into practice. To do so, we'll set up a bit of code to act as our feature detecting HTML foundation, and then add in Modernizr for our feature detecting to really take action.
In this chapter, we'll be diving a bit deeper into Modernizr by:
- Setting up a code base for feature detection based on HTML5 Boilerplate
- Downloading the Modernizr library
- Discussing blocking versus non blocking
- Creating sectioned frames and animating navigation with jQuery
- Spicing up the fonts using the Google font API
In a new HTML page, we'll start with a clean HTML5 skeleton, or foundation. I'm a huge fan of HTML5 Boilerplate, so I'm going to use a bit of markup borrowed from the index.html file that is included with the download package. I'll be removing a few elements; however, for the sake of staying within scope, I'll also explain the things I am intentionally leaving in. Don't worry about needing the full package for this book. I'll be sure to thoroughly cover every thing we need and you'll have all the code for the lessons here. That being said, I cannot recommend HTML5 Boilerplate highly enough for getting started with HTML5 web pages and it's worth checking out. In fact, some of the Modernizr team is also on the Boilerplate team. HTML5 Boilerplate, which includes Modernizr, is available for download at http://html5boilerplate.com/.
For these exercises, I'm going to use a simplified, scaled down version for the sake of clarity to focus more on Modernizr, and less on the many other goodies it contains, such as loading a Chrome frame plugin for legacy versions of IE.
In a new directory, using a code editor of your choice, create an index.html file and add the following code. I'll explain this as we go as well so don't feel deterred if it feels a bit overwhelming at first.
For my code editor I will be using Sublime Text 2, which is available as a full feature, free trial download at http://www.sublimetext.com/, but of course, use whatever text editor you are most comfortable with. I'll be naming my folder modernizr, and in my folder my new index.html file will contain the following HTML code snippet:
Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
<!doctype html> <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <!-- Force IE to use the latest version of its rendering engine --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Getting Started with Modernizr</title> <meta name="description" content="A Mondernizr test page."> <!-- Modernizr will be included in the head of the page. We'll need it do do some light lifting before the DOM tree renders load feature detection and shimming --> <script src="modernizr-2.5.3.js"></script> </head> <body> <h1>Modernizr is great!</h1> </body> </html>
Now for a quick run-through of what we have so far. In the first line, I am declaring the doctype attribute as html. The doctype attribute, also known as the Document Type Definition (DTD), lets the browser know that the page being rendered is HTML.
Earlier type definitions in the previous version of HTML4 were much more elaborate, as shown in the following code snippet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Thankfully in HTML5, declaring DTD is much simpler.
Now onto the next bit. This isn't using Modernizr just yet, but it is doing something slightly Modernizr-esque, in that, it is adding conditional CSS class selectors to the page. These are referred to as CSS conditional comments. IE has supported these conditional comments since Version 5. We can rest assured they will work until IE 10, which has removed support for them. Where they differ is that it is in a way UA sniffing, which is not ideal. As long as you don't rely on this heavily, you should be okay for now. We'll go ahead and leave it in for illustrative purposes of what we're solving with Modernizr and feature detection.
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
What is going to happen when the browser is loaded in Internet Explorer is that the conditional comments will be parsed and rendered. If for example, a person is using IE8, the HTML element will show up on the page as the following:
<html class="no-js lt-ie9 lt-ie8" lang="en">
You could therefore in theory, control certain aspects of these separate browsers by way of conditional class styles, if you wanted to, which would look something like the following code snippet:
/* A background for ie7 users */
.lt-ie7 body{
background: url( upgrade-already-cmon-seriously.gif );
}
/* Everyone else */
body{
background: url( super-happy-rainbows.png );
}That being said, I wouldn't recommend using conditional comments unless absolutely necessary. I like to view conditional styles the way I view laundry day. I put it off as much as I can until it's absolutely necessary. If you'd like to learn more about conditional comments then pay a visit to the quirks mode website at quirksmode.org/css/condcom.html.
Also, you must be sure to add a no-js CSS class to the HTML element. Modernizr will look for and replace this after it has run along with adding in all the other CSS feature support tags that come from the results of its feature tests. Odds are that the browser will have js, unless your user has JavaScript disabled on his/her browser as he/she surfs your web page from the basement wearing a homemade tin foil hat to keep JavaScript from reading his thoughts. That's just a joke of course, but kidding aside, unlike the justice system, all browsers are assumed, and loaded guilty of being featureless; meaning, support for js is assumed to be missing and Modernizr is the detective on the case to prove otherwise. In the Modernizr world, browsers are guilty of being featureless until proven innocent. The no-js CSS class method isn't something exclusive to Modernizr; you'll see it in a few other places such as the WordPress backend.
<html class="no-js lt-ie9 lt-ie8" lang="en">
The next thing we do is set the newer, much simpler than before HTML5 metacharacter to utf-8 for the character encoding for the HTML document:
<meta charset="utf-8">
Then we set the compatibility mode for Internet Explorer to use the highest compatibility mode available. There's more on that at http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx.
<!-- Force IE to use the latest version of its rendering engine --> <meta http-equiv="X-UA-Compatible" content="IE=edge">
By telling IE to use the latest version of its rendering engine in our page, we're doing our part to eliminate as many IE hiccups as possible.