Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Therefore, to set a background color for a given class of yellow using JavaScript in Netscape Navigator, you would do something like the following:

<SCRIPT LANGUAGE=“JavaScript”>
document.classes.bgyellow.all.color = “yellow”;
</SCRIPT>

In Internet Explorer, you can create a named style and then use the styleSheets.addRule method, as in

<STYLE ID=“iess” TYPE=“text/css”></STYLE>
<SCRIPT LANGUAGE=“JavaScript”>
document.styleSheets[“iess”].addRule(“.bgyellow”,“background-color: yellow”);
</SCRIPT>

Therefore, doing this in a cross-browser compatible format would give (assuming the Ultimate JavaScript Client Sniffer discussed earlier in this chapter is also included)

<STYLE ID=“iess” TYPE=“text/css”></STYLE>
<SCRIPT LANGUAGE=“JavaScript”>
if (is.nav4up)
   document.classes.bgyellow.all.color = “yellow”;
if (is.ie4up)
   document.styleSheets[“iess”].addRule(“.bgyellow”,“background-color: yellow”);
</SCRIPT>

To do this for all types of style sheet rules, you need to know the Netscape JavaScript syntax for specifying them. This is given in Table 27.1.

CSS1 Properties Code Generator

To simplify the process of generating cross-browser code for implementing CSS1 Style sheet properties, Netscape has developed a code generator that can be found at http://developer.netscape.com/docs/technote/dynhtml/css1tojs/css1tojs.html (see Figure 27.3). You can either use the code generator right off the Netscape site or download it and use it locally.

FIGURE 27.3  Netscape’s CSS1 Properties Code Generator simplifies the task of preparing cross-browser style sheet code.

To use the code generator, you have to enter the style sheet tag names, classes, and IDs that you plan to use, and hit the Generate Code button. For the example shown in Figure 27.4, it will generate the following code, which you can then cut and paste into your HTML document:

<!-- DO NOT DELETE: this empty style sheet element becomes the
     style sheet to which CSS1 rules are added in IE4+. -->
<STYLE ID=“ietssxyz” TYPE=“text/css”></STYLE>

<SCRIPT LANGUAGE=“JavaScript1.2”><!--
var pFontSize;
if (screen.width < 700)  pFontSize=“22pt”;
else if (screen.width < 900)  pFontSize=“28pt”;
else pFontSize=“36pt”;

var agt=navigator.userAgent.toLowerCase();
if ( (parseInt(navigator.appVersion)>=4) &&
     (agt.indexOf(‘mozilla’)!=-1) && (agt.indexOf(‘spoofer’)==-1)
               && (agt.indexOf(‘compatible’) == -1) ) {
document.tags.H1.color=“red”;
document.tags.P.fontSize=pFontSize;
document.ids.id1.color=“green”;
document.classes.classa.all.color=“blue”;
document.classes.classb.P.color=“fuchsia”;
document.contextual(document.ids.id2, document.classes.classc.P,
document.tags.B).color=“silver”;
}
else if ( (parseInt(navigator.appVersion)>=4) &&
     (agt.indexOf(‘msie’) != -1) ) {
document.styleSheets[“ietssxyz”].addRule (“H1”, “color:red”);
document.styleSheets[“ietssxyz”].addRule (“P”, “font-size:” + pFontSize);
document.styleSheets[“ietssxyz”].addRule (“#id1”, “color:green”);
document.styleSheets[“ietssxyz”].addRule (“.classa”, “color:blue”);
document.styleSheets[“ietssxyz”].addRule (“P.classb”, “color:fuchsia”);
document.styleSheets[“ietssxyz”].addRule (“#id2 P.classc B”, “color:silver”);
}
//--></SCRIPT>

FIGURE 27.4  The CSS1 Properties Code Generator is ideal for pages that determine style sheet properties dynamically at load time.

Background Colors

Listing 27.1 shows an example of one particular difference between how Netscape Navigator and Microsoft Internet Explorer render the background color style sheet property, as well as two workarounds for forcing compatible behavior. As shown in the first “Welcome!!!” line of Figures 27.5 and 27.6, when a background color is attached using the STYLE attribute of the <P> container tag with

<P STYLE=“background-color: yellow”>Welcome!!!</P>

then Navigator only puts the color behind the text, but Internet Explorer extends the color to the left margin.