Entry

Can I link to different style sheets, depending on the user's browser?

Feb 26th, 2002 15:12
Denny De La Haye, Hiroto Sekine, Rey Nuņez, http://www.all.co.nz/word/verbse.htm http://freshmeat.net/projects/yawns/

===== ( Perl solution ) =====
In my YAWNS package, I use the following code to detect which browser is
making the request and then select a stylesheet appropriately (the
stylesheet string is simply inserted into the generated HTML where
appropriate - personally I use HTML::Template, but the same method can
be used with plain CGI.pm code as well).
my $browser	= '100% Standards Compliant'; 	# mozilla/galeon/etc
my $style	= 'styles/default.css';
my $useragent	= '';
$useragent
= $ENV{'HTTP_USER_AGENT'} if $ENV{'HTTP_USER_AGENT'};
$browser = 'Netscape 4'	if $useragent =~ m/Mozilla.?4\./;
$browser = 'MSIE 4'	if $useragent =~ m/MSIE/;
$browser = 'MSIE 5.0'	if $useragent =~ m/MSIE.?5\./;
$browser = 'MSIE 5.5'	if $useragent =~ m/MSIE.?5.?5/;
$browser = 'MSIE 6'	if $useragent =~ m/MSIE.?6\./;
$browser = 'Opera'	if $useragent =~ m/Opera/;
$browser = 'Konqueror'	if $useragent =~ m/Konqueror/;
if ( $browser eq 'Netscape 4' ) {
	# terrible CSS support, need to repeatedly redefine attributes
	$style = 'styles/ns4.css';
} elsif ( ( $browser =~ m/MSIE/ ) 
	or ( $browser eq 'Opera' ) 
	or ( $browser eq 'Konqueror' ) ) {
	# poor CSS support - have to specify absolute sizes for fonts	
	$style = 'styles/ie.css';
}
===== ( JavaScript solution ) =====
This example shows one method of detecting a user's browser and link 
the current document to a corresponding style sheet. This is 
implemented in two parts: the main script which is written as a 
separate .js file, and a calling script written within the HEAD of each 
page that will link to the style sheets.
STEP 1: Copy this code and save it as a separate file, for example, as 
css.js
<!--
if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt
(navigator.appVersion)>= 4 )) {
  document.write('<link rel="stylesheet" type="text/css" 
href="ie45.css">')}
else {
  if (navigator.appName == "Netscape"){
    if (parseInt(navigator.appVersion)>= 5 ){
      document.write('<link rel="stylesheet" type="text/css" 
href="ns6.css">')}
    else {
      document.write('<link rel="stylesheet" type="text/css" 
href="ns4.css">')}
    }
  else {
    document.write('<link rel="stylesheet" type="text/css" 
href="default.css">')}
}
//-->
Note that the above example assumes that you have four style sheets: 
one for IE 4.0 and later, one for Netscape 5.0 and later, one for 
Netsc
ape versions less than 5, and one for the rest. Make sure that 
each <LINK href= ... > in the script points to the proper path and 
filename of your style sheets.
STEP 2: Copy this code into the HEAD of each HTML document that you 
intend to link to the stylesheets. 
<script language="JavaScript" src="css.js"></script>
If you change the name and/or location of the main .js file in Step 1, 
make sure that the <script src= ... > in Step 2 above references the 
correct path and filename of the .js file, or the script will not be 
called and thus not function as intended.
with IE4+: another option as below;
gLNGflag is a global variable to be set "language code" in other 
function.
--------------< source code sample >------------
<script LANGUAGE="JavaScript">
<!--
if (IECheck( 5, "../index.htm" )){
	LNGCheck( "zz", "", "", "" );
}
var lang;
switch(gLNGflag){
	case "ja":
		lang = "jp";
		break;
	case "zt":
		lang = "ct";
		break;
	default:
		lang = "us";
}
var css = "<link REL='stylesheet' TYPE='text/css' HREF='doc/vb7" + lang 
+".css'>";
var sc1 = "<scr" + "ipt LANGUAGE='JavaScript' SRC='doc/vb7whd" + lang 
+ ".js'></scr" + "ipt>";
var sc2 = "<scr" + "ipt LANGUAGE='JavaScript' SRC='doc/vb7chd" + lang 
+ ".js'></scr" + "ipt>";
var sc3 = "<scr" + "ipt LANGUAGE='JavaScript' SRC='doc/vb7ihd" + lang 
+ ".js'></scr" + "ipt>";
var sc4 = "<scr" + "ipt LANGUAGE='JavaScript' SRC='doc/vb7vhd" + lang 
+ ".js'></scr" + "ipt>";
var sc5 = "<scr" + "ipt LANGUAGE='JavaScript' SRC='doc/vb7ltool" + lang 
+ ".js'></scr" + "ipt>";
var sc6 = "<scr" + "ipt LANGUAGE='JavaScript' SRC='doc/vb7wtool" + lang 
+ ".js'></scr" + "ipt>";
var sc7 = "<scr" + "ipt LANGUAGE='JavaScript' SRC='doc/vb7main" + lang 
+ ".js'></scr" + "ipt>";
document.write(css);
document.write(sc1);
document.write(sc2);
document.write(sc3);
document.write(sc4);
document.write(sc5);
document.write(sc6);
document.write(sc7);
// -->
</script>