Style Scavenger: 7 CSS Snippets to Borrow from HTML5 Boilerplate

By  on  

HTML5 Boilerplate

The "Scavenger" series looks at large-scale projects and focuses on the small snippets you can take from the project without needing the complete project.

Starting a web application from scratch can be a boring, time-consuming task. Paul Irish's HTML5 Boilerplate project is an exceptional starting point for creating a website of any kind. HTML5 Boilerplate provides an incredibly useful set of CSS, JavaScript, image, and HTML files to help you kickstart your HTML5-powered web application. Still, HTML5 Boilerplate may be a bit more than you need if you already have a boilerplate of your own; that doesn't mean that HTML5 Boilerplate can't be useful though. Here are 7 CSS snippets you can take from HTML5 Boilterplate and incorporate in your own application.


Many developers forget about the HTML tag when it comes to styling their app, but styling the HTML tag can be one of the most important.

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

This CSS snippet ensures the scrollbar always appears (so there's no "jumpiness" when page size changes) and prevents mobile browsers from adjusting the page font.


I shared this one a long time ago, but I want to point it out again:

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

Changing the highlight color of different parts of the page is another small touch to make your website unique.

img -ms-interpolation-mode: bicubic;

Internet Explorer 7 does a horrible job of scaling images, as Chris Coyier explained. The following CSS snippet cures that:

img { -ms-interpolation-mode: bicubic; }

This little-known trick has been working wonders for years.


The strategy of visually hiding text while still allowing screen readers to read it is not new, and is incredibly important. The issue is that I've seen 100 different methods for doing so, and it's hard to know which way is better than another. HTML5 Boilerplate's recommendation is:

/* Hide only visually, but have it available for screenreaders: */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

The code comes from Jonathan Snook. If you're interested in the detailed points on this verbose method, read John's post!


I was over the moon excited about SVG support in Internet Explorer 9. Of course it had to come with a caveat, and that caveat was an overflow bug:

svg:not(:root) { overflow: hidden; }

And the bug is gone! Be sure to grab this if you work with vector graphics!

@media print img max-width

Even if you don't want to use any of the screen rules, but HTML5 Boilerplate's print stylesheet is worth it alone. We always think about text when it comes to print, but how often do we consider images?

@media print {
	img { max-width: 100% !important; }

The snippet above ensures that no images reach the outer bounds of the normal page view. A sneaky but useful CSS tip.

@media print widows

Content "widows" are really ugly, both on the screen and on paper. This bit of CSS magic prevents widows and orphans on heading and paragraph tags:

@media print {
	p, h2, h3 { orphans: 3; widows: 3; }

Customize this snippet to your own liking!

As you can see, HTML5 Boilerplate is a treasure trove of CSS goodies that you can incorporate into any new or existing project. Even if you don't want to use all of the files included within HTML5 Boilerplate, there are still many great CSS snippets you can grab. Which of these CSS gems would you consider adding to your website?

Recent Features

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • By
    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

  • By
    How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

  • By
    Image Data URIs with PHP

    If you troll page markup like me, you've no doubt seen the use of data URI's within image src attributes. Instead of providing a traditional address to the image, the image file data is base64-encoded and stuffed within the src attribute. Doing so saves...


  1. Well chosen snippets from H5BP! Would recommend everyone look at all of H5BP and see where they can improve.

  2. nice tips from Boiler Plate..

  3. Thanks for some good points throughout! Love H5BP and have used it for the last like 5 sites for clients! It makes things so much easier now…

    With that said, as a C# developer the focus on apache/php makes me a little disgruntled but I’ve found a few work arounds: like instead of using Ant to cut your script files, I use SquishIt for both CSS and JS files, works a treat!

  4. Do you know about “pointer-events: none;”?
    It can be very useful.

  5. Why would one want to prevent mobile browsers from adjusting the page font?

  6. Uh, does “svg” stand for “Stan Van Gundy”? That’s all I could think of…LOL

  7. One thing that html5 boilerplate does come with that other starting point templates generally don’t is server sided files. Check out these awesome .htaccess snippets that can easily improve your site.

  8. I’m new to HTML5 Boilerplate but I find it very interesting. And I like the ideas here. You don’t need to use the entire boilerplate. Just some of these concepts will improve design integrity.

  9. The post points up 20 good reasons to get familiar with HTML5 boilerplate, and offers a great collection of snippets as well. The HTML tag, SVG overflow fix, and selection snippets in particular, but they’re all very uselful.

  10. Interesting article David. Thanks for taking time to write this. I actually didn’t want to use the HTML5 Boilerplate completely but wanted to take few the good parts out. This article helps me to do that :)

  11. I’m new to HTML5 Boilerplate but it is very useful and interesting. Also your article will help me alot to use the Boilerplate properly and handy to it. Thanks for the greate article.

  12. Boiler plate saves lot of time in writing the same repeated things again and again in every project. This is very useful article and handy one.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!