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,

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,

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:

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:

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:

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.

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.