CSS filtering using Javascript

Almost all CSS filtering performed by Javascript uses browser detection (or browser detection masquerading as object detection (which is detecting specific objects with the understanding that this particular combination of objects is supported under a particular browser)). I've written a browser detection script and the examples in this page use the syntax provided by that script (though it's pretty easy to see what is going on here without having familiarity with the script). My script uses the user-agent header supplied by the visiting browser to determine it's identity. Because the user-agent header can be modified or spoofed, some people aren't too comfortable with this method. An alternate method uses object detection Either way, you determine what the current browser is and then feed it particular style rules using Javascript.

Using document.write() to <link> .css Files

This is perhaps one of the first mechanisms used to feed different css to different browsers. Todd Fahrner was one of the first to propose something like this back in 1997. The script would always appear in the head of the document and would run at load time. A browser detect would be used and, depending on the browser, one of several .css files would be loaded by dynamically writing a <link> tag to the page.

In some versions of NS4.x, though, using code like this would introduce a mysterious newline into the source delivered to the browser. If the newline occured in the middle of a tag or attribute name, the page display could be badly affected. A reload caused the newline to disappear and everything would be ok. Usually, the newline would occur at a specific number of characters into the document so that, by adding or removing whitespace, you could get it to fall where no damage would be done. But maintenance, particularly on sites with dynamic content, would be a pain.

Sample Code

if (browser.isNS4x == true) {
   document.write('<link rel="stylesheet" type="text/css" href="ns4.css">');
else {
   document.write('<link rel="stylesheet" type="text/css" href="advanced.css">');

JavaScript Style Sheets (JSSS)

JavaScript Style Sheets were only ever supported by NS4.x as a way of accessing style information from Javascript (because NS4.x didn't support the DOM). Using JSSS you could also change CSS values at load time. You have access to values set on simple tag selectors (like p {} or h2 {} but not p em {}), class selectors, and id selectors.

In the days when I used CSS sparingly and stuck to those properties that I knew wouldn't cause NS4.x to spaz, our major concern was the fact that in Windows, NS4.x made font sizes one pixel too small. To correct this, I would use JSSS to reset the font size on all selectors, classes, and ids to a slightly larger font size than that specified in the stylesheet. Of course, this meant the Javascript would have to come after the stylesheet on the page (otherwise, the stylesheet would over-write the JSSS styles).

The example below uses browser detection but could be written to use object detection instead (detecting document.tags which would only be available on JSSS-supporting browsers).

Sample Code

if (browser.isNS4x == true) {
   // Tag selectors
   document.tags.body.fontSize = '11px';
   document.tags.td.fontSize = '11px';
   document.tags.th.fontSize = '11px';
   document.tags.p.fontSize = '11px';
   // Class selectors
   document.classes.someClass.all.fontSize = '11px';
   // Id selectors
   document.ids.someId.fontSize = '11px';

Conditional Comments

Conditional Comments were created somewhat independently by Microsoft and Netscape to allow conditional embedding of content in a page. Both forms of conditional comments use the HTML comment syntax to hide the comment (and sometimes the conditionally embedded content) from other browsers. Though conditional comments use Javascript-like syntax, they can't really be considered part of Javascript. For this reason and because they use HTML comment syntax, I have included them with the HTML filters. Because their support and syntax are different, I have created separate summaries for IE Conditional Comments and Netscape 4.x Conditional Comments.

Using the DOM

The best way to work with CSS from Javascript is to use the DOM. You can disable or remove existing stylesheets, add new stylesheets, make existing <link> tags point to different .css files, add or remove rules, add or remove declarations, change classes or styles on existing elements, whatever you like. But there is a catch: the browsers you want to manipulate styles for must support the DOM methods needed to do the manipulation you want. So instead of doing browser detection, it would be better to do object detection on the DOM objects you want to manipulate. The DOM is a huge topic and I'm not going to tackle it here. Instead, I direct readers to an article on Manipulating CSS using the W3C DOM and Peter-Paul Koch's DOM Compatibility Chart for CSS.

More about CSS Filters