Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    177
    Thanks
    20
    Thanked 2 Times in 1 Post

    How to load a custom stylesheet for 2 useragents?

    I have two user agent strings:

    Code:
    Mozilla/5.0 (iPad; CPU OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3
    
    Mozilla/5.0 (iPad; U; CPU OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5
    The first targets iOS5 and the second targets iOS4.

    Is it possible to load a custom stylesheet for the first user agent string, then a different one for the later user agent string?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,630 Times in 4,593 Posts
    Ummm...

    Code:
    <style type="text/javascript">
    div.ios5 {
       ... 
    }
    div.ios5 div { 
       ...
    }
    div.ios5 span.foo {
       ...
    }
    
    div.ios4 {
       ... 
    }
    div.ios4 div { 
       ...
    }
    div.ios4 span.foo {
       ...
    }
    ...
    </span>
    </head>
    <body>
    <script type="text/javascript">
    if ( ios4_is_detected ) document.write('<div class="ios4">');
    else document.write('<div class="ios5">');
    </script>
        ... content ...
    </div><!-- end of eithe ios4 or ios5 div -->
    And of course you could use two CSS files, or even three or more, if you wish.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    177
    Thanks
    20
    Thanked 2 Times in 1 Post
    What your code seems to be doing is writing a div when "ios4_is_detected". That's not what my post was aiming for.

    What I want to happen is that in the head section, theres a javascript function which checks to see if the browser matches one of those user agents, and loads a custom stylesheet. If it detects the other user agent, it loads a different stylesheet.

    So, if the browser matched this user agent string:

    Code:
    Mozilla/5.0 (iPad; CPU OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3
    It loads this css file:

    Code:
    ios5.css
    And if the browser matches this user agent string:

    Code:
    Mozilla/5.0 (iPad; U; CPU OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5
    It loads this css file:

    Code:
    ios4.css

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,630 Times in 4,593 Posts
    And I'm offering you a different solution.

    You can have your two stylesheets.

    You always load both of them into your page.

    Your wrap your entire content in a div that has one or the other class (or it could be one out of 10 classes or...).

    And so, effectively, the unneeded stylesheet is simply ignored. At least, its contents are.

    Things in your page that are not dependent on the differing user agents could be in a third css file, if you wanted.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    pxlcreations (10-10-2011)

  • #5
    Regular Coder
    Join Date
    Oct 2009
    Posts
    177
    Thanks
    20
    Thanked 2 Times in 1 Post
    Quote Originally Posted by Old Pedant View Post
    And I'm offering you a different solution.

    You can have your two stylesheets.

    You always load both of them into your page.

    Your wrap your entire content in a div that has one or the other class (or it could be one out of 10 classes or...).

    And so, effectively, the unneeded stylesheet is simply ignored. At least, its contents are.

    Things in your page that are not dependent on the differing user agents could be in a third css file, if you wanted.
    Okay, I see what you mean now. But that'd require some code rewriting and the change is only one thing, which would mean it would have duplicate content (one would be hidden if one of the user agents was detected) as it's a body div modification.

    Either way, I found a solution to my problem by using a different method, but thank you for the help

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,630 Times in 4,593 Posts
    Okay, up to you.

    I, personally, use stuff like this all the time. Makes it easy to handle different browsers, different screen resolutions, etc., by just having on master <div> that controls all the other content just by its class name.

    You can even assign it multiple classes, for differing overall characteristics.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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