Click on our Sponsors to help Support SunWorld
Webmaster by Chuck Musciano

The dynamic, powerful abilities of JavaScript Style Sheets

Netscape marries cascading style sheets with JavaScript. Learn how these documents can be easily updated and modified for every Netscape 4.0 browser display

SunWorld
April  1997
[Next story]
[Table of Contents]
[Search]
Subscribe to SunWorld, it's free!

Abstract
A final look at style sheets, this time from the perspective of Netscape's JavaScript Style Sheets: more capability, more complexity, and more proprietary (2,000 words)


Mail this
article to
a friend

For two months we've been examining cascading style sheets, a new extension to HTML that provides unprecedented control over the layout and appearance of your documents. In February, we learned how to create style rules that define certain properties of the tags used in your documents. For example, the rule

     H3 { color : blue; font-size : 24pt }
tells the browser that the level 3 headers in your document (defined with the <h3> tag) will be displayed with blue 24 point text. We also covered context-based styles, which control the appearance of tags only when they occur in certain combinations in your document and looked at style classes, which let you name and reuse styles throughout a document collection. For instance,
     OL OL LI { list-style : upper-roman } 
     P.abstract { font-style : italic }
defines two styles. The first causes doubly-nested ordered lists to be numbered using upper-case Roman numerals. The second defines a class of the <p> tag named abstract that will be displayed using an italic font.

In March, we showed how to associate a style with a document in three ways: using an external style sheet, useful for managing styles across an entire document collection; using a document-level style, when you want to create a style for just one document; and using inline styles, which define a style for a single tag in your document. Each method proves useful in certain situations, and taken together, they provide a rich set of tools for managing your documents' styles.

A different kind of style sheet
Now we're going to look at JavaScript Style Sheets. JavaScript Style Sheets (or JSSS, as Netscape likes to abbreviate it) provide all the capabilities of cascading style sheets and add some neat bells and whistles of their own.

Perhaps the biggest difference is the dynamic nature of JSSS. Since JavaScript is interpreted by the browser as your pages are loaded, styles defined using JSSS can be modified and updated depending on the browser and the document being loaded. For instance, it's easy to define your page layout using the actual dimensions of the browser window, an impossible feat using cascading style sheets. A JSSS-based document could also query the browser to determine the characteristics of the client's display and tune the document colors to look good under those conditions. The possibilities are endless and extremely powerful.

The downside is that this is all possible only with Netscape 4.0, currently available as a beta evaluation product. While cascading style sheets are formally defined by the World Wide Web Consortium as a Recommended Standard, JavaScript Style Sheets are defined and controlled by Netscape. It is certainly possible that JSSS will be submitted to a standards body and made into a standard, but the technology is essentially proprietary to Netscape. If you use JSSS, your styles will only work in Netscape 4.0, although other browsers may eventually support JSSS (Internet Explorer was quick to support JavaScript after it was introduced.) Cascading style sheets, in contrast, are partially supported by Internet Explorer 3.0 and will be fully supported by Netscape 4.0 and (presumably) Internet Explorer 4.0.

What to do? This early in the game, it makes sense to learn and use cascading style sheets, and to understand JSSS as a future technology. With that in mind, let's look at JavaScript Style Sheets.


Advertisements

Defining JavaScript styles
JavaScript styles, not surprisingly, use JavaScript syntax to control your document. JavaScript defines an object named tags with members corresponding to every HTML tag. These members, in turn, have members corresponding to the attributes of the tag. Thus, statements like

     tags.H3.color = "blue";
     tags.H3.fontSize = "24pt";
cause all <h3> tags in your document to be displayed in blue, 24 point type, just like our cascading style example, above.

This kind of notation can get lengthy, so JavaScript supports the with statement to address the attributes of a specific object:

     with (tags.H3) {
        color = "blue";
        fontSize = "24pt";
        }
You can set the attributes of all the tags using the special member named all:
     tags.all.color = "green";
JSSS supports contextual selectors just like cascading style sheets, giving you the ability to define styles only for tags nested in certain ways. Our contextual selector example, above, can be rewritten in JSSS as:
     tags.contextual(OL, OL, LI).listStyle = "upper-roman";
The syntax is certainly more obscure, but the functionality is identical to that of cascading style sheets.

JSSS supports style classes that let you create several variations of a single tag and invoke them by name in your document. This is made possible with the special classes object, whose members correspond to all the classes you define for your documents. Earlier, we created a class of the <p> tag named abstract. We can do the same thing in JSSS:

     classes.abstract.P.fontStyle = "italic";
Later, we could say <p class=abstract> to format text using this class.

Now the new stuff
Up to this point, JSSS is little more than a cumbersome syntax that emulates the functionality of cascading style sheets. Fortunately, there are some nice features of JSSS that make that unwieldy syntax worthwhile.

The first extension is somewhat minor but useful nonetheless. JSSS defines, in addition to classes, style ids. An id is nothing more than a label with a style rule attached, but that label can be applied to a tag along with basic styles and a class name. In essence, ids allow two levels of classes to be applied to a tag.

For example, suppose you needed to use the abstract class we defined earlier, but you also need to show the text as red. You could create another class, which is cumbersome, or use an inline style, which is hard to maintain. Or, you could define an id that carries the color property and apply it to the <p> tag as needed. The id is created like this:

     ids.1A.color = "blue";
