Before we dive deep into the internals of HTML5 Boilerplate, let us look at some of its features that would help you in your next project. HTML5 Boilerplate is available for download from html5boilerplate.com and is licensed under MIT license for use in any free or commercial product. The source code is available on Github's URL, which is github.com/h5bp/html5-boilerplate/.
HTML5 Boilerplate comes with a set of files that make it easy to do cross-browser development.
The single most significant cause of cross-browser compatibilities is the use of incorrect doctype declarations. By using the HTML5 doctype declaration, you are assured that your browsers will render your site in a standard mode.
Browsers apply their default styles on elements whose properties you do not specify. The trouble is, the kind of styles that each browser applies are different. However,
Normalize.css makes sure that these default styles are consistent across all browsers.
Clearfix has been a popular way of clearing floats. In HTML5 Boilerplate, this has been streamlined to use the micro-clearfix solution, a smaller set of selectors to accomplish the same goal, tested and verified to work on Opera 9 and higher, Safari 4 and higher, IE6 and higher, Firefox 3.5 and higher, and Chrome.
When you set the type of an input element to search, all WebKit browsers like Safari, Chrome, Mobile Safari, and soon, add UI chrome, which is difficult to style. HTML5 Boilerplate comes with a set of styles that normalize the look and feel of the search box across all browsers while also making it easy to style.
The index.html page comes with a set of classes on the HTML element that makes it easy to tweak your styles for IE versions below 9.
Modernizr is a JavaScript library that tests for the existence of HTML5 technologies and outputs a set of classes on the HTML element based on their presence or absence in the browser that is loading your website. For example, if a browser lacks support for border radius, Modernizr outputs the class no-borderradius
, while on browsers that support border radius, it will output the class borderradius
. A custom build of Modernizr is included within Boilerplate.
Note
Learn more about developing with Modernizr from their documentation at http://modernizr.com/docs/ and this slide deck at http://www.slideshare.net/michaelenslow/its-a-mod-world-a-practical-guide-to-rocking-modernizr is a good introduction to using Modernizr.
Oftentimes, when working in modern browsers, you tend to use the console.log function to debug your JavaScript code. How many times have you forgotten to remove them or comment them out in production, only to find them throwing errors in Internet Explorer or other browsers that do not support the use of this function? You can safely use the log function included within the plugin.js file to log statements only in browsers with tools that support it.
The .htaccess file includes the best out-of-the-box defaults for caching, which makes your pages load significantly faster when they are served by the Apache Web Server. There are also configuration files for other web servers available to provide similar functionality.
The HTML element has a no-js class that can be used to provide alternative styles for browsers that do not support JavaScript. With Modernizr, this class name is replaced when used in a browser that does support JavaScript to js.