Preserved Topic: Separate Stylesheets? (Page 1 of 1)

Is there a good way to use different stylesheets for different browsers?

-jiblet

Well, what I often do is create two css documents. One is loaded with the standard...

<link rel="stylesheet" type="text/css" media="all" href="style.css">

The other I import with...

<style type="text/css" media="all">@import "style.css";</style>

Okay, so #1 is the one that doesn't do any crazy layout--mostly typographical treatments, minor display things, but nothing above CSS-1. The second, since it is ignored through the importing command by v4 browsers, does more intensive stuff, such as background treatments and such--the stuff that the site would look OK without, but would crash horribly if rendered in a v4 browser. Sometimes I'll double up styles, making sure to @import the 2nd stylesheet in the code AFTER the first is imported, so I can re-write certain things to fit more with the style I introduce with the @import.

And if that made sense, kudos.

thanks for the clarification on the use of @import - very helpful

We use JS to differentiate between versions.

It helps since there can be OS specific issues too.

/************************ BROWSER CHECK ***************************************/
function Browser(){
this.ver = navigator.appVersion;
this.app = navigator.appName;
this.agt = navigator.userAgent;
this.mac = (this.agt.indexOf("Mac")>-1)?1:0;
this.win = (this.agt.indexOf("Win")>-1)?1:0;

this.nn = (this.app == "Netscape")?1:0;
this.ie = (this.app.indexOf("Microsoft")>-1)?1:0;
this.ie4win = ((this.ie) && (this.win) && (this.agt.indexOf('MSIE 4')>-1))?1:0;
this.ns6mac = ((this.mac) && (this.nn) && (parseInt(this.ver)>=4))?1:0;
return this

}
b = new Browser()

/*************************** CSS WRITER ********************************/

var defaultCSS = "<LINK REL='stylesheet' TYPE='text/css' HREF='/CDA/COMP/FEDERAL/stylesheet/0,23043,,00.css'>";
var nsCSS = "<LINK REL='stylesheet' TYPE='text/css' HREF='/CDA/COMP/FEDERAL/ns_css/0,23146,,00.css'>";
var nsMacCSS = "<LINK REL='stylesheet' TYPE='text/css' HREF='/CDA/COMP/FEDERAL/ns6mac_css/0,23145,,00.css'>";
css = (b.ns6mac)?nsMacCSS b.nn)?nsCSS:defaultCSS;
document.write(css);



Walking the Earth like Kane

You can use PHP to find out which web browser & OS (for example) is used and add appropriate stylesheet via <LINK> tag...

Hmm, thanks everyone. That's an interesting idea Max, and it might actually be the best since my website is the only one on this machine, I'm sure my admin would let me parse regular .html files for PHP so I wouldn't even need to change the filenames...

heh, i love it when slimies show up in code examples

-jiblet

http://www.gurusnetwork.com/tutorials/approval/phpbrowserdetector.html might help with the actual browser detection in PHP

That script only detects Shitscape and IE. There's no detection for Gecko, Opera, Konqueror, etc. (to name just a few)

That version yes, it's a bit better now (only not posted at gurus yet) with detection of Opera 5 plus Win/mac/Linux/Unix os.