and is applied to the tag like this:
     <p class=abstract id=1A>
Of course, the 1A id can be applied to any other tag to change its color, too.

Ids may be handy, but the neatest thing about JSSS is its ability to create styles dynamically. This lets you define your document on the fly, after it has arrived at the browser.

Since JSSS styles are simply JavaScript statements, you can use normal JavaScript control structures to select which styles you define. For example,

     with (tags.BODY) 
        if (visual.colorDepth > 2) {
           bgColor = "yellow";
           color = "blue";
           }
        else {
           bgColor = "white";
           color = "black";
           }
causes the document to use blue text on a yellow background if the display supports multiple colors, and black on white text if not.

The preceding example is computed once, when the document is loaded. JSSS also supports styles that are computed each time a tag is used in the document. To implement this, every tag in the tags object has a member named apply. You can set this member to point to a function that defines the tag's style. Each time the tag is used, the function is evaluated, and the style can be changed. Consider this function:

     flip_colors() {
    
        if (color == "red")
           color = "blue";
        else
           color = "red";
     }

     tags.P.apply = flip_colors;
Each time the <p> tag is used, flip_colors() is executed. Notice that the style properties used within the function need not be qualified by the tag name; they are implicitly known to belong to the tag invoking the routine. The routine checks the current color of the tag, flipping between red and blue with each invocation. The net result is that the document has alternating red and blue paragraphs of text. A neat example, but hopefully people will think of more useful things to do with dynamic styles. You'll also want to be careful with your style-setting functions: get too complex and it will take your document forever to render itself in the user's browser.

Using JavaScript styles
JSSS styles are associated with a document exactly like cascading style sheets: as an eternal style sheet, as a document-level style, and as an inline style within a tag.

To reference an external style sheet in your document, include a <link> tag in the document's <head>, like this:

     <link rel=stylehseet type="text/Javascript" href="styles.jss">
This is exactly like a cascading style sheet reference, except that the type attribute is set to text/Javascript instead of text/CSS.

Within your document, you can use the <style> tag in the document's <head> to embed styles right in the document:

     <style type="text/Javascript">
     <!--
     tags.H3.color = "blue";
     -->
     </style>
Again, the only difference between this style and a cascading style sheet style is the type attribute.

Finally, you can use inline styles by adding the style attribute to any tag. The value of the attribute is a snippet of JavaScript that defines the tag's style. To create a red paragraph, for example, just use <p style="color='red';">. Note that this syntax is different from the syntax used in an inline cascading style sheet style. Presumably, the Netscape browser will somehow figure out which style you are trying to control with the attribute.

Life on the bleeding edge
Needless to say, the entire JSSS model is brand new and subject to change at any time. It is only partially implemented in the first beta preview of Netscape 4.0 and may undergo all sorts of changes before the final version of Netscape 4.0 ships later this year.

My goal with this column was only to whet your appetite, not to present a definitive guide to using JavaScript Style Scripts. Although the JSSS syntax leaves a bit to be desired, the range of dynamic styles is compelling. Hopefully, you'll be interested enough to follow the technology on your own, using some of the resources I've catalogued below.

As it stands now (mid-February, when this column was written), the Netscape 4.0 beta preview for Windows 95 and NT supports JSSS but not cascading style sheets. If you are one of those folks forced to use Windows 95 or Windows NT, you can experiment with JSSS. Presumably, another beta may have been released since then, adding more support and reaching more platforms.

To keep current
There are a few documents you can track to stay abreast of changes in the JSSS standards:

JavaScript-Accessible Style Sheets
Until late in 1996, this document gave the most in-depth look at JSSS, also known as dynamic style sheets. More recently, Netscape pulled the original off its site and replaced it with an "under construction" notice. It may be that Netscape is tinkering with the JSSS definition as version 4.0 moves through the beta process. Track this URL to see when a new version of the document appears.

Using JavaScript-Accessible Style Sheets
This set of documents (the URL points to the table of contents) provides a nuts-and-bolts look at using JSSS, without a lot of the background detail that was provided in the other document above. Still, you can infer a lot about how JSSS will work and pick up some examples to try in your browser.

If you come across any other JSSS documents on the Web, drop me a line, and I'll pass them on to my readers.

Next month, I'll share my annual browser usage statistics and updated collection scripts. See you then!


Click on our Sponsors to help Support SunWorld


Resources


About the author
Chuck Musciano has been running Melmac and the HTML Guru Home Page since early 1994, serving up HTML tips and tricks to hundreds of thousands of visitors each month. He's been a beta-tester and contributor to the NCSA httpd project and speaks regularly on the Internet, World Wide Web, and related topics. His book, HTML: The Definitive Guide, is currently available from O'Reilly and Associates. Reach him at chuck musciano@sunworld.com

What did you think of this article?
-Very worth reading
-Worth reading
-Not worth reading
-Too long
-Just right
-Too short
-Too technical
-Just right
-Not technical enough
 
 
 
    

SunWorld
[Table of Contents]
Subscribe to SunWorld, it's free!
[Search]
Feedback
[Next story]
Sun's Site

[(c) Copyright  Web Publishing Inc., and IDG Communication company]

If you have technical problems with this magazine, contact webmaster@sunworld.com

URL: http://www.sunworld.com/swol-04-1997/swol-04-webmaster.html
Last modified: