...

View Full Version : How to load a custom stylesheet for 2 useragents?



pxlcreations
10-10-2011, 03:14 AM
I have two user agent strings:


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?

Old Pedant
10-10-2011, 03:27 AM
Ummm...



<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.

pxlcreations
10-10-2011, 03:39 AM
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:


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:


ios5.css

And if the browser matches this user agent string:


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:


ios4.css

Old Pedant
10-10-2011, 03:48 AM
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.

pxlcreations
10-10-2011, 03:52 AM
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 :D

Old Pedant
10-10-2011, 07:48 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum