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
April 1997
![[Next story]](/sunworldonline/icons/tb-next.gif){kind=icon}
![[Table of Contents]](/sunworldonline/icons/tb-toc.gif){kind=icon}
![[Search]](/sunworldonline/icons/tb-search.gif){kind=icon}
|
|
The dynamic, powerful abilities of JavaScript Style SheetsNetscape marries cascading style sheets with JavaScript. Learn how these documents can be easily updated and modified for every Netscape 4.0 browser display |
April 1997
|
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.
|
|
|
|
|
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:
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!
|
|
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
|
|
|
|
![[(c) Copyright Web Publishing Inc., and IDG Communication company]](/sunworldonline/icons/b-copyright97.gif){kind=icon}
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: