STYLE SHEETS

Double Vision – Give the Browsers CSS They Can Digest

Some but not all browsers support CSS2. You can deliberately code your website so that users of either kind of browser will see pages that are appropriate for what their browser can handle. Older browsers won't gag, but you will still be able to take advantage of what you can do with CSS2 in the newer browsers. Read on to find out how.

Author Info:

By: Chris Heilmann

Poor Best

Rating:

/ 13

February 22, 2005

TABLE OF CONTENTS:

document.open();
if(navigator.appName == "Netscape"){
           document.write('<link rel="StyleSheet" href="netscape.css" type="text/css">');
}
if (navigator.appName == "Microsoft Internet Explorer") {
           document.write('<link rel="StyleSheet" href="ie.css" type="text/css">')
}
if (navigator.userAgent.indexOf("Opera") != -1){
           document.write('<link rel="StyleSheet" href="ie.css" type="text/css">')
}
document.close();

This not only means that users without Javascript will not get any styles whatsoever – something that happens in Netscape 4 anyway – but it also means that the styles need to be maintained in all those files. Furthermore, browsers that allow the user to mimic others, like Opera, might get a style sheet they cannot display at all. Browser sniffing (http://www.quirksmode.org/js/detect.html) is not future proof, and in most cases it's a waste of time. This also applies to solutions that chose the lesser evil – object detection(http://www.quirksmode.org/js/support.html).

document.open();
if(document.layers){
           document.write('<link rel="StyleSheet" href="netscape.css" type="text/css">')
} else if (document.all && !document.getElementsById){
           document.write('<link rel="StyleSheet" href="ieold.css" type="text/css">')
} else if (document.all && document.getElementsById){
           document.write('<link rel="StyleSheet" href="ienew.css" type="text/css">')
} else if (document.getElementsById){
           document.write('<link rel="StyleSheet" href="ienew.css" type="text/css">')
}
document.close();