— Tech+Life+Music

Learning from the HTML5 Boilerplate, Part 1

The HTML5 Boilerplate is well-known across web programmers as a powerful starting template for (as the project homepage puts it) building fast, robust, future-proof sites. Out of the box, it provides HTML, CSS and Javascript code arranged in such a way to drive as much oomph into your pages as possible. Every nook, cranny, and design decision borrows from widely-accepted standards, and is supported by countless hours of research and testing.

While the HTML5 Boilerplate is awesome as a starting foundation for building awesome sites, it is also packed with code snippets and patterns you should be using for your projects. Just in case you’re not using the HTML5 Boilerplate for some reason.

Making browsers behave the same way

Browsers are not made equal. And this makes our work that much harder.

Different browsers (and browser versions) all behave differently, and so it is not uncommon to see code like this:

<link href="style.css" rel="stylesheet" />
<!--[if lte IE7]><link href="style.ie7.css" rel="stylesheet" /><![endif]-->

Conditional comments such as these are meant to load different asset files into the HTML document, depending on whether or not a specific version of Internet Explorer (or even just Internet Explorer) is used. (Yes, IE is that notorious.) It’s meant to introduce additional assets that enforce additional rules that make sure that misbehaving browser quirks render as consistently as possible.

Alternatively, one can also make use of CSS hacks.

#content { margin: 10px; _margin:20px; }

CSS hacks don’t validate, and rely on browser bugs. Good luck to you when those bugs get patched.

Conditional comments, on the other hand, also present a few disadvantages:

  1. They introduce additional (arguably unnecessary) HTTP requests.
  2. They have to be located in the <head>, which means that they can block loading and rendering.
  3. Just imagine the added complexity of working with multiple stylesheets.
  4. Conditional comments can significantly slow your page down due to a browser bug in Internet Explorer 8.

Conditional HTML tags

To address these, the HTML5 Boilerplate uses the following markup instead:

<!--[if lt IE 7 ]> <html class="ie6 no-js oldie"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7 no-js oldie"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8 no-js oldie"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9 no-js"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js"> <!--<![endif]-->

The HTML5 Boilerplate uses conditional comments to dynamically assign classes to the <html> tag. However, since none of these comments are used to load asset files into the page, the previously mentioned browser bug does not occur.

With this markup, your <html> tag dynamically gets assigned a corresponding iex class that you can target in your CSS in a valid manner:

#content { margin:10px; }
.ie7 #content { margin:20px; }

This promotes the use of a single stylesheet for your page, and (hopefully) keeps related style rules together for easier maintainability. This markup still does not validate, but what’s arguably more important is that your page renders correctly in any browser nonetheless.

If you’re wondering what the no-js class is, it is used by Modernizr, a Javascript library that helps you build future-proof pages by allowing you to detect a browser’s capabilities, and react accordingly. When it loads, it changes the no-js class to js, letting you know if Javascript is enabled in a client’s browser.

Modernizr is included with HTML5 Boilerplate out of the box. We’ll discuss using it effectively in a future post.

You might want to read the other articles in this series as well:

Feel free to start a discussion.
Submit comment