Sure, you could do it something like this (not mine, just a cut 'n paste):
<BLOCKQUOTE><FONT face="Verdana, Arial">code:</font><HR><pre>
if((ereg("Nav", getenv("HTTP_USER_AGENT")))

That code is very inefficient. It would be much better like this:

<?php

// Written by mr.maX, http://www.max.co.yu/
// Unauthorized public reproduction of this source code is strictly prohibited!

if (preg_match("/Gecko/i", getenv(HTTP_USER_AGENT)))
&nbsp;&nbsp;&nbsp;&nbsp;$browser = "Gecko";
elseif (preg_match("/(Nav

I agree on the efficiency mrMax, that code I posted was just an example and not mine.
The tutorial over at Gurus was first written back in -99 and the code was originally for a specific task, then I picked it apart and tried to explain it since I had a lot of questions on it. As I said, it's been rewritten now to be of more general use for other people. And yes, there is room for a lot of improvement in that code too.

My point here is not about the actual code, but more a question of where you as a webdeveloper should draw the line on what different combinations of browsers/Os you should develop for.

Every browser have their own intricate problems that needs to be coded for, I don't claim to know them all, not by a long shot, but I feel that you need to draw the line somewhere. For me, that line goes somewhere between older browsers than version 4 and those that support DHTML in a reasonable way.

Sure, there certainly is more browsers out there that support DHTML than IE, NS and Opera, but what's their market share, and what browsers does the target group for the site use? That is what I asked myself as I started to do the tutorial, to detect everything was never the intention.

On a more personal note:
(and just tell me if I'm off the mark here)
Max, I know that we had a clash a bit back when I used a script that you posted in a thread and I forgot to include the credits. I just hope you didn't feel the need to include this line

quote:

---

// Unauthorized public reproduction of this source code is strictly prohibited!

---

in the script you posted just now because of that incident.
That incident was a mistake, nothing else!
Should you like to discuss that further please mail me at dms@dmsproject.com so we can clear it up.
Or, if I have misunderstood this completly, I'm sorry, I just had to ask.

/Dan

Hey Max! That's an awesome script, and one I'd like to borrow from you (slightly modified, I plan to use it inside my javascript code, and output the bits I need/want into Javascript format. I'll then call the external Javascript file, but instead of .JS i'll calla .PHP file full of code, which means it can get cached.) Say, do you think you'd be willing to let me re-distribute this script on my new site? Full credits of course, and backlinks, 'natch. I was just going to write my version of that script tomorrow, and now I don't *wanna*!!! You could be my first guest-zniplet!

Your pal, -doc-

Plus, we could post it online at Gurus Network. Full credit, of course.

Doc, you can use & re-distirbute my code from above. Just e-mail me when you finish the "end-product", so that I can see my code in action, heh...

Pugzly, you can post it on Gurus Network if you want. The e-mail bit from above goes for this, too...



[This message has been edited by mr.maX (edited 08-23-2001).]

Coolness, This'll rock. I'm thinking offering two different browser detect methods, one for just the basic grouping of families, which will check things based on what functions they know (good for most jobs), and the other of full Browser detection, with details. (I'm thinking maybe of another between these, answering those two critical questions, "are you Mac?" and/or "are you Opera?" Both have minor tweaks needed to be made to avoid errors.)

Your pal, -doc-

Hey DOC, I just found this huge list of possible HTTP_USER_AGENT strings that may come in handy for your progect:
http://www.htmlcompendium.org/reference-notes/7agent.htm

Actualy, I've been needing a script like this for a couple of sites I've been working on recently but I didn't think the scripts above were accurate enough or in some cases too specific. So I wrote my own:


<?php

// Script written by Cameron Owen (cameron@whatever.net.au)
// Some inital ideas for this script were blantly stolen
// from mr.Max, http://www.max.co.yu/

// Comatability
$compatVer = eregi_replace("^([a-zA-Z]+)[/ ]([.0-9]+).*", "\\1 \\2", $HTTP_USER_AGENT);

// BROWSER DETECION
// Gecko
if (eregi ("Gecko", $HTTP_USER_AGENT)) {
$browser = eregi_replace("^[a-zA-Z]+[/ ]([.0-9]+).*", "Gecko \\1", $HTTP_USER_AGENT);
// Netscape
} else if (eregi ("Nav

All of this code is making me diiiiizzzzzzy.

Ah well, back to the office.

I see dead people..........................................due to the fact that I am an undertaker.

Yow, made me dizzy, too! Max, I used a SEVERELY trimmed down version of your script to check for older netscape, and include a different file in that case, here's the script I used...

<?php
// Written by mr.maX, http://www.max.co.yu/
// Unauthorized public reproduction of this source code is strictly prohibited!

if (preg_match("/(Nav

Doc, you should also exclude Opera and optionally Konqueror (part of KDE2 for *nix), because old divs will be added in those browsers with your current code. Also, Gecko refers to Mozilla/NN6 and it should be excluded like you already did. Anyway, the final code should look something like this:

if (preg_match("/(Nav