HTML..XHTML.The.Definitive.Guide..5th.Ed.1002002 [Electronic resources] نسخه متنی

12.4 JavaScript Style Sheets (Antiquated)

Much of a browser's
work is manipulating the display, and much of its display code
already has been exposed for JavaScripting. So it seemed only
natural, perhaps even relatively easy, for the developers at Netscape
to implement JavaScript Style Sheets ( JSS). Based on the
W3C-recommended Cascading Style Sheet (CSS) model, outlined in Chapter 8, this alternative document style technology
lets you prescribe display properties for all the various HTML
elements, either inline as tag attributes, at the document level, or
for an entire document collection.

JSS is a Netscape invention. In fact, for a short time, Netscape
appeared ready to eschew the CSS methodology, which Internet Explorer
already had implemented, and use JSS exclusively for HTML document
designers with its then-current browser, Navigator 4. In the end,
Netscape supported both JSS and CSS technologies. Today, Netscape 6
eschews support for JSS entirely in favor of the standard CSS2. At
this point, CSS should be seen as Netscape's
long-term direction.

We are strong proponents of reasonable standards, and now that the
CSS2 model is fully supported in HTML 4 and XHTML, we
can't recommend that you use anything but
CSS-standard style sheets. Evidently, Netscape now agrees with us on
this point.

We thoroughly discuss the concepts and ideas behind style
sheets specifically, Cascading Style Sheets in Chapter 8, so we won't repeat ourselves
here. Rather, we address only how to create and manipulate styles
with JavaScript (purely for historical reasons, since no current
browser supports them). Before forging ahead in this section, we
recommend that you first absorb the information in Chapter 8.

12.4.1 JavaScript Style Sheet Syntax

Netscape Versions 4 and earlier implement JSS by extending several
existing HTML tags and defining a few objects that store your
document's styles. Netscape 6 no longer supports
JSS.

12.4.1.1 External, document-level, and inline JSS

As
with CSS, you can reference and load external JSS files with the
<link> tag. For example:

<link href="/image/library/english/10232_styles.js" rel=stylesheet type=text/JavaScript>

The only real difference between this tag and the one for a CSS
external style sheet is that the type attribute of
the <link> tag is set to
text/JavaScript instead of
text/CSS. The referenced file,
/image/library/english/10232_styles.js, contains JavaScript statements that
define styles and classes that Netscape then uses to control display
of the current document.

Document-level JSS is defined within a
<style> tag in the
<head> of the document, just like with CSS.
Again, there is only one real difference: the type
attribute of the <style> tag is set to
text/JavaScript instead of
text/CSS.

The contents of the <style> tag for JSS are
quite different from those for CSS, however. For example:

<style type=text/JavaScript>
<!--
tags.BODY.marginLeft = "20px";
tags.P.fontWeight = "bold";
// -->
</style>

First, notice that we use the standard JavaScript and HTML comments
to surround our JSS definitions, preventing noncompliant browsers
from processing them as HTML content. Also notice that the syntax of
the style definition is that of JavaScript, where letter case, among
other things, does make a difference.

You associate
inline
JavaScript-based style rules with a specific tag using the
style attribute, just like with CSS inline styles.
The value of the attribute is a list of JSS assignments, separated by
semicolons. For example:

<p style="color = 'green'; fontWeight = 'bold'">

creates a green, bold-faced text paragraph. Notice first that you
need to enclose inline style values within single quotation marks,
not double quotation marks, as you might use for document-level and
external JSS styles. This is reasonable, since the
style attribute value itself must be enclosed in
double quotation marks.

Also note that inline JSS definitions use only the property name, not
the containing tag object that owns the property. This makes sense,
since inline JSS styles affect only the current tag, not all
instances of the tag.

12.4.1.2 JSS values

In general, all of the values you may use for CSS may also be used in
JSS definitions. For keyword, length, and percentage values, simply
enclose the value in quotes and use it as you would any string value
in JavaScript. Thus, the CSS value bold becomes
"bold" or 'bold' for JSS
document-level or inline styles, respectively;
12pt in CSS becomes '12pt' or
"12pt" in JSS.

