Update: I’ve added a little example below…
As most of you know there lurks browsers that we don’t really like building web sites for (*cough* Internet Explorer) and there comes a time in any developers work when they need to detect browsers. jQuery has a really nice API for detecting browsers, but sometimes you want to go a bit further.
The snippet I’m putting on this page will detect the browser and OS for you and add a nice little CSS class to the body tag, thus allowing you to write up all your CSS ready for users of different browser and OS creed.
Here it is:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | function detectBrowsers() { if ( $.browser.msie ) { if ( $.browser.version == '8.0' ) { $('body').addClass( 'ie8' ); } else if ( $.browser.version == '7.0' ) { $('body').addClass( 'ie7' ); } else { $('body').addClass( 'ie6' ); } } if ( $.browser.safari ) { if ( navigator.userAgent.indexOf( 'Safari' ) != -1 ) { $('body').addClass( 'safari' ); } else { $('body').addClass( 'chrome' ); } } if ( $.browser.mozilla ) { if ( $.browser.version.substr( 0, 3 ) == '1.9' ) { $('body').addClass( 'ff3' ); } else { $('body').addClass( 'ff2' ); } } if ( navigator.userAgent.indexOf( 'Windows' ) != -1 ) { $('body').addClass( 'windows' ); } else if ( navigator.userAgent.indexOf( 'Mac' ) != -1 ) { $('body').addClass( 'mac' ); } } |
And how would you use it? Well I’d suggest something like this:
1 2 3 4 5 6 7 8 9 10 11 | function ready() { detectBrowsers(); } function detectBrowsers() { ... } $(document).ready( ready ); |
Now you may be thinking “what about Linux?”. Well our good friends who use Linux tend to use FireFox 2/3, and that’s good, so they’re good, therefore I don’t really need to check for them.
Here’s a little example for you to mull over:
Tell me what you think.
Share the love:
Related posts:
- Introducing The 'Give Chrome' Campaign
- Developing And Deploying PHP Apps With Capistrano, Phing And DBDeploy
- Did Someone Say Polygons?
- The Best Of Us Challenge Wins FWA's Site Of The Day!!
- Introducing Vid - A jQuery Plugin For All Your Video Embedding Needs
Posted in: CSS, Development, JavaScript on Thursday, July 16th, 2009.
You can leave a response, or trackback from your own site.
I am just wondering whether you have any working examples to support this post. Not sure if I’m doing something wrong, but can’t seem to get it to work… no class is being applied to tag… thanks
Posted: August 25, 2009 at 2:31 pm;I’ve added an example for you, try it out.
Posted: August 25, 2009 at 2:49 pm;thank you for the sample in such a prompt manner. I guess what isn’t clear to me how do you apply the jQuery portion. I have added the above posted code snippet into an external JS file, along with jQuery latest version, linked to both of them… but nothing seems to be happening. In your example, I can’t see where do you apply it. I can see the body class being properly applied to …
Anyway, maybe having the entire HTML structure of the page as an example could be more helpful. To see what you are linking to, etc. THANK YOU again for your help. This is very helpful post, just wish I was better at JS.
Posted: August 25, 2009 at 3:33 pm;just got it to work
THANK YOU AGAIN!!!!!!
Posted: August 25, 2009 at 3:37 pm;Cool. It looks like you were missing the:
one more question though… I noticed that by using the JS that you have included in your “live” example doesn’t have the example above included… and it is much more extensive JS file than I anticipated.
I have originally started with including this, but that didn’t seem to work:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
{
detectBrowsers();
}
function detectBrowsers()
{
if ( $.browser.msie )
{
if ( $.browser.version == '8.0' )
{
$('body').addClass( 'ie8' );
}
else if ( $.browser.version == '7.0' )
{
$('body').addClass( 'ie7' );
}
else
{
$('body').addClass( 'ie6' );
}
}
if ( $.browser.safari )
{
if ( navigator.userAgent.indexOf( 'Safari' ) != -1 )
{
$('body').addClass( 'safari' );
initSafariSearch();
}
else
{
$('body').addClass( 'chrome' );
}
}
if ( $.browser.mozilla )
{
if ( $.browser.version.substr( 0, 3 ) == '1.9' )
{
$('body').addClass( 'ff3' );
}
else
{
$('body').addClass( 'ff2' );
}
}
if ( navigator.userAgent.indexOf( 'Windows' ) != -1 )
{
$('body').addClass( 'windows' );
}
else if ( navigator.userAgent.indexOf( 'Mac' ) != -1 )
{
$('body').addClass( 'mac' );
}
}
$(document).ready( ready );
The example’s been updated, it works in the same way, check it out…
Posted: August 25, 2009 at 3:51 pm;thank you, it’s working like a charm
Posted: August 25, 2009 at 6:29 pm;