Question

I’ve got a great jQuery plugin that allows you to insert browser-specific CSS into your stylesheet.

EXAMPLE:

#foo {width: 100%; border: 12px solid white}
.opera #foo {width: 99%; border: 12px solid red}
.gecko #foo {width: 33%; border: 12px solid blue}

…you get the idea.

QUESTION:

Is there something similar that can be used to insert browser-specific jQuery snippets, or even browser specific HTML? For example, (pseudo-code): IF opera, fadeIn div#opera, IF webkit fadeIn div#webkit, etc.

I’m trying to figure out how to make, for example, a pop-up which appears only for Opera, and another that is only for Webkit, etc.

Basically, post anything you have that helps target specific browsers, as I want to learn everything I need to know. I’m looking for plugins that help make cross-browser tasks easier, and I’m not too concerned about older browsers.

UPDATE:

Here’s the plugin I’m using:

function css_browser_selector(u) {
var ua = u.toLowerCase(),
    is = function (t) {
        return ua.indexOf(t) > -1
    }, g = 'gecko',
    w = 'webkit',
    s = 'safari',
    o = 'opera',
    m = 'mobile',
    h = document.documentElement,
    b = [(!(/opera|webtv/i.test(ua)) && /msie\s(\d)/.test(ua)) ? ('ie ie' + RegExp.$1) : is('firefox/2') ? g + ' ff2' : is('firefox/3.5') ? g + ' ff3 ff3_5' : is('firefox/3.6') ? g + ' ff3 ff3_6' : is('firefox/3') ? g + ' ff3' : is('gecko/') ? g : is('opera') ? o + (/version\/(\d+)/.test(ua) ? ' ' + o + RegExp.$1 : (/opera(\s|\/)(\d+)/.test(ua) ? ' ' + o + RegExp.$2 : '')) : is('konqueror') ? 'konqueror' : is('blackberry') ? m + ' blackberry' : is('android') ? m + ' android' : is('chrome') ? w + ' chrome' : is('iron') ? w + ' iron' : is('applewebkit/') ? w + ' ' + s + (/version\/(\d+)/.test(ua) ? ' ' + s + RegExp.$1 : '') : is('mozilla/') ? g : '', is('j2me') ? m + ' j2me' : is('iphone') ? m + ' iphone' : is('ipod') ? m + ' ipod' : is('ipad') ? m + ' ipad' : is('mac') ? 'mac' : is('darwin') ? 'mac' : is('webtv') ? 'webtv' : is('win') ? 'win' + (is('windows nt 6.0') ? ' vista' : '') : is('freebsd') ? 'freebsd' : (is('x11') || is('linux')) ? 'linux' : '', 'js'];
c = b.join(' ');
h.className += ' ' + c;
return c;
};
css_browser_selector(navigator.userAgent);

Answer 1

It seems that all this plugin does is to append several classes to the html tag. To test them using jQuery, you can do

$html = $("html"); //cached for performance reasons
...

if( $html.is(".gecko") ){
  ...

. Better yet, look if the plugin also sets some global (or visible from the global scope) variables that you can use directly. It is likely the case.

Also, please don’t ever look at what the browser is when you want to know what the browser can do. Feature-detect, not browser-detect (unless the feature cannot be reliably detected, as noted by DCoder). The Modernizr library can be used for that.