SELFHTML/Quickbar Dynamisches HTML Die Ansätze von Microsoft und Netscape

| ## JSSS JavaScript Style-Sheets (Netscape)
| Aufgaben von JavaScript Style-Sheets (JSSS) JSSS Style-Sheets einbinden HTML-Tags mit JSSS Style-Sheets formatieren Klassen mit JSSS Style-Sheets definieren Unabhängige Formate mit JSSS Style-Sheets definieren Formate für verschachtelte HTML-Tags mit JSSS Style-Sheets definieren JSSS-Formate innerhalb von HTML-Tags definieren JSSS Style-Sheets und CSS Style-Sheets kombinieren

## Aufgaben von JavaScript Style-Sheets (JSSS)

Wundern Sie sich nicht, wenn in den Anzeigebeispielen zu dieser Seite noch nichts "dynamisch" ist. Hier wird lediglich eine Variante zum Definieren von Style-Sheets vorgestellt, die Netscape-spezifisch ist. Es handelt sich um Style-Sheet-Definitionen mit Hilfe von JavaScript.

JSSS bedeutet "JavaScript Style Sheets". Die Idee dahinter klingt logisch. Wenn man mit JavaScript dynamisch auf Formatierungen zugreifen können soll, ist es sinnvoll, die Formatierungen gleich so zu definieren, daß sie Eigenschaften eines JavaScript-Objekts sind. Deshalb werden die JavaScript-basierten Style-Sheets gerne im Zusammenhang mit Dynamischem HTML bei Netscape behandelt. Auch in dieser Dokumentation ist das so. Erwarten Sie aber keine weiterführenden Zusammenhänge. Der JSSS-Ansatz von Netscape steht etwas im luftleeren Raum. Für Dynamisches Positionieren mit Netscape, wie es mit dem Netscape-Browser in der Version 4.x machbar ist, spielt JSSS keine besondere Rolle.

In der JSSS-Syntax gibt es beispielsweise Anweisungen wie `tags.H1.color = "blue"`. Eine solche Notationsweise müssen Sie so lesen: es gibt ein JavaScript-Objekt `tags`. Unterhalb dieses Objekts liegen alle verfügbaren HTML-Tags. `H1` ist beispielsweise so ein HTML-Tag. Deshalb darf es, durch einen Punkt getrennt, hinter `tags` notiert werden. Eine Angabe wie `tags.H1.color` ist also genau so zu lesen wie beispielsweise `window.document.images.src`. Beides ist JavaScript-Syntax zum Ansprechen von Objekteigenschaften. Näheres zu diesem Thema finden Sie im Abschnitt über Objekte, Eigenschaften und Methoden im JavaScript-Teil.

## JSSS Style-Sheets einbinden

Sie können JSSS Style-Sheets auf zwei Arten in HTML einbinden: entweder in der HTML-Datei selbst im Dateikopf, oder als externe Datei, in der die Sty-Sheet-Definitionen stehen.

### Beispiel (JSSS-Bereich in Datei definieren):

    <head>
    <style type="text/javascript">
      ... Hier folgen die JSSS Style-Sheet-Definitionen ...
    </style>
    href="formate.htm">
    </head>

### Erläuterung:

Mit `<style type="text/javascript">` definieren Sie innerhalb einer HTML-Datei einen Bereich, in dem Sie JSSS Style-Sheet-Angaben machen können (style = Stil, Format). Es handelt sich um den gleichen Befehl wie beim Einbinden von CSS Style-Sheets. Der einzige Unterschied ist, daß als Typ `"text/javascript"` angegeben wird. Dadurch wird dieser Bereich nur von Netscape ab 4.x ausgelesen, nicht vom MS Internet Explorer.

### Beispiel (JSSS-Angaben aus externer Datei einbinden):

    <head>
    <link rel=stylesheet type="text/javascript" href="formate.htm">
    </head>

### Erläuterung:

