Browser dependent, conditional CSS styles
I have a client who doesn’t like the way the font I chose for their headers looks across platforms. I am using Lucida Grande for all the Mac browsers out there and Verdana for the PC users, since Lucida Sans Unicode on PC IE6 doesn’t look great. Since PCs don’t typically have Lucida Grande, I took advantage of the fall back. The CSS looks like this {font-family: Lucida Grande, Verdana, sans-serif}.
My client wasn’t feeling Verdana for the headers, but for body text, it’s hard to beat. So, I needed a way to sniff out the user’s browser, and conditionally set the class for the just headers accordingly. JavaScript to the rescue.
First, I used the script at http://rafael.adm.br/css_browser_selector/ to set the header classes to be browser specific. If the browser is IE6, you can set styles for that browser by using the “.win.ie6″ class. For Firefox on the Mac, “.mac.gecko”. Using those classes, I set independent styles for each browser. PC users will see the headers in Helvetica and body text in Verdana, while Mac users will still see both headers and body text in Lucida Grande. Pretty cool.
Popularity: 24% [?]
Leave a Comment