load different stylesheet based on browser
Thought I posted this here already, but I guess I didn’t. Here’s a javascript to detect the user’s browser, and load the appropriate stylesheet. I came up with this script because some of the css things I had once been doing were not friendly with NS.
<SCRIPT language=”JavaScript”>
<!–
var browserName=navigator.appName;
if (browserName==”Microsoft Internet Explorer”)
{
//load ie friendly stylesheet
document.write(’<link rel=”stylesheet” href=”/stylesie.css” type=”text/css”>’)
}
else
{
if ((parseFloat(navigator.appVersion)) >= 5 )
{
// if ns version is great than or equal to 5 (6) load this stylesheet
document.write(’<link rel=”stylesheet” href=”/stylesie.css” type=”text/css”>’)
} else {
//if you have a really ancient browser 
(ie. NS 4.7 or earlier) load this stylesheet
document.write(’<link rel=”stylesheet” href=”/stylesns.css” type=”text/css”>’)
}
}
//–>
</SCRIPT>
<NOSCRIPT>
<!– if you don’t have javascript running - assume you have an ancient browser and load the ancient friendly stylesheet –>
<link rel=”stylesheet” href=”/stylesns.css” type=”text/css”>
</NOSCRIPT>
I’m sure there’s a way to do that in PHP - anyone want to take a shot?
June 28th, 2002 at 8:53 am
You could link to a php page that spits out (prints out) the stylesheet and it can decide what to return depending on the browser:
<link rel=”stylesheet” href=”/style.php” type=”text/css”>
Just a bit more eloquent and powerful than slinging loads of javascript in every page, imho.
June 28th, 2002 at 9:10 am
Great idea, both of you! John - a fellow person that hates loads of javascript! yay!
June 28th, 2002 at 9:26 am
Anyone have the PHP code that checks browser version? there’s HTTP USER AGENT - but that one is a little weird - as IE 5.5 returns mozilla 4.0 and NS 4.7 returns mozilla 4.7 (or even 5) I don’t get that one…
June 28th, 2002 at 9:56 am
Nice idea, but I see a problem with that. I seem to recall that I read somewhere in Bugzilla, that Mozilla sometimes has problems with stylesheets that do not have .css as the file extension so calling style.php might be kind of difficult.
June 28th, 2002 at 9:57 am
Have a butchers at this page:
http://www.php.net/manual/en/function.get-browser.php
Alternatively, you can get the browser out of HTTP_USER_AGENT, but as you say it’s a bit messy. An example of that value is:
‘Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.0.3705)’
June 28th, 2002 at 10:11 am
Tobias, seems to work on my copy of Mozilla
But seriously, if you say “type=text/css” it shouldn’t care about the extension (according to the docs). If it does it’s a bug!
June 28th, 2002 at 11:11 am
I’ll write something up over the weekend, not because I think it’s a good idea (browser detect scripts suck - they’re rarely accurate, they promote the wrong mindset for cross-browser authoring, and they’re extremely dangerous if they’re wrong), but because I’ve never done it before and I’m looking for a chance to flex my PHP muscles anyway :-).
Tobias, Mozilla won’t recognise CSS files that aren’t served (by the server) as “text/css”. Although annoying for surfers, this is apparently a feature, not a bug (bah). The extension is (or, at least, can be) irrelevant to the content-type.
June 28th, 2002 at 1:42 pm
I prefer to use a mixture of @import (hide from Netscape 4) and the child selector hack (hide from IE) to specify per-browser styles.
June 29th, 2002 at 9:18 pm
I have a ssi script that I have used in the past, and will use it again soon, that will detect both the browser and platform and deliver the appropriate css. You can get as crazy as you want with it and make the css very specific. And this works, you only have to make sure you can run ssi. Here it is:
. . . Ah, fudge; that uncode script is not working. Another PC only javascript?! You will have to grab the script here: http://www.radiofreebill.com/ssi/include_css.txt
June 29th, 2002 at 9:28 pm
Hey Bill - Thanks for the link on that… Not sure if the decoder thingy is pc only - but if you’re on NS - I’m 99% sure it won’t work on either platform for NS….
Anyway - grabbed your script:
<!–#if expr=”(${HTTP_USER_AGENT} = /Mozilla\/4|Mozilla\/5/) && (${HTTP_USER_AGENT} =
/MSIE/) && (${HTTP_USER_AGENT} = /Mac/)” –>
<link rel=”stylesheet” href=”GeneratedItems/mac_ms5_styles.css”>
<!–#elif expr=”(${HTTP_USER_AGENT} = /Mozilla\/4|Mozilla\/5/) && (${HTTP_USER_AGENT} =
/MSIE/) && (${HTTP_USER_AGENT} = /Win/)” –>
<link rel=”stylesheet” href=”GeneratedItems/win_ms5_styles.css”>
<!–#elif expr=”(${HTTP_USER_AGENT} = /Mozilla\/5/) && (${HTTP_USER_AGENT} =
/NETSCAPE/) && (${HTTP_USER_AGENT} = /Mac/)” –>
<link rel=”stylesheet” href=”GeneratedItems/mac_nn5_styles.css”>
<!–#elif expr=”(${HTTP_USER_AGENT} = /Mozilla\/5/) && (${HTTP_USER_AGENT} =
/NETSCAPE/) && (${HTTP_USER_AGENT} = /Win/)” –>
<link rel=”stylesheet” href=”GeneratedItems/win_nn5_styles.css”>
<!–#elif expr=”(${HTTP_USER_AGENT} = /Mac/)” –>
<link rel=”stylesheet” href=”GeneratedItems/mac_styles.css”>
<!–#elif expr=”(${HTTP_USER_AGENT} = /Win/)” –>
<link rel=”stylesheet” href=”GeneratedItems/win_styles.css”>
<!–#else –>
<link rel=”stylesheet” href=”GeneratedItems/styles.css”>
<!–#endif –>
Here’s a question (although, I’m guessing a simple test would reveal the answer) - you probably can’t do that AND php on the same page? My guess is no…
June 29th, 2002 at 11:27 pm
Jennifer, I wouldn’t know if php would work on a page with this ssi script.
BTW: could you please make Geneva the first font in your css? It is a Mac screen font that works best (this site doesn’t look so hot). Thanks.
July 4th, 2002 at 7:33 pm
Is there a way in Javascript to specify the OS? My switching code is much less ornate, and serves up a stylesheet based only on OS and browser type (one for MSIE/Windows, another for non-MSIE/non-Windows [ie, Netscape and Opera on the Mac], and a third for anything else), but I can’t find what Javascript variable name to use to specify the operating system. All HTML pages use the switching code, but any page that is displayed via a Perl script cannot.
I know PHP is your forte; but folks seem to have a lot of knowledge about different scripting languages. Can anyone help me out on this one?
July 12th, 2002 at 8:52 am
I found this page at php.net pretty useful. You can extract whatever info you want from http_user_agent and echo a stylesheet line accordingly (but you’d need to know how everything displayed in http_user_agent).
I found I’m going to have to use this because IE 5.5 displays my stylesheet wacky, while the rest of the current browsers view it fine… here’s the code I’m using:
<?php
if (strstr($_SERVER["HTTP_USER_AGENT"], “MSIE 5.5″)) {
echo ‘<link rel=”stylesheet” type=”text/css” href=”/layout/css/common_ie5.css” />’;
} else {
echo ‘<link rel=”stylesheet” type=”text/css” href=”/layout/css/common.css” />’;
}
?>
July 12th, 2002 at 4:01 pm
Does anyone know what variable Javascript uses to designate the operating system? I know that the browser.name can be set to find out the browser, and perform actions based on that; but I need to know how Javascript recognises the operating system.
July 12th, 2002 at 10:17 pm
Try this.. scroll down to “JAVASCRIPT CODE TO DETECT BROWSER VENDOR, VERSION, AND OPERATING SYSTEM”
August 5th, 2002 at 7:31 pm
Um, your preview button just posted my comment. Let me continue:
3) Create a ’styles.css’ file and put this in it:
@import url(styles0.css); /* for v4 browsers */
@import url(”styles1.css”); /* for v5 */
@import “null?\”\{”;
@import url(”styles2.css”); /* for v6+ and MacIE5+ */
What you’ve got here is a string that screens out buggy browsers. Now, you don’t HAVE to make this many variations of your stylesheet. If you create a single stylesheet for all version 4 AND 5 browsers, you can delete the second line.
Let me know what you think.
August 5th, 2002 at 7:35 pm
Sorry. I got confused. Here’s the entire message I meant to send:
Hi goddess,
I’ve been working out a clean, simple, javascript-free way of doing this and thought I’d share my approach:
1) In your document head, put this:
<link rel=’stylesheet’ type=’text/css’ media=’screen’ href=’styles.css’ />
<script type=’text/javascript’ src=’nn4.js’></script>
2) Make a new file ‘nn4.js’ and add this:
if (document.layers) {
document.write(’<link rel=”stylesheet” type=”text\/css” href=”nn4.css” \/>’);
document.write(”<script type=”text\/javascript”>’);
document.write(’origWidth = innerWidth;’);
document.write(’origHeight = innerHeight;’);
document.write(’function reload() { if (innerWidth != origWidth || innerHeight != origHeight) location.reload(); }’);
document.write(’onResize = reload;’);
document.write(”<\/script>’);
}
Then create your Netscape4-friendly stylesheet and save it as ‘nn4.css’. I put this in a .js file for two reasons: 1- NN4 doesn’t load styles unless javascript is on and 2- the reload-on-resize script is necessary whenever you use absolutely positioned divs in NN4.
3) Create a ’styles.css’ file and put this in it:
@import url(styles0.css); /* for v4 browsers */
@import url(”styles1.css”); /* for v5 */
@import “null?\”\{”;
@import url(”styles2.css”); /* for v6+ and MacIE5+ */
What you’ve got here is a string that screens out buggy browsers. Now, you don’t HAVE to make this many variations of your stylesheet. If you create a single stylesheet for all version 4 AND 5 browsers, you can delete the second line.
Let me know what you think.
p.s. create an empty file called ‘null’ (with no extension) if you want your stylesheets to validate.
September 20th, 2002 at 1:33 pm
How can I get my page to load a different CSS file for the Opera browser?
September 20th, 2002 at 1:50 pm
Here’s a link I just found that might be helpful:
April 29th, 2003 at 8:51 am
This link is helpfull for me.
http://www.digiways.com/articles/php/dyncss/