Plus lots of other stylistic tricks that require CSS3 support in order to display as intended. Fortunately, most of the browsers to which I am catering with this new design have no problems with most of the advanced stuff. Of course, Internet Explorer chokes on just about everything, but fortunately IE’s proprietary conditionalcomments make it easy to fix things up with some “special” styles:

Bam, just like that. In each of these stylesheets, I essentially “undo” all of the cool CSS effects that modern browsers get, including some crafty <pre> treatments that you are hopefully enjoying ;) Notice that we can specify an additional/alternate stylesheet for any version of IE. For the Serious theme, I provide around 20 remedial rules for IE 6, 7, and 8. Once IE 9 is released, we’ll need four additional stylesheets. Moving on..

So that takes care of Microsoft, but there are still other browsers to consider. I designed the new Serious theme to look perfect in the latest version of Firefox (3.5), which uses a different rendering engine than Safari, Opera, and Chrome. Fortunately, I didn’t need to change much for older versions of Firefox, but some of the other modern browsers required a few tweaks to get things looking just right. To do this, I could have used a bunch of ugly CSS hacks, but there are too many risks and “gotchas” when it comes to differentiating between Safari and Opera, for example. So I decided to keep things as simple and specific as possible. Here’s how I did it..

Really Simple Browser Detection for Modern Browsers

Before getting into it, let me just acknowledge that browser detection should only be used as a last resort. If you can design a site without needing any hacks or alternate presentational trickery, then good for you, no browser detection needed. When it comes to pushing the envelope and trying new things, however, you’ll almost always find presentational discrepancies in modern browsers. In any case, it turns out that I do feel as if browser detection was the ideal solution for the new design, mostly due to the fact that the modifications were few and fairly cosmetic in nature, so no big deal if JavaScript is not available to the user.

Basically, I want to apply an additional stylesheet to each of the modern browsers. To do this with IE, conditional comments work perfectly. I almost wish that every browser included some sort of conditional-comment functionality. It would make all this browser-detection stuff unnecessary. In any case, here is a list of browsers that I want to target with CSS (in no particular order):

Camino

Chrome

Opera

Safari

For these four browsers, I created four unique stylesheets and then conditionally link to them with a few snippets of jQuery:

Basically, each of these snippets tests the client’s user-agent string and writes a <link> to any matching stylesheet. Of course JavaScript is required on the user’s browser, so it’s best not to use this technique for anything beyond minor cosmetic enhancements.

As for the code itself, I am know there are more elaborate ways of sniffing and detecting browsers, but I wanted to keep things as simple as possible. Also, this code could also be simplified to exist within a single <script> element:

And of course, you aren’t limited to the browsers specified here. You could easily target another by emulating the pattern according to the user-agent or name of the additional browser. For example, we could add a custom stylesheet for the Flock browser like so:

Finally, because this is JavaScript, I place this block of code at the end of my XHTML document, just before the closing <body> element. It could just as easily be argued that this code should be placed in the document <head> because it’s ultimately referring to CSS, but I will leave it up to you to decide for yourself.

Update: in the comments, Gustavo informs us that, as of jQuery 1.4, the $.browser variable is replaced by $.support. So if you’re using jQuery 1.4 or better, you’ll need adjust the code accordingly. Here is an example showing how this would look for the Flock browser:

Check it out

Comments

Sounds great, I am always worried that a user will not have JavaScript enabled, thats why I tend not to depend on JavaScript. Yes, it will look best with JavaScript but I always make sure it looks great without it. I as well tend to stay away from CSS3 depended elements, and other elements such as “border-radius”.

Hey Tyler, absolutely – using a bit of JavaScript for the purposes of progressively enhancing your site with some advanced selectors or other CSS3 tricks is a great way to go about it. The way I see it, people who want the best experience on the Web will be using an updated version of one of the better browsers, Firefox, Opera, Safari, et al. It is unlikely that people visiting with old IE or other antiquated browsers will even notice the difference.

@ufucuk: yes, I am aware of the issue and looking for a good solution. In the meantime, all you need to do is copy/paste the code into a text editor to take a look at it. Or read it in your feed reader.

@Gustavo: Thanks for the heads up – I will update the article soon with a note about the replacement. Good call.

Thanks for the comment. I completely agree about solving problems as simply as possible, but there are many cases where CSS is simply insufficient to meet the goals of a design (e.g., as discussed in the article). Not even with CSS hacks could I have created this theme (I tried!) – hence the JavaScript solution.

As for the logic behind your recommended method, I think it sounds great. Of course either technique includes the JavaScript at the bottom of the document, and either is going to result in the same number of network connections. So not really much difference other than having everything prepackaged and ready to go.

I guess it all comes down to personal preference. For this design, I really like having the granular control over each stylesheet. It’s just so clean and precise. With that external script you mention, I think it just would’ve been overkill.

Even so, it looks like a great tool to have in the belt and I look forward to trying it out on future projects. Thanks for pointing it out.

Concur with Helen, the mouse-overs are way cool. I’ve been looking at them for a few weeks now, and I only just noticed that effect today- did you just enable it or have I been totally blind? Nicely done!

Projects

About the site

Perishable Press is the work of Jeff Starr, professional developer, designer, author, and publisher with over 10 years of experience.
Check out some of Jeff's books and projects, follow on Twitter, or learn more »

Fun fact: Perishable Press has been online since 2005, and features over 800 articles and more than 11,000 comments. More stats »