HTML5 Boilerplate: A Rock-Solid Default for HTML5 Awesome
HTML5 Boilerplate was developed by Paul Irish and Divya Manian. This project took almost three years to be completed having first been announced on August 10th, 2010.
It’s essentially a good starting template of html and css and a folder structure that works. [...] And if you think there’s too much? Delete key that badboy.
- Paul Irish
HTML5 Boilerplate is a starting off point for front-end development professionals. Its main purpose is to help fix annoying compatibilities issues, mainly with the web developer’s worst nightmare: Internet Explorer.
This starting template provides the developer with a huge variety of tools. Let’s take a closer look at some of them:
- Faster page load hack
<!--[if IE]><![endif]-->
- Conditional body tag to target different IE browsers
<!--[if lt IE 7 ]> <body> <![endif]--> <!--[if IE 7 ]> <body> <![endif]--> <!--[if IE 8 ]> <body> <![endif]--> <!--[if IE 9 ]> <body> <![endif<]--> <!--[if (gt IE 9)|!(IE)]><!--> <!--<![endif]-->
- jQuery fallback: almost every website uses the jQuery library today, and more specifically Google’s hosted version. Using Google’s hosted version allows the user to not load the library at all, since it is most likely already in the cache. Thanks to HTML5 Boilerplate, if there is an issue with Google’s servers and you cannot load the library, a fallback allows you to load it locally.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
- CSS fixes: HTML5 reset, font normalisation, aligning labels, print styles and many more.
- .htaccess snippets
- And one of my favorites… Modernizr is included! Modernizr (“front-end development done right”) is an open-source JavaScript library that helps with cross-browser and cross-device compatibility issues. This library detects features available on the device that the user is currently on, allowing the developer to support different levels of experiences.
Example:
/* Simulated box shadow using borders: */ .box { border-bottom: 1px solid #666; border-right: 1px solid #777; } .boxshadow div.box { border: none; -webkit-box-shadow: #666 1px 1px 1px; -moz-box-shadow: #666 1px 1px 1px; box-shadow: #666 1px 1px 1px; }
If the .boxshadow class exists, then the browser supports the box-shadow property, which is used. Otherwise, a box shadow is simulated using borders.
Modernizr is a powerful tool, and one can see that, by putting it by default in HTML5 Boilerplate, the team insisted on giving the front-end developers good development habits.
HTML5 Boilerplate can help front-end developers resolve one of the main issues in web development: cross-browser and cross-device compatibility. Since today people are accessing the web from a wide variety of different devices, it is difficult to have a uniformly perfect experience on each one of them. It is even more difficult for the front-end developer to insure the same product quality on every device. This template might not resolve all issues, but it helps developers avoid the most common of them.
As stated on HTML5 Boilerplate official website, “the HTML5 Boilerplate is delete-key friendly.” This means that the template is not supposed to be fully used unless necessary. It is not a good idea to use HTML5 Boilerplate if you are not a trained front-end developer and are fully aware of the issues that it might generate. You should always be careful when it comes to using code that is not your own. Before using this template, take the time to look into the details and be sure to fully understand them, otherwise you might have a tough time trying to resolve unknown issues.
Technology