Clearfix and Browser support

When I first wrote about what's known as the Clearfix technique in 2004, I knew it was going to be useful. It was to solve a problem that previously required us to add extra markup to the page. I had no idea it would still be used in one of it's many forms in most CMS and a large percentage of all websites 8 years later.

Browsers have come a long way since then, most of the browser versions we had to support are not even thought of these days. If you do remember them it's with glassy eyes and a knot in your stomach as you remember the pain.

Stats for 2004, 2008 and 2012

In 2004 from my stats, IE6 had over 60% of the market, IE5.5 nearly 2% and other IE5 versions over 2%. Microsoft won the browser war then stopped making improvements, IE7 didn't come out till 2006, 5 years after it was first released. IE5 Mac was still around and causing pain wherever it went. Mozilla with Netscape, Firebird who grew up to be Firefox had about 25%. Safari had around 4.5%, Opera 3%. Chrome wasn't even a dream, and who would ever have thought of browsing the web on your phone.

Back to the future, or last months stats June 2012, the list of browser versions is longer then my arm. Chrome 40%, Firefox 36%, IE all up was 12% ( IE9 5.3%, IE8 3.9%, IE7 1.4%, IE6 1.1%, IE5.5 0.1%), Safari 5.5%, Opera 2%.

Browser stats give an idea of which browsers are important at a point in time and what browser to support and test in. Although it is trendy at the moment to only support the latest browsers it may be a little premature.

For an example, if a browser get's square corners instead of rounded ones, or dosen't get a drop shadow due to lack of CSS3 support. That's fine, it's purely cosmetic. A visitor with an old, low percentage browser, most likely wouldn't notice or wouldn't care, the content is still available and everything should look fine.

On the other hand, if the layout is completely screwed, with columns falling all over the place, or content on top of other content, then do something about it. Even if you don't want to fully support IE6, or any specific browser, you don't want your site to fail completely in any browser. So think in terms of how far you are willing to support them the browsers that visit your site. Provide minimum support, or layout and accessibility support for all browsers, and funky design support, for modern browsers. There's no problem with having the site look different in different browsers, just try to keep them looking decent and working in as many as you can.

The original clearfix technique from the 2004 article on Contained floats supported every major browser known at the time and still works now. The thing is, it's messy and has a nasty comment hack for IE 5 on Mac. It also suffers from a collapsing top margin issue.

I've seen many different interpretations and variations of clearfix since then. A couple of the latest are very popular, micro clearfix by
Nicolas Gallagher, which is known to be supported by Firefox 3.5+, Safari 4+, Chrome, Opera 9+ and IE6+.
Thierry Koblentz has an even smaller version he's calling Beat That ClearFix! that suports IE8+ and modern browsers only.

Both of those have targeted relatively recent browsers, so they dropped the comment hack for Mac. Let's face it If there are any Mac's out there that still run IE 5 as the only browser, then they are probably in a museum, or should be. If we forget about IE 5 Mac, we can get rid of the comment hack and things already look much simpler. IE6 Windows is a different matter, I still get high enough numbers of IE 6 visitors to keep structural support.

These day's browsers bug you enough to keep up to date or do auto updates. So unless you are at a workplace that hasn't updated their desktop image for the last 8 years, or you are still on Widows XP and haven't heard of Firefox or Chrome, then you should have a decent browser. All the clearfixes have issues if you look for them. The micro clearfix has a couple of issues in older browsers that might not be a concern. Without the period, or some other content in the after Netscape Navigator 7 and below fail. Chrome 1.0 displays a whole em wherever the pseudo element is added. These are old browsers that most people wouldn't use or test with.

If you want to get around those issues and support more browsers you could combine the best of the micro clearfix with the original and get something like:

.cf:before,
.cf:after {
  content:".";
  display:table;
  height: 0;
  font-size:0; 
  line-height:0;   
  visibility:hidden;
}
.cf:after {
  clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
  *zoom:1;
}

About 4 lines bigger then the micro clearfix, no comment hack, pretty consistant in all browsers tested. It will fail in IE5 Mac, like the others without the comment hack.