Some Handy CSS: Clearfix, Friendly Spacing on Named Anchor Jumps, Visually Hidden and Box Sizing

These aren’t going to be terribly useful to you unless you’re a developer. A few regularly used CSS tricks:

The latest clearfix method (note this is for the parent container, not the child element)

.yourcontainer:after {
  content: "";
  display: table;
  clear: both;
}

While the above clearfix code is what you’ll posted around the net, I also like to additionally apply the clearfix BEFORE the container and not just after. This will clear any floats at the time of rendering your container on the page. To add this BEFORE method just declare the class in your css above like so:

.yourcontainer:after, .yourcontainer:before {
  content: "";
  display: table;
  clear: both;
}

IE8 and up. Read the full “story” at CSS-Tricks should you wish.

Friendly spacing on named anchor jumps

You know how when you click a named anchor link the content jumps rights to the named anchor and “headbutts” your browser window? Well for some friendly named anchor jumps use this:

.anchor:before { /* hashtag links that don't headbutt browser */
  display: block; 
  content: " "; 
  margin-top: -30px; 
  height: 30px; 
  visibility: hidden; 
}

The idea is to create a space (adjust the pixel measurement as you see fit) before the named anchor. Another snippet from the fine folks at CSS Tricks. Read their post here.

Visually hidden

Sometimes you may wish for content to be moved off-screen but still available to screen readers and accessibility devices. Here’s the CSS I use for that:

.visually-hidden {
 position: absolute !important;
  height: 1px; width: 1px; 
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

Box-Sizing

The quick back-story with box-sizing is when you’ve applied padding to an element that has a width set (.element { width: 300px; }), that elements width will actually render in browsers at width + padding essentially growing and staying as you wanted it. The solution, not only for a specific element, but applied to the entirety of your layout means adding html { box-sizing: border-box; } to your stylesheet. Quoted from Paul Irish, the code is as follows:

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

If you think using the “*” in your css impacts performance you can read Paul’s post here. Or for further box-sizing tips you can check out the CSS-Tricks post here, and the spec from w3schools is here.

Hope this helps. Now get back to work!