The JavaScript Style Sheet facility (JSS) is based on the CSS level 1 capabilities. They are only supported in the version 4.0 Netscape browsers and are now completely deprecated. Netscape 6.0 does not support them at all. This gives rise to some concerns on portability issues.

However, if your web server is capable of recognising the user agent value and serving different content accordingly, you may be able to ensure that JSS style sheets are served only to requesting Netscape 4.0 browsers and that other browsers will be presented with CSS style sheets instead.

The main difference is in the notation used to describe the JSS rules.

There are two ways to call in a JSS defined style sheet, either with the <STYLE> tag, which embeds the style definitions into the page, or with the <LINK> tag, which includes them from an external document.

Creating styles in JavaScript comes down to correctly forming the object model that refers to the style properties of the document object. This is managed by means of a tags object, which is the root of a collection of objects for which the style can be defined as properties. By and large the tags object has a property that corresponds to every style controllable HTML tag. It's fairly easy to guess the likely syntax and give a CSS reference, you can probably figure out the properties of the individual objects. The properties correspond with those attributes of the instances of the tags described in the browser object model (or the DOM if you prefer).

There are some special methods and functions defined for JSS to be used when creating styles. These are:

• margins()

• rgb()

• contextual()

For JavaScript to be able to modify style settings, it needs to be able to read the current values and to be able to write new values into the object properties.

In Netscape 4.0, the absolute and relative style properties apply to positioning of an object. If these are present, the objects are assumed to be in layers. Layers can be controlled very effectively from within JavaScript. they can be moved, sized and have their visibility changed. However there are rendering issues and the effects are complex and hard to control when some styled objects are already rendered on the page. Some tags can have absolute positioning applied directly but it is not portable across minor revison changes of the browser.

MSIE version 4.0 provides dynamic style control. It is improved significantly in version 5.0 and 5.5 and the same DOM based model is built into Netscape 6.0. The styles are available as host objects. You can modify the appearance of styled object in MSIE even after they have already been displayed. Changing the style or position of an object gives you all the capabilities that layers provided in Netscape, and an automatic damage repair redraw is also triggered if necessary when the style of an object is modified.

Warnings:

• JSS comes about because internally Netscape 4.0 converts CSS rules into JavaScript code and executes it as such. That is why you lose styling when you turn off JavaScript for security reasons.

• Netscape decided to make this interface available to the developer and exposed it as JSS. This means there is a conflicting alternative to CSS. It is very unlikely that JSS would be supported in any other browser than Netscape 4.0 given that most browser manufacturers are striving for standards compliance. They will all be supporting CSS2 fully in due course.

• It is therefore recommended that while you may want to experiment with JSS, it is a deprecated item. As such you probably should avoid deploying it in any mission critical projects or using it in new developments.

• MSIE 3.0 does not allow JavaScript access to style properties.

• The JSS functionality is removed from Netscape 6.0.

Example code:

   <STYLE TYPE="text/JavaScript">

   tags.P.borderWidth = 10;

   tags.B.color = red;

   </STYLE>

Cross-references:

Wrox Instant JavaScript - page - 50