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.

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?

Recent Features

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

Incredible Demos

  • By
    MooTools Zebra Tables Plugin

    Tabular data can oftentimes be boring, but it doesn't need to look that way! With a small MooTools class, I can make tabular data extremely easy to read by implementing "zebra" tables -- tables with alternating row background colors. The CSS The above CSS is extremely basic.

  • By
    PHP IMDB Scraper

    It's been quite a while since I've written a PHP grabber and the itch finally got to me. This time the victim is the International Movie Database, otherwise known as IMDB. IMDB has info on every movie ever made (or so it seems). Their...

Discussion

  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!