You all know the old ‘floated elements inside a container cause the container to collapse’ problem?
Well, up until recently, I’d always just called on an old friend, .clearfix, and he’d sorted it out for me. I met .clearfix three or four years ago, and hardly a project has gone by since where I haven’t required his services. You know, I didn’t really ask him how he did it; he’d just quietly go about his job as I directed him, much like Michael Clayton, but without the gambling problem.
But yesterday, when I asked him to help out a colleague for me, little did I know I’d given him his last assignment.
Something happened early this morning – completely coincidentally. A little bird (or rather a tweet) came by and told me that, despite the fact Blueprint CSS uses .clearfix, .clearfix was no longer the way to go. And to be honest, it was almost a relief; the reason I’d never really asked .clearfix how he did his work was that deep down I knew that he was really a hack, and that if I just turned a blind (or ignorant) eye, then I could just pretend like everything was okay and we could all just carry on getting work done.
.clearfix is indeed inelegant, and really is a hack. And would you believe that the alternative solution is not so tricky…
Using overflow: auto; (or overflow: hidden;) on the container with a width will sort it all out for you.
Rather than explain it all here, I’ll just link to a few articles that have already put further effort into describing this:
- PPK’s Clearing floats
- Alex Walker’s Simple Clearing of Floats
- nclud’s Mind The Gap: clearfix is clearly broken
So, farewell, .clearfix, you’ve served us well.
…and thank you, MB, for the enlightenment.
Web site performance
Thursday, July 3rd, 2008Last week I read Steve Souders’ High Performance Web Sites. While I already have a fairly good understanding of site performance, having completed a fairly extensive performance analysis of tvnz.co.nz a few years ago and being familiar with Yahoo!’s YSlow plug-in for Joe Hewitt’s Firebug plug-in for Firefox, it was good to get into a bit more detail.
But lately, I’ve come across a few sites that have made me cringe; a colleague pointed out a couple of Swiss ones: migros.ch, and gate24.ch, and I came across the new upandgo.co.nz site on newsites.co.nz.
Let’s look at some stats, with vodafone.co.nz (my old gig) thrown into the mix:
(unprimed cache)
(kB, unprimed cache)
(kB, primed cache)
The first three sites are ASPX sites, with bloated, invalid, (W3C) table-based markup, and what appears to be no performance tuning whatsoever. Sure, they are visually heavier than vodafone.co.nz, but being visually heavier doesn’t necessarily equate to looking better, and more often the end-user benefits of the visual components are offset by the performance overhead they introduce.
So, if you’re a web developer and you don’t use, or know of, Firebug and YSlow, stop what you’re doing right now and get familiar with them. Chris Pederick’s Web Developer toolbar for Firefox is also invaluable.
Learn about ETags, far future Expires headers, gzip, script placement, semantic markup, reducing the number of HTTP requests.
These are all vital factors in presenting a great website.
Figure out what you can do to make your site lighter, faster, and more search engine-friendly.
Posted in Coding, Commentary, Design, Tools, Web Standards | 5 Comments »