Specify color
values as the color name or a hexadecimal color value, enclosed in
single or double quotes. The CSS decimal RGB notation is not
supported in JSS.

JSS URL values are strings containing the desired URL. Thus, the CSS
URL value url(http://www.kumquat.com) becomes
'http://www.kumquat.com' for a JSS inline style,
or "http://www.kumquat.com" at the document level.

One unique power of JSS is that any value can be computed dynamically
when the document is processed by the browser. Instead of statically
specifying the font size, for example, you can compute it on the fly:

tags.P.fontSize = favorite_font_size(  );

We assume that the JavaScript function favorite_font_size( ) somehow determines the desired
font size and returns a
string value containing that size. This, in turn, is assigned to the
fontSize property for the
<p> tag, defining the font size for all
paragraphs in the document.

12.4.1.3 Defining styles for tags

JavaScript defines a document property called
tags that contains the style properties
for all HTML tags. To define a style for a tag, simply set the
appropriate property of the desired style property within the
tag property of the document
object. For example:

document.tags.P.fontSize = '12pt';
document.tags.H2.color = 'blue';

These two JSS definitions set the font size for the
<p> tag to 12 points and render all
<h2> tags in blue. The equivalent CSS
definitions are:

p {font-size : 12pt}
h2 {color : blue}

Since the tags property always refers to the
current document, you may omit document from any
JSS tag style definition. We could have written the previous two
styles as:

tags.P.fontSize = '12pt';
tags.H2.color = 'blue';

Moreover, as we mentioned previously, you may omit the tag name, as
well as the document and tags
properties for inline JSS using the style
attribute.

Capitalization and case are
significant in JSS. The tag names within the tags
property must always be fully capitalized. The embedded capital
letters within the tag properties are significant: any deviation from
the exact lettering produces an error, and Netscape
won't honor your JSS declaration. All of the
following JSS definitions are invalid, though the reasons are not
overly apparent:

tags.p.fontsize = '12pt';
tags.Body.Color = 'blue';
tags.P.COLOR = 'red';

The correct versions are:

tags.P.fontSize = '12pt';
tags.BODY.color = 'blue';
tags.P.color = 'red';

It can be very tedious to specify a number of properties for a single
tag, so you can take advantage of the JavaScript
with statement to reduce your typing burden. These
styles:

tags.P.fontSize = '14pt';
tags.P.color = 'blue';
tags.P.fontWeight = 'bold';
tags.P.leftMargin = '20%';

can more easily be written as:

with (tags.P) {
fontSize = '14pt';
color = 'blue';
fontWeight = 'bold';
leftMargin = '20%';
}

You can apply similar styles to diverse tags just as easily:

with (tags.P, tags.LI, tags.H1) {
fontSize = '14pt';
color = 'blue';
fontWeight = 'bold';
leftMargin = '20%';
}

12.4.1.4 Defining style classes

Like CSS, JSS lets you target styles for
specific ways that a tag can be used in your document. JSS uses the
classesproperty to define
separate styles for the same tag. There are no predefined properties
within the classes property; instead, any property
you reference is defined as a class to be used by the current
document. For example:

classes.bold.P.fontWeight = 'bold';
with (classes.abstract.P) {
leftMargin = '20pt';
rightMargin = '20pt';
fontStyle = 'italic';
textAlign = 'justify';
}

The first style defines a class of the <p>
tag named bold whose font weight is set to bold.
The next style uses the with statement to create a
class of the <p> tag named
abstract with the specified properties. The
equivalent CSS rules would be:

P.bold {font-weight : bold}
P.abstract {left-margin : 20pt;
right-margin : 20pt;
font-style : italic;
text-align : justify
}

Once defined, use a JSS class just like any CSS class: with the
class attribute and the class name.

Like CSS, JSS also lets you define a class without defining the tag
that uses the class. This lets you define generic classes that you
can later apply to any tag. To create a generic style class in JSS,
use the special tag property all:

classes.green.all.color = "green";

You can then add class="green" to any tag to have
Netscape render its contents in green. The equivalent CSS is:

.green {color : green}

12.4.1.5 Using contextual styles

One of the most powerful aspects of CSS is its
contextual style capability, wherein the
browser applies a style to tags only if they appear in the document
in a certain nesting. JSS supports contextual styles as well, through
the special contextual( ) method within the
tags property. The parameters to this method are
the tags and classes that define the context in which Netscape
applies the style. For example:

tags.contextual(tags.UL, tags.UL, tags.LI).listStyleType = 'disc';

defines a context wherein the elements (tags.LI)
of an unordered list nested within another unordered list
(tags.UL, tags.UL) use the disc
as their bullet symbol. The CSS equivalent is:

ul ul li {list-style-type : disc}

You can mix tags and classes in the contextual( )
method. For instance:

tags.contextual(classes.abstract.P, tags.EM).color = 'red';

tells the browser to display in red <em>
tags that appear within paragraphs that are of the
abstract class. The CSS equivalent is:

p.abstract em {color : red}

Since the tags object is unambiguously included
within the contextual( ) method, you may omit it
from the definition. Hence, our nested list example may be rewritten
as:

tags.contextual(UL, UL, LI).listStyleType = 'disc';

12.4.2 JavaScript Style Sheet Properties

A subset of the CSS style
properties are supported in JSS. The JSS style properties, their CSS
equivalents, and the sections in which those properties are fully
documented are shown in Table 12-2.

Table 12-2. JSS properties and CSS equivalents
JSS property	CSS property	See section
`align`	`float`	Section 8.4.7.9
`backgroundImage`	`background-image`	Section 8.4.5.3
`backgroundColor`	`background-color`	Section 8.4.5.2
`borderBottomWidth`	`border-bottom-width`	Section 8.4.7.4
`borderLeftWidth`	`border-left-width`	Section 8.4.7.4
`borderRightWidth`	`border-right-width`	Section 8.4.7.4
`borderStyle`	`border-style`	Section 8.4.7.5
`borderTopWidth`	`border-top-width`	Section 8.4.7.4
`clear`	`clear`	Section 8.4.7.7
`display`	`display`	Section 8.4.10.1
`fontSize`	`font-size`	Section 8.4.3.2.
`fontStyle`	`font-style`	Section 8.4.3.5
`height`	`height`	Section 8.4.7.10
`lineHeight`	`line-height`	Section 8.4.6.2
`listStyleType`	`list-style-type`	Section 8.4.8.3
`marginBottom`	`margin-bottom`	Section 8.4.7.11
`marginLeft`	`margin-left`	Section 8.4.7.11
`marginRight`	`margin-right`	Section 8.4.7.11
`marginTop`	`margin-top`	Section 8.4.7.11
`paddingBottom`	`padding-bottom`	Section 8.4.7.12
`paddingLeft`	`padding-left`	Section 8.4.7.12
`paddingRight`	`padding-right`	Section 8.4.7.12
`paddingTop`	`padding-top`	Section 8.4.7.12
`textDecoration`	`text-decoration`	Section 8.4.6.4
`textTransform`	`text-transform`	Section 8.4.6.7
`textAlign`	`text-align`	Section 8.4.6.3
`textIndent`	`text-indent`	Section 8.4.6.5
`verticalAlign`	`vertical-align`	Section 8.4.6.7
`whiteSpace`	`white-space`	Section 8.4.10.2
`width`	`width`	Section 8.4.7.16

JSS also defines three methods that allow you to define margins,
padding, and border widths within a single style property. The three
methods, margins( ), paddings( ), and borderWidths( ), accept four
parameters, corresponding to the top, right, bottom, and left margin,
padding, or border width, respectively. Unlike their CSS counterparts
(margin, discussed in Section 8.4.7.11; padding, discussed in
Section 8.4.7.12; and
border-width, discussed in Section 8.4.7.4), these JSS methods require that you always
specify all four parameters. There is no shorthand way in JSS to set
multiple margins, paddings, or border widths with a single value.

HTML..XHTML.The.Definitive.Guide..5th.Ed.1002002 [Electronic resources] نسخه متنی

فارسی

کردی

العربیه

اردو

Türkçe

Русский

English

Français

کانال فیلم من

تبیان من

فایلهای من

کتابخانه من

پنل پیامکی

وبلاگ من

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی