I just posted the “simple-useragent” gem, which provides the ability to for cleaner browser specific CSS targeting*. This is for rails projects but the concept can work anywhere.
For example, instead of the targeting IE7 with your CSS with
[sourcecode language=”css”]
/* IE7 */
*:first-child+html #content {
height: 500px;
}
[/sourcecode]
You can now do this:
[sourcecode language=”css”]
.ie7 #content {
height: 500px;
}
[/sourcecode]
To take advantage of this, you just need to add the following to your body tag:
[sourcecode language=”ruby” htmlscript=”true”]
<body class=’<%=UserAgent::browser(request)%>’>
[/sourcecode]
* Admittedly targeting CSS to a specific browser is a bad practice that should generally be avoided. For more details about why browser detection in general is a bad idea, see www.quirksmode.org/js/support.html. However sometimes there is no choice - especially under time constraints.
Additionally, simple-useragent makes the following methods available to you:
[sourcecode language=”ruby” htmlscript=”true”]
UserAgent::is_desktop?
UserAgent::is_mobile?
UserAgent::is_blackberry?
UserAgent::is_iphone?
[/sourcecode]
The is_mobile? and is_desktop? methods are using a minimalistic approach, converted from the python script here: http://gist.github.com/88057. The theory is that since there are a lot more mobile user agents than there are desktop user agents (hundreds or even thousands) - we detect the known list of desktop user agents, and if its not one of those we assume that it is mobile. It works surprisingly well in the vast majority of cases. So far I’ve only seen it fail with spoofed or malformed user agents.
To install:
[sourcecode language=”bash”]gem install simple-useragent[/sourcecode]
The gem is hosted on gemcutter - if you don’t have gemcutter as a source you’ll have to add it
[sourcecode language=”bash”]gem install gemcutter
gem tumble [/sourcecode]
source at http://github.com/galori/simple-useragent
Update: Thanks to an anonymous commenter on rubyflow for pointing out a jQuery version of this: jquery.platformselector.