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.
Example
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.
- <style type="text/css">
- .ie .example {
- background-color: yellow
- }
- .gecko .example {
- background-color: gray
- }
- .opera .example {
- background-color: green
- }
- .konqueror .example {
- background-color: blue
- }
- .safari .example {
- background-color: black
- }
- .example {
- width: 100px;
- height: 100px;
- }
- </style>
4.2 rating from 30 votes
Now if it could only work without javascript enabled…
Doh! I mean DISABLED.
How miserable….
Jamis Buck interview is 360 years old. Have you given up on the podcasts, just like AJAX has on the ENTERPRISE
Wade, just set the html element’s class name at the server. That’s what I will do.
“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..
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.
GOOD FOR NOTHING ARSEHOLES…
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?
“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;)
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.)
@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 :)
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…
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 :)
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.
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…
Interesting theory.
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 …
Beautiful. ~1kb of code that solves ~1 days hairpulling.
Many thank-yous.
nice code.. solves a lot of headaches
hmm, relies on javascript, but whats the point of changing the colour due to what browser visits?
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.
good coding saved me alot of time
Quite obviously you would change the colour to make it more pretty derrrrrr no but really excellent code cheers
I don’t deal with this stuff personnally but our tech guys do. Thanks kindly.
Cool stuff thanks !
i’ve been trying to learn CSS and this code helps me understand some things better…thanks
With these tricks you never can stop learning… Great stuff, just what i needed. Thank you!
thanks for the tutorial, nice work
this was a great read! well done
Sweet, this will come in handy!
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 :)
Great stuff,thanks for sharing
Nice piece of code, thanks for not keeping it to yourself :)
Perfect, just what I needed, will save me a lot of time.
Looks good to me – well laid out and easy to follow
great resources, thanks
great resource, thanks for the blog
get stuff thanks for your help with the script
great info on this stuff
nice post thanks for the info…