Cross Browser Issues: CSS Hacks Explained, Tips, Tricks and Fixes - The Use of JavaScript and CSS
(Page 2 of 5 )
There have been some coders that have found a way to incorporate JavaScript into CSS in order to avoid using hacks for browser compatibility. While this may sound great, there are still several browsers that don’t support JavaScript in the CSS files, like Firefox, Opera, and Netscape. Fortunately, most of those browsers don’t need to support the JavaScript in the CSS, since the modern versions of them handle CSS rather well. It’s usually IE you have to worry about, but you are still going to run into a problem for those who disable JavaScript in their browsers.
Still, the following example demonstrates the use of JavaScript in an external style sheet:
document.tags.H1.color = "blue"
document.tags.H1.fontSize = "20pt";
document.tags.H2.textAlign = "left"; |
This method isn’t new, however. It is really a JavaScript Style Sheet, or JSSS, which was actually submitted to the W3C in 1996 by Netscape as a method of offering an alternative to CSS, which at that time wasn’t widely accepted. It has severe limitations as far as positioning, but other features like dynamic calculations and conditional processing could be pretty powerful. JSSS is no longer supported in Netscape 6 and higher. JSSS style sheets may also seem less friendly than CSS style sheets to users without programming backgrounds.
Multiple Style Sheets for Multiple Browsers
While it may be your choice to only offer a single style sheet for all browsers, you may decide you wish to serve a separate style sheet for each type of browser, especially due to the vast differences in the way browsers support CSS. In this case, you’ll need a way to detect the visitor’s browser type and version, and then show the correct style sheet based on the results.
A simple JavaScript script can detect a browser type and version, and then choose the style sheet that was written for that browser:
<script language="JavaScript"><!-- version=parseInt(navigator.appVersion); if (navigator.appVersion.indexOf('5.')>-1){ version=5 }; if (navigator.appVersion.indexOf('6.')>-1){ version=6 }; if (navigator.appVersion.indexOf('7.')>-1){ version=7 }; browser='OTHER'; if (navigator.appName=='Netscape'){ browser='NS'+version; } if (navigator.appName=='Microsoft Internet Explorer'){ browser='MSIE'+version; } if (navigator.appVersion.indexOf('MSIE 4')>0) { browser='MSIE4'; } if(browser == 'NS5'){ browser='NS6' }; //Internet Explorer if (browser=='MSIE4') { document.write('<link rel="stylesheet" type="text/css" href="/css/msie4.css">'); } if (browser=='MSIE5') { document.write('<link rel="stylesheet" type="text/css" href="/css/msie5.css">'); } if (browser=='MSIE6') { document.write('<link rel="stylesheet" type="text/css" href="/css/msie6.css">'); } //Netscape if (browser=='NS4') { document.write('<link rel="stylesheet" type="text/css" href="/css/nn4.css">'); } if (browser=='NS6') { document.write('<link rel="stylesheet" type="text/css" href="/css/nn6.css">'); } if (browser=='NS7') { document.write('<link rel="stylesheet" type="text/css" href="/css/nn7.css">'); } //everyone else if (browser=='OTHER') { document.write('<link rel="stylesheet" type="text/css" href="/css/other.css">'); } // --></script> |
Obviously, you will have to create a separate style sheet for each browser in your script.
Next: Hiding CSS from Buggy Browsers >>
More Style Sheets Articles
More By Jennifer Sullivan Cassidy
/ 17 
