Style Scavenger: 7 CSS Snippets to Borrow from 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.

html

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.

::selection

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.

.visuallyhidden

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!

svg:not(:root)

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?