SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Blackpool, UK
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to detect broweser+version and place this as a body class in JS?

    I've obtained some server side PHP code which places the browser and version (taken from the USER AGENT string response header) in a class of my body HTML element i.e. <body class="ie ie7"> I'm using this as a CSS hook for cross browser styling.

    Im running the site on Wordpress with a caching plugin which spits out a HTML version of the page. The problem is, is that the cache doesnt refresh on a per new user basis so if the first user comes in using Chrome this will get added to static file <body class="chrome"> and obviosly wont refresh if the next user is on say IE as it is now cached as a flat HTML.

    I'm wondering is there a better way to do this client side and manipulate the DOM after the page has loaded? If so, anyone got any code that can do this?

    Cheers...John

    PS - Heres the PHP code FYI

    <?php
    // Figure out which browser the user is using

    $user_agent = $_SERVER['HTTP_USER_AGENT'];

    if (preg_match('/Firefox/', $user_agent)){
    $browser = "ff";
    } else if (preg_match('/Firefox.3.0/i', $user_agent)) {
    $browser = "ff ff30";
    } else if (preg_match('/MSIE.9/i', $user_agent)) {
    $browser = "ie ie9";
    } else if (preg_match('/MSIE.8/i', $user_agent)) {
    $browser = "ie ie8";
    } else if (preg_match('/MSIE.7/i', $user_agent)) {
    $browser = "ie ie7";
    } else if (preg_match('/MSIE.6/i', $user_agent)) {
    $browser = "ie ie6";
    } else if (preg_match('/Chrome/i', $user_agent)) {
    $browser = "chrome";
    } else if (preg_match('/Safari/i', $user_agent)) {
    $browser = "safari";
    } else {
    $browser = "in_unknown";
    }

    ?>

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I'm assuming most of your browser specific CSS would be written for IE 6 - 8. You could achieve something similar in the HTML by using some conditional comments.

    Code HTML4Strict:
    <!--[if lt IE 7]> <html class="ie6"> <![endif]-->
    <!--[if IE 7]>    <html class="ie7"> <![endif]-->
    <!--[if IE 8]>    <html class="ie8"> <![endif]-->
    <!--[if gt IE 8]><!--> <html> <!--<![endif]-->


    Do you actually have a need to write specific CSS for browsers other than IE?
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,871
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Both Internet Explorer and Firefox allow the useragent to contain anything at all. Other browesers allow it to at least contain an IE or Firefox useragent instead of the one for that browser.

    For anything other than statistics the useragent is meaningless. What browser is it if the useragent reads "visit my web site" - that could be either IE or Firefox. If the browser contains a useragent identifying the browser as IE it is just as likely to be Firefox or Chrome as it is to be IE,
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Blackpool, UK
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not really, Id just like the option to be able to target Firefox though as I've noticed it doing a few odd things now and then

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Blackpool, UK
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stepehen - Are you saying I cant achieve this with JS? ive written this code and it seems to work OK? Only problem is when I load it in IE it pops up a message saying "IE restricted this webpage from running scripts" and gives me a popup to allow scripts to run? Obviouslly not a good state of affairs. Works in IE6,7,8 though.

    <script type="text/javascript">

    var browser

    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
    var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
    if (ieversion>=9)
    browser =("ie ie9")
    else if (ieversion>=8)
    browser =("ie ie8")
    else if (ieversion>=7)
    browser =("ie ie7")
    else if (ieversion>=6)
    browser =("ie ie6")
    else if (ieversion>=5)
    browser =("ie ie5")
    }
    else
    browser =("unknown")

    if (browser == "unknown")
    {
    if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //test for Firefox/x.x or Firefox x.x (ignoring remaining digits);
    var ffversion=new Number(RegExp.$1) // capture x.x portion and store as a number
    if (ffversion>=7)
    browser =("ff ff7")
    else if (ffversion>=6)
    browser =("ff ff6")
    else if (ffversion>=5)
    browser =("ff ff5")
    else if (ffversion>=4)
    browser =("ff ff4")
    else if (ffversion>=3)
    browser =("ff ff3")
    else if (ffversion>=2)
    browser =("ff ff2")
    else if (ffversion>=1)
    browser =("ff ff1")
    }
    else
    browser =("unknown")
    }
    document.write(browser)

    </script>

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,871
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    That code will misidentify the browser in a lot of cases.

    At least one of those IE useragents is valid for Safari, Chrome and Opera and they all are possible with Firefox.

    At least one of those Firefox useragents is valid for Safari, Chrome and Opera and they all are possible with Internet Explorer.

    If someone has the useragent in their browser set to "my browser so ming your own business" then there is no way to tell if the browser is IE or Firefox as both of those browsers allow the useragent to be set to anything at all by the browser owner.

    You should only ever use the useragent for statistical purposes as it is not reliable enough to use for anything else.

    Also your code there fails to take into account the very common useragent that claims the browser is IE version 99.

    Since JavaScript introduced feature sensing in the early 1990s it has always been better to test specifically for whatever doesn't work properly and then patch it. That way if the next breowser version fixes it then the patch will still work as it will only apply when needed and not to specific browsers.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •