Treehouse

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?

ydkjs-3.png

Recent Features

Incredible Demos

  • WebSocket and Socket.IO

    My favorite web technology is quickly becoming the WebSocket API. WebSocket provides a welcomed alternative to the AJAX technologies we've been making use of over the past few years. This new API provides a method to push...

  • Record Text Selections Using MooTools or jQuery AJAX

    One technique I'm seeing more and more these days (CNNSI.com, for example) is AJAX recording of selected text. It makes sense -- if you detect users selecting the terms over and over again, you can probably assume your visitors...

  • MooTools Flashlight Effect

    Another reason that I love Twitter so much is that I'm able to check out what fellow developers think is interesting. Chris Coyier posted about a flashlight effect he found built with jQuery. While I agree with Chris...

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.

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

Use Code Editor