Im Dateikopf einer HTML-Datei können Sie mit einem HTML-Befehl des Typs `<link...>` eine Datei referenzieren, die Style-Sheet-Angaben enthält (link = Verweis). Es handelt sich um den gleichen Befehl wie für CSS Style-Sheets in separater Datei. Der einzige Unterschied ist, daß als Typ `"text/javascript"` angegeben wird. Die Datei, in der die Formate definiert werden, wird im Beispiel als HTML-Datei eingebunden. Notieren Sie dazu die Angabe `href=` und dahinter, in Anführungszeichen, den Dateinamen. Dabei sind auch relative Pfadnamen oder absolute URL-Adressen erlaubt. Die Datei sollte nichts anderes enthalten als gültige Style-Sheet-Definitionen nach JSSS-Syntax.

## HTML-Tags mit JSSS Style-Sheets formatieren

Anzeigebeispiel: So sieht's aus

Sie können mit Hilfe von JSSS Style-Sheet-Angaben HTML-Tags formatieren. Die Wirkungsweise ist die gleiche wie Definieren von Formaten für HTML-Tags nach CSS-Syntax.

### Beispiel:

    <style type="text/javascript">
    tags.H1.color = "blue";
    tags.p.fontSize = "14pt";
    with(tags.H3)
      color = "green";
    with(tags.H2)
     {
      color = "red";
      fontSize = "16pt";
      marginTop = "2cm";
     }
    </style>

### Erläuterung:

Um HTML-Tags mit Hilfe von JSSS-Syntax zu formatieren, stehen Ihnen zwei Möglichkeiten der Notation zur Verfügung:

Bei der ersten Notationsmöglichkeit notieren Sie zuerst das Schlüsselwort `tags` (kleingeschrieben!). Dahinter folgt, durch einen Punkt getrennt, das HTML-Tag, jedoch ohne die sonst üblichen spitzen Klammern. Bei dem Namen es HTML-Tags ist Groß-/Kleinschreibung egal, Sie können also beispielsweise `h1` oder auch `H1` notieren. Im obigen Beispiel bekommen die Tags `<h1>` und `<p>` auf diese Weise je eine Style-Sheet-Angabe zugewiesen.

Bei der zweiten Notationsmöglichkeit notieren Sie zuerst das Schlüsselwort `with` (mit). Dahinter folgt, in Klammern stehend, wieder das Schlüsselwort `tags` und dahinter, durch einen Punkt getrennt, wieder das HTML-Tag. Wenn Sie dem HTML-Tag nur eine Style-Sheet-Angabe zuweisen wollen, können Sie das einfach hinter oder unterhalb der Klammer tun, so wie im obigen Beispiel bei `with(tags.H3)`. Gedacht ist diese Form der Notation jedoch für den Fall, daß Sie für ein HTML-Tag mehrere Style-Sheet-Angaben notieren wollen. In diesem Fall notieren Sie die Angaben in geschweiften Klammern, so wie im Beispiel bei `with(tags.H2)`. Innerhalb der geschweiften Klammern brauchen Sie dann nur noch die reinen Style-Sheet-Angaben notieren (also ohne `tags.H2.` davor).

Um einer Style-Sheet-Angabe einen Wert zuzurodnen, notieren Sie hinter dem Bezeichner für die Style-Sheet-Angabe ein Istgleichzeichen und dahinter die Wertzuweisung. Die Wertzuweisung muß in Anführungszeichen stehen. Die Syntax bei der Wertzuweisung ist also eine andere als bei den CSS Style-Sheets.

### Beachten Sie:

Zur Formatierung stehen alle Style-Sheet-Angaben zur Verfügung, die Netscape auch bei CSS Style-Sheets interpretiert. Im Kapitel Style-Sheet-Angaben werden die einzelnen Style-Sheet-Angaben beschrieben.

Eine wichtige Konvention müssen Sie beachten: Viele Style-Sheet-Angaben enthalten normalerweise Bindestriche, wie etwa `font-size` (Schriftgröße) oder `background-color` (Hintergrundfarbe). Wenn Sie so eine Style-Sheet-Angabe in JSSS-Syntax notieren, entfällt der Bindestrich, und der erste Buchstabe des Wortes hinter dem Bindestrich wird großgeschrieben. Statt `font-size` müssen Sie also `fontSize` notieren, und statt `background-color` müssen Sie `backgroundColor` notieren.

Alle Werte, die Sie JSSS Style-Sheet-Angaben zuordnen, müssen in Anführungszeichen stehen, da diese aus Sicht von JavaScript Zeichenketten darstellen.

## Klassen mit JSSS Style-Sheets definieren

