Facebook uses browser-specific body classes

Use browser-specific body classes to avoid extra stylesheets or invalid CSS

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:

<body class="home safari4 Locale_en_GB chat_body">

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.