Most Useful Features of HTML5 Boilerplate

Often when we are developing multiple websites, we come accustom to the reuse of code to lay down the foundations of our work. Google's own, front-end developer, Paul Irish and Divya Manian have put together a superb resource to be used as a starting point to for any website or web application. In essence it's a collection of the best practices used by front-end developers, by combining commonly used snippets and placing them into a HTML and CSS folder structure.

We have highlighted some of our favorite features, displayed in code snippets below.

Page load speed increase

 
<!--[if IE]><![endif]--> 

Traditionally, conditional stylesheets were blocked until the CSS files were fully downloaded, hence increasing the page load time. This fix improves the page speed by using the empty conditional comment before any CSS is loaded into the document and ultimately increases the performance of the site.

Optimized Google Analytics

The resource includes an optimized asynchronous version of Google's Analytics tool. As almost all websites include this tracking tool it's great to have to best possible version included. See here for the nuts and bolts of how this is done.

HTML5 ready CSS reset

/* html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark  html5doctor.com/html-5-reset-stylesheet/*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

article, aside, figure, footer, header,
hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }
/* END RESET CSS */

Following on from the ever popular Eric Myer CSS reset, Boilerplate includes an updated HTML5 supported version that sets all the structural tags as block level and resets all of their default styling as expected.

Forced scrollbar

html { overflow-y: scroll; }

Often when pages are loaded, they can sometimes be shorter than the size of the screen. This can sometimes force the content to jump from side to side. The CSS attribute "overflow-y: scroll" is added to the html element to force show the scrollbar whatever the size of the content.

Highlight text selection color

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

With the "::selection" and for Firefox, the "::-moz-selection", this selector has been added so you can now alter the color of what the user will see whenever they highlight text. The default color is pink, which you may wan't to change if you are developing a professional website.

Print CSS

/* print styles
* inlined to avoid required HTTP connection 

www.phpied.com/delay-loading-your-print-css/
*/
@media print {
* { background: transparent !important; color: #444 !important; 
text-shadow: none; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; }
  abbr:after { content: " (" attr(title) ")"; }    
.ir a:after { content: ""; }  /* Don't show links for images */    
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }    
img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}

Some of the handy features in the print styles included by default are the ability to adjust the size of the images to make sure that when printing the images do not reach the outer bounds of the normal page view. Boilerplate also has black set as the default color for printing, it includes a comment pointing out that "black prints out faster".

A few other features to be noted are that as browsers only look for the original character set "charset=utf-8", they have only used this in the meta tag, getting rid of the "content type" and "text/html" attributes, which weren't being used by the browsers anyway. Boilerplate also includes a link to where the latest version of jQuery in the Google API library, so there will be no need to keep updating the link when a new version is released. Furthermore Boilerplate includes the "no-js" snippet in the html element, which is used to handle browsers that do not support JavaScript. This can be directly placed as a selector in the CSS file to link to and for instance hide all h1 elements if JavaScript is not supported.