Facebook uses browser-specific body classes

Luke Rodgers — Thu, 20 Aug 2009 04:00:53 +0000

Having recently worked on a website for which page load and performance was really important, I’ve found myself viewing the source code for more and more sites. Taking a look at Facebook recently revealed that they use browser-specific classes on the body element, so that if you’re browsing with Safari 4, you’ll see something like:

If you’re already browser sniffing, this might be a better idea for applying targeted CSS rules than including an extra stylesheet with conditional comments (which means an extra HTTP request), or using the underscore hack (IE6), or star hack (IE7) which cause invalid CSS.

IE6 CSS hacks with Wordpress.com

Luke Rodgers — Fri, 13 Feb 2009 03:08:45 +0000

I’ve been working on a Wordpress.com blog for someone for which the “edit the CSS” upgrade has been purchased, and all has gone swell so far with tweaking the Kubrick theme. A couple !important declarations needed, but no big deal. That is, of course, until “make it work in IE6″ time came along.

Normally I’d just include a conditional comment, something seen by most developers to be a best practice, but in this case we can’t modify the php template files, so I had to break out the CSS hacks that I thought I had said goodbye to a few years ago.

There are several ways to go about this. First, I tried these tips from Ed Eliot, using the underscore trick to target just IE6. But interestingly (and perhaps unsurprisingly) Wordpress.com apparently won’t let you save any code that isn’t valid. I had it confirmed by support that my _margin-top: -200px; wouldn’t work.

After briefly considering @importing another stylesheet, I instead went with the CSS2 child selector approach outlined in a 24ways article from 2005. Basically, since IE6 doesn’t support the child selector ‘>’, you can make one declaration for IE6 then another for more advanced browsers using the child selector. E.g.

#content { /* for IE6 */
   margin-top: -200px;
}
#page > #content { /* for other browsers, incl. IE7+ */
   margin-top: 40px;
}

This might not get you all the mileage you need, but will probably help.

everything flows » hack

Facebook uses browser-specific body classes

IE6 CSS hacks with Wordpress.com