Double Vision – Give the Browsers CSS They Can Digest - The way of the dark side – code forking
(Page 2 of 8 )
One widely used mistake is to bind the style sheet to the browser, rather than its capabilities. Developers use Javascript to determine the browser and write out bespoke style sheets via Javascript:
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();
Next: The way of confusion – browser hacks >>
More Style Sheets Articles
More By Chris Heilmann