Anzeigebeispiel: So sieht's aus

Sie können Unterklassen mit Formaten anlegen. So ist es möglich, einem HTML-Element, etwa einer Überschrift 2. Ordnung, verschiedene Formate zuzuordnen. Dazu vergeben Sie Namen für die entsprechenden Unterklassen. Die Wirkungsweise ist die gleiche wie Definieren von Format-Unterklassen nach CSS-Syntax.

### Beispiel:

    <html>
    <head>
    <title>Titel der Datei</title>
    <style type="text/javascript">
    classes.Wichtig.H1.color = "blue";
    classes.Teletyper.all.fontFamily = "Courier";
    with(classes.Zusatzinfo.H2)
      marginLeft = "1cm";
    with(classes.Thema.H2)
     {
      color = "red";
      fontSize = "16pt";
      marginTop = "2cm";
     }
    </style>
    </head>
    <body>
    <h1 class="Wichtig">&Uuml;berschrift 1. Ordnung in Blau</h1>
    <p class="Teletyper">Textabsatz mit Courier-Schrift</p>
    <div class="Teletyper">Bereich mit Courier-Schrift</div>
    <h2 class="Thema">Rot, 16 Punkt und 2cm Abstand oben</h2>
    <h2 class="Zusatzinfo">Normal, aber mit 1cm Abstand links</h2>
    </body>
    </html>

### Erläuterung:

Um Formatklassen für HTML-Tags mit Hilfe von JSSS-Syntax zu definieren, stehen Ihnen wieder beide Möglichkeiten der Notation zur Verfügung:

Bei der ersten Notationsmöglichkeit notieren Sie zuerst das Schlüsselwort `classes` (kleingeschrieben!). Dahinter folgt, durch einen Punkt getrennt, ein Name für die Klasse, den Sie selbst vergeben dürfen. Der Name darf nur aus Buchstaben, Ziffern und Unterstrichen bestehen. Groß-/Kleinschreibung wird unterschieden. Im obigen Beispiel wird auf diese Weise eine Klasse namens `Wichtig` definiert.

Hinter dem Klassennamen folgt der Name des HTML-Tags, von dem diese Unterklasse abgeleitet werden soll. Im Beispiel wird also eine Unterklasse für `H2` definiert.

Hinter dem Namen des HTML-Tags notieren Sie die gewünschte Style-Sheet-Angabe zur Formatierung. Dabei gelten die speziellen Konventionen.

Bei der zweiten Notationsmöglichkeit notieren Sie zuerst das Schlüsselwort `with` (mit). Dahinter folgt, in Klammern stehend, wieder das Schlüsselwort `classes`, dahinter, durch einen Punkt getrennt, der selbst vergebene Klassenname, und schließlich das HTML-Tag, für das die Unterklasse definiert werden soll. Im obigen Beispiel wird so mit `with(classes.Thema.H2)` eine Reihe von Formatierungen für die Klasse `Thema` eingeleitet, wobei diese Klasse eine Unterklasse des HTML-Tags `<H2>` ist. Innerhalb der geschweiften Klammern stehen dann die reinen Style-Sheet-Angaben.

Genau wie bei CSS Style-Sheets können Sie auch bei JSSS Style-Sheets "abstrakte" Formatklassen definieren, die keinem bestimmten HTML-Tag zugeordnet sind. Dazu notieren Sie bei der Definition anstelle eines HTML-Tags einfach das Schlüsselwort `all`. Im obigen Beispiel wird auf diese Weise eine Klasse mit dem Namen `Teletyper` definiert.

Innerhalb von HTML-Tags wenden Sie solche Formatklassen an, indem Sie im einleitenden HTML-Tag das Attribut `class=` notieren und dahinter den Klassennamen. Klassen, die Sie nur für bestimmte HTML-Tags definiert haben, dürfen nur innerhalb solcher Tags anwenden (im Beispiel etwa die Klasse `Thema` nur für `<h2>`-Überschriften). Klassen, die mit `all` definiert worden sind, dürfen Sie dagegen auf alle HTML-Tags anwenden.

## Unabhängige Formate mit JSSS Style-Sheets definieren

Anzeigebeispiel: So sieht's aus

Sie können mit JSSS Style-Sheets individuelle, unabhängige Formate definieren, die Sie dann innerhalb von HTML bei Bedarf anwenden können. Die Wirkungsweise ist die gleiche wie beim Definieren unabhängiger Formate nach CSS-Syntax.

### Beispiel:

    <html>
    <head>
    <title>Titel der Datei</title>
    <style type="text/javascript">
    ids.rot.color = "red";
    with(ids.rotfett)
     {
      color = "red";
      fontWeight = "bold";
     }
    </style>
    </head>
    <body>
    <p id="rot">roter Textabsatz</p>
    <p>Textabsatz mit <b id="rotfett">fettem roten Text</b>.</p>
    </body>
    </html>

### Erläuterung:

Um unabhängige Formate mit Hilfe von JSSS-Syntax zu definieren, stehen Ihnen wieder beide Möglichkeiten der Notation zur Verfügung:

Bei der ersten Notationsmöglichkeit notieren Sie zuerst das Schlüsselwort `ids` (kleingeschrieben!). Dahinter folgt, durch einen Punkt getrennt, ein Name, den Sie selbst vergeben dürfen. Der Name darf nur aus Buchstaben, Ziffern und Unterstrichen bestehen. Groß-/Kleinschreibung wird unterschieden. Im obigen Beispiel wird auf diese Weise eine Klasse namens `rot` definiert.

Hinter dem Namen notieren Sie die gewünschte Style-Sheet-Angabe zur Formatierung. Dabei gelten die speziellen Konventionen.

Bei der zweiten Notationsmöglichkeit notieren Sie zuerst das Schlüsselwort `with` (mit). Dahinter folgt, in Klammern stehend, wieder das Schlüsselwort `ids`, und dahinter der selbst vergebene Formatname. Im obigen Beispiel wird mit `with(ids.rotfett)` ein unabhängiges Format definiert. Innerhalb der geschweiften Klammern stehen dann die reinen Style-Sheet-Angaben.

Innerhalb von HTML-Tags wenden Sie unabhängige Formate an, indem Sie im einleitenden HTML-Tag das Attribut `id=` notieren und dahinter den Namen des Formats.

## Formate für verschachtelte HTML-Tags mit JSSS Style-Sheets definieren

Anzeigebeispiel: So sieht's aus

Sie können mit JSSS Style-Sheets Formate für HTML-Tags definieren, die nur dann gültig sind, wenn das HTML-Tag innerhalb eines bestimmten anderen HTML-Tags vorkommt. Die Wirkungsweise ist die gleiche wie beim Definieren von Formaten für verschachtelte HTML-Tags nach CSS-Syntax.

### Beispiel:

    <html>
    <head>
    <title>Titel der Datei</title>
    <style type="text/javascript">
    contextual(tag.P, tags.I).color = "red";
    </style>
    </head>
    <body>
    <div>Normaler Textbereich mit <i>normalem kursivem Text</i>.</div>
    <p>Normaler Textabsatz mit <i>kursivem Text in rot</i>.</p>
    </body>
    </html>

### Erläuterung:

Um mit Hilfe von JSSS-Syntax ein Format für ein HTML-Tag zu definieren, das nur innerhalb eines bestimmten anderen HTML-Tags eine bestimmte Formatierung erhalten soll, müssen Sie zuerst das Schlüsselwort `contextual` notieren. Dahinter folgt ein Ausdruck, der in Klammern steht. Zuerst notieren Sie nach JSSS-Syntax das "übergeordnete, äußere" HTML-Tag, im obigen Beispiel `tags.P`. Dahinter folgt, durch ein Komma getrennt, das "untergeordnete, innere" HTML-Tag, im Beispiel `tags.I`. Hinter der abschließenden Klammer folgt noch mal ein Punkt, gefolgt von der gewünschten Style-Sheet-Angabe. Dabei gelten die speziellen Konventionen.

Innerhalb von HTML werden die definierten Formate angewendet. Im obigen Beispiel wird Text, der mit `<i>`...`</i>` als kursiv definiert wird, zusätzlich rot, wenn er innerhalb eines Textabsatzes (`<p>`...`</p>`) steht. In allen anderen Fällen erhält `<i>`...`</i>` die übliche Formatierung.

## JSSS-Formate innerhalb von HTML-Tags definieren

Anzeigebeispiel: So sieht's aus

Sie können JSSS-Definitionen auch innerhalb einzelner HTML-Tags zur Schnellformatierung benutzen. Das funktioniert genau so wie beim Formatieren einzelner HTML-Tags nach CSS-Syntax. Der einzige Unterschied ist die Notation der Style-Sheet-Angaben.

### Beispiel:

    <p style="fontSize='14pt'; marginLeft='1cm'">Textabsatz</p>

### Erläuterung:

Sie können Formatangaben für ein HTML-Tag bestimmen, indem Sie innerhalb des einleitenden HTML-Tags die Angabe `style=` und dahinter, in Anführungszeichen, die gewünschte Formatdefinitionen notieren. Innerhalb der Formatdefinitionen sind Style-Sheet-Angaben erlaubt. Jede Eigenschaftszuweisung besteht aus einem Namen, z.B. `color` und einem Wert, z.B. `red`, getrennt durch ein Istgleichzeichen (anders als bei CSS!). Style-Sheet-Angaben, die normalerweise mit Bindestrich geschrieben werden, werden bei JSSS-Syntax zusammengeschrieben. Ab dem zweiten Angabenteil beginnt jeder Teil mit einem Großbuchstaben. Aus `margin-left` wird so beispielsweise `marginLeft`, aus `background-color` wird `backgroundColor`, und aus `border-bottom-width` wird `borderBottomWidth`. Notieren Sie die Wertzuweisungen in einfachen Anführungszeichen, so wie im Beispiel etwa `'14pt'`. Doppelte Anführungszeichen dürfen Sie deshalb nicht verwenden, weil ja der gesamte Ausdruck `style=` bereits in solchen Anführungszeichen steht.

### Beachten Sie:

Diese Art, JSSS-Style-Sheet-Angaben zu definieren, funktioniert noch nicht mit der glatten Versionsnummer 4.0 bei Netscape. Erst bei zusätzlichen Releases des Typs V4.0x funktionieren die JSSS-Style-Sheet-Angaben innerhalb von HTML-Tags.

Angaben, die Sie innerhalb eines HTML-Tags auf diese Weise definieren, werden vom MS Internet Explorer ignoriert.

## JSSS Style-Sheets und CSS Style-Sheets kombinieren

Es spricht nichts dagegen, CSS Style-Sheets und JSSS Style-Sheets innerhalb der gleichen HTML-Datei zu verwenden. Dabei gelten zwei einfache Prinzipien:

1. CSS Style-Sheets werden sowohl von Netscape als auch vom MS Internet Explorer unterstützt, JSSS Style-Sheets dagegen nur von Netscape.
2. Diejenige Style-Sheet-Angabe, die "als letzte" definiert wird, ist maßgeblich.

### Beispiel:

    <html>
    <head>
    <title>Titel der Datei</title>
    <style type="text/css">
    p { fontSize:10pt; color:red; }
    </style>
    <style type="text/javascript">
    with(tags.P)
     {
      fontSize = "12pt";
      color = "blue";
     }
    </style>
    </head>
    <body>
    <p>Text, der in Netscape und MS IE unterschiedlich aussieht</p>
    </body>
    </html>

### Erläuterung:

Im obigen Beispiel wird das HTML-Tag `<p>`...`</p>` zuerst mit CSS-Syntax formatiert, anschließend mit JSSS-Syntax. Nach CSS-Syntax wird der Text 10 Punkt groß und rot, nach JSSS-Syntax 12 Punkt groß und blau.

Beim MS Internet Explorer greift nur die CSS-Definition, da dieser Browser den Bereich, der mit `<style type="text/javascript">` ist, erst gar nicht ausliest. Bei Netscape greift dagegen die JSSS-Definition. Aber nicht deshalb, weil sie von vorneherein Vorrang vor der CSS-Definition hat, sondern deshalb, weil sie "hinter" der CSS-Definition notiert ist. Würde zuerst der JSSS-Bereich notiert und dahinter der CSS-Bereich, würde auch Netscape die CSS-Angaben zur Formatierung verwenden.

weiter: | Dynamisches Positionieren (Netscape)
zurück: | Dynamische Filter (Microsoft)

SELFHTML/Quickbar Dynamisches HTML Die Ansätze von Microsoft und Netscape

© 1998 Stefan Münz, muenz@csi.com