Friday, July 21st, 2006

CSS Browser Selector

Category: JavaScript, Library

Rafael Lima took inspiration from 37 Signals browser selector idea and created it. “It” being a JS library that allows you to create browser specific CSS to be merged into your normal classes.


You can prefix browser specific elements (available codes: ie, gecko, opera, konqueror, safari) and the library will make sure that the correct items are added in for a particular browser.

This can be considered cleaner than some of the really ugly hacks that you normally face.

  1. <style type="text/css">
  2. .ie .example {
  3.   background-color: yellow
  4. }
  5. .gecko .example {
  6.   background-color: gray
  7. }
  8. .opera .example {
  9.   background-color: green
  10. }
  11. .konqueror .example {
  12.   background-color: blue
  13. }
  14. .safari .example {
  15.   background-color: black
  16. }
  17. .example {
  18.   width: 100px;
  19.   height: 100px;
  20. }
  21. </style>

CSS Browser Selector

Posted by Dion Almaer at 2:13 pm

4.2 rating from 30 votes


Comments feed TrackBack URI

Now if it could only work without javascript enabled…

Comment by Wade Winningham — July 21, 2006

Doh! I mean DISABLED.

Comment by Wade Winningham — July 21, 2006

How miserable….

Comment by Internet — July 21, 2006

Jamis Buck interview is 360 years old. Have you given up on the podcasts, just like AJAX has on the ENTERPRISE

Comment by PooJaxian — July 21, 2006

Wade, just set the html element’s class name at the server. That’s what I will do.

Comment by Beer de Boer — July 21, 2006

“Wade, just set the html element’s class name at the server. That’s what I will do. ”

Isn’t that what people do now? What the hell does this “SELECTOR” solve? And That’s the question..

Comment by Scotch De Boer — July 21, 2006

OK, I’m a PHP bigot. But the link to 37 signals is a PHP page?

What the fuck happened to rails. Did they trash it?

Yeah I know, ride on PooJax, and try to make a buck.


Comment by PHP all the way.. — July 21, 2006

what a great idea! I think I’ll definitely be nabbing that code!

to people who complain that some things don’t work with javascript disabled – who the hell disables javascript? only web developers and search engines… and before you complain that, say, screen readers don’t support javascript – so what? why would a screen reader need css anyway?

Comment by Kae Verens — July 22, 2006

“Now if it could only work without javascript enabled…”

Why? Just enable Javascript; this is 2006! And while your at it, stop using that 386;)

Comment by shejaxmeoff — July 22, 2006

For the record the IE settings are IE/Win only. Doesn’t work on IE/Mac. (Yes, I know, I’d like to say ‘Screw them’ too, but that’s the case.)

Comment by Rob — July 22, 2006

@Rob – is that also the case if you use the ie5 tag? That would be my only guess… don’t have a Mac handy or I’d test it :)

Comment by Tommy M. — July 22, 2006

REs 2006-07-21

CorelDRAW Graphics Suite X3 SP1Opera 9.01 Build 8542 BetaThe Best Logo Redesigns of 2006ZoneAlarm Free 6.5.731.000CSS Browser SelectorIntroducing the NingbarZune Insider BlogOpera Mini for Mobile Phones 2.0[杂谈碎说] 从敏思的变故说起CSS ex…

Trackback by Wangtam — July 22, 2006

Well, this has been discussed in SvN before, but I think that this is a way to avoid the problem rather than fixing it.

You can write css that works in most browsers (read: all but ie), and then use conditional comments to support different versions of ie.

That’s the cleanest way, that doesn’t require javascript (in case someone turns it off) and plays nice with everyone.

Javascript is an excellent thing to add features that are not required for everyone. Page display *is* pretty much required for everyone, so I guess one cannot count on JS being available to render the page correctly.

Just a thought :)

Comment by Nicolas Sanguinetti — July 23, 2006

Now, This is what i exactly needed. thanx ajaxian, now i can think more independently and can write some easy code. I wonder why didn’t this idea came to my mind as i keep fighting with this problem some times.

Comment by Google Logs — July 23, 2006

REs 2006-07-22

CorelDRAW Graphics Suite X3 SP1Opera 9.01 Build 8542 BetaThe Best Logo Redesigns of 2006ZoneAlarm Free 6.5.731.000CSS Browser SelectorIntroducing the NingbarZune Insider BlogOpera Mini for Mobile Phones 2.0[杂谈碎说] 从敏思的变故说起CSS ex…

Trackback by Wangtam — July 24, 2006

Interesting theory.

Comment by Allahu Akbar — July 24, 2006

The dangers of browser detects

I’m already regretting the publication of my Browser Detect 2.0. From one of the comments I learned that there’s a new script making the rounds of blogs, a script that neatly highlights the dangers of using browser detects, but that’s been received …

Trackback by QuirksBlog — August 3, 2006

Beautiful. ~1kb of code that solves ~1 days hairpulling.
Many thank-yous.

Comment by Ultraniblet — September 13, 2006

nice code.. solves a lot of headaches

Comment by Richard S — December 29, 2006

hmm, relies on javascript, but whats the point of changing the colour due to what browser visits?

Comment by Maffia Recordz — January 1, 2007

Personally I’m not too bothered that it doesn’t work if java is disabled, its very rare that an end user would disable it. – as for whats the point of changing the colour, well, I think thats just an example, you could do more ‘browser specific’ things than just change the colour using this method.

Comment by Simon — February 6, 2007

good coding saved me alot of time

Comment by bob gardner — March 13, 2007

Quite obviously you would change the colour to make it more pretty derrrrrr no but really excellent code cheers

Comment by Chris — March 17, 2007

I don’t deal with this stuff personnally but our tech guys do. Thanks kindly.

Comment by Jerome Black — March 22, 2007

Cool stuff thanks !

Comment by DocZayus — April 12, 2007

i’ve been trying to learn CSS and this code helps me understand some things better…thanks

Comment by Erik — June 6, 2007

With these tricks you never can stop learning… Great stuff, just what i needed. Thank you!

Comment by Eddy — June 25, 2007

thanks for the tutorial, nice work

Comment by Ken — July 28, 2007

this was a great read! well done

Comment by Stephanie — July 29, 2007

Sweet, this will come in handy!

Comment by Andy — September 8, 2007

I think my designer was saying something about this, how it all needs to fit in so the website looks the same across differnet browsers.

Cheers :)

Comment by drew — September 8, 2007

Great stuff,thanks for sharing

Comment by Samantha — September 11, 2007

Nice piece of code, thanks for not keeping it to yourself :)

Comment by SlackAlice — September 12, 2007

Perfect, just what I needed, will save me a lot of time.

Comment by Cars for Stars — September 13, 2007

Looks good to me – well laid out and easy to follow

Comment by David — September 19, 2007

great resources, thanks

Comment by Sam — September 20, 2007

great resource, thanks for the blog

Comment by julie — October 31, 2007

get stuff thanks for your help with the script

Comment by jim — November 6, 2007

great info on this stuff

Comment by henry t — November 21, 2007

nice post thanks for the info…

Comment by celeste — November 21, 2007

Leave a comment

You must be logged in to post a comment.