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: h5bp.com/v */
.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: h5bp.com/p */
.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?

Track.js Error Reporting

Recent Features

  • Write Simple, Elegant and Maintainable Media Queries with Sass

    I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...

  • CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

Incredible Demos

  • Create WordPress Page Templates with Custom Queries

    One of my main goals with the redesign was to make it easier for visitors to find the information that was most popular on my site. Not to my surprise, posts about MooTools, jQuery, and CSS were at the top of the list. What...

  • Create a Context Menu with Dojo and Dijit

    Context menus, used in the right type of web application, can be invaluable.  They provide shortcut methods to different functionality within the application and, with just a right click, they are readily available.  Dojo's Dijit frameworks provides an easy way to create stylish, flexible context...


  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.

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

Recently on David Walsh Blog

  • Convert Video to mp3

    Let's all be honest for a moment:  we've all ... not paid for ... music.  Whether it was via a file sharing app like Kazaa or Napster, or it was downloading and seeding on bittorrent, or maybe even downloading a music video and ripping its audio,...

  • Sort git Branches by Date

    I'll be first person to admit I don't do as much git repository maintenance as I should.  I rarely delete branches which have been merged, so a git branch execution shows me a mile-long list of branches that likely aren't relevant.  The best way to find branches I've recently...

  • Best Tools and Resources for Web Professionals in 2015

    Looking for the right resources to help you satisfy the needs of your clients? On the lookout for the best tools to help you increase your revenue? Searching for the right software to help you improve your business? Well, then you’ve come to the right place....

  • JavaScript Polling

    Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for...

  • OSCON Portland:  Conference Giveaway and Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...