Phantastische Prognosen über zu erwartende Gewinne im Online-Markt haben dem Internet den großen Goldrausch beschert. Das Schürfgebiet heißt World Wide Web, und wer hier seinen Claim abstecken möchte, muß schon etwas bieten, vor allem fürs Auge. In den Browser integrierte News- und Mailreader, Plug-ins und Add-Ons für alles, was sich bewegt und Geräusche macht. Sensationen sind gefragt, der Information-Cyber-Highway verkauft sich nicht gut mit ASCII-Auffahrten. Versucht man angesichts solcher Tatsachen an die grundlegende Idee zu erinnern, die die HyperText Markup Language von SGML geerbt hat, setzt man sich der Gefahr aus, als naiver Idealist belächelt zu werden.
Die Idee besteht - grob gesagt - darin, die Struktur und logischen Elemente eines Dokuments vom Aussehen zu trennen. In SGML, der Standard Generalized Markup Language, ist diese Trennung perfektioniert, Formatierungen und Layouteinstellungen sind nicht möglich ([[#literatur 1]]). Das gilt strenggenommen auch für HTML. Elemente wie die Überschriften oder die Listen sagen nur etwas über den Inhalt aus, aber nichts über dessen Bildschirmdarstellung. Einige Unsauberkeiten wie B für fette Schrift (Bold) statt der Betonung durch STRONG haben sich bereits in den Anfängen von HTML eingeschlichen.
Nach der reinen SGML-Lehre sollten sämtliche Änderungen der Schriftart, Einrückungen von Absätzen, Festlegung von Farben und so weiter außerhalb des Textes stehen. Die Entwickler des Netscape Navigator oder des MS Internet Explorer würden eine solche prinzipientreue Haltung vielleicht nur mit Träum weiter! kommentieren. Doch es gibt noch andere Träumer, in diesem Fall die Entwickler des WWW-Konsortiums (W3C). Unbeeinflußt von der weiten Verbreitung der HTML-Enhancements hat das W3C die Entwicklung der Cascading Style Sheets (CSS) betrieben. Mit Hilfe eines CSS ist es möglich, einer Web-Seite ein ansprechendes Äußeres gemäß der SGML-Philosophie zu verpassen. Daß nun der Explorer in der Version 3 Style Sheets unterstützt[[#literatur 6]] und Netscape mit dem Navigator 4 nachziehen möchte, gibt dem W3C recht.
Die Verknüpfung eines Dokuments mit einem Style Sheet ist auf mehrere Weisen möglich (siehe [[#literatur 3]]):
<STYLE TYPE="text/css"> ... </STYLE>. In dieser Variante ist neben der Einbettung auch die Benutzung von externen Style Sheets möglich. Der CSS-Entwurf definiert dafür die Anweisung @import.<LINK TITLE="name_des_style_sheet" TYPE="text/css" REL=stylesheet HREF="...">: LINK hat lediglich optionalen Charakter, das heißt, der Leser kann das gelinkte Style Sheet einsetzen oder auch nicht. Im Gegensatz dazu kommen importierte Styles automatisch zum Einsatz. Bei der Verwendung mehrerer LINK-Elemente sollte der Browser dem Benutzer eine Menüauswahl erlauben. Zu diesem Zweck kann ein Style Sheet mit einem Titel versehen werden.<P STYLE="color : green">. Eine externe Lösung ist im Sinne von SGML eleganter und besitzt den Vorteil, daß die Daten auch von einem Proxy-Cache gespeichert werden. Bei Verwendung desselben Style Sheet für mehrere HTML-Seiten entfällt der wiederholte Netzverkehr.Wie der Begriff Cascading schon andeutet, lassen sich mehrere Style Sheets miteinander kombinieren. So könnte eine Firma oder Institution ihre Seiten mit einem Standarddesign ausstatten, wobei die verschiedenen Abteilungen die Freiheit besitzen, gewisse Eigenschaften (Farbe, Schriftart und so weiter) durch eigene Werte zu überschreiben. Auch der Benutzer eines Web-Browser kann selbst Style Sheets verwenden. Es ist daher wichtig, die Regeln zu kennen, nach denen ein Browser die Werte für die Darstellung für den Fall ermittelt, daß verschiedene Styles für ein Dokument gültig sind. Informationen darüber enthält der Kasten Kaskadierung.
Der prinzipielle Aufbau der Style Sheets ist leicht zu verstehen. Kurz gesagt findet eine Zuordnung zwischen HTML-Element und dessen Präsentation auf dem Ausgabemedium statt. Der einfachste Fall sieht etwa so aus:
<STYLE TYPE="text/css">H1 { color: blue }</STYLE>
Überschriften vom Typ H1 erhalten die Farbe Blau. Das Element (H1) trägt die Bezeichnung Selektor (selector), der Ausdruck in den Klammern heißt Deklaration (declaration), die aufgeteilt ist in Eigenschaft (property), hier die Farbe, und Wert (value), in diesem Fall Blau.
Erlaubte Selektoren legt die HTML-Spezifikation fest, es sind die HTML-Elemente (mit Erweiterungen, siehe unten), während der CSS1-Standard die zulässigen Eigenschaften und deren Werte definiert. Dies ist bemerkenswert, weil die verschiedenen Browser, vorausgesetzt die Programmierer halten sich an den Standard, keine eigenen Werte einführen können. Level2 der Cascading Style Sheets soll übrigens eine Verallgemeinerung für den Einsatz mit SGML sein, also auch mit anderen DTDs als HTML arbeiten.
Zur Straffung der Style Sheets sieht die Spezifikation verschiedene Möglichkeiten der Gruppierung sowohl der Selektoren als auch der Eigenschaften vor. Beispielsweise lassen sich auch die Überschriften H2 und H3 durch Angabe von
<STYLE TYPE="text/css">H1, H2, H3 { color: blue }
blau einfärben und die Zusätze
H1 { font-family: sans-serif;
font-size: 16pt }
H2, H3 { font-family: roman;
font-size: 14pt }
</STYLE>
legen die Schriftart und -größe durch Listen von Eigenschaften fest. Selektoren werden durch Kommata und Eigenschaften durch Semikolons voneinander getrennt.
Diese Vorgehensweise ist zwar einfach zu handhaben, allerdings nicht besonders feinkörnig. Bei Überschriften fällt das kaum ins Gewicht, denn es ist durchaus wünschenswert, alle Überschriften derselben Stufe identisch darzustellen. Bei Absätzen (P) kann dies aber anders aussehen. Sie enthalten unter Umständen Text unterschiedlicher Bedeutung - vielleicht einen kurzen Einschub, der in kleinerer Schriftart erscheinen soll, oder einen wichtigen Abschnitt, den ein Rahmen hervorheben soll. In solchen Fällen wäre es schlecht, wenn man die Darstellung für alle Absätze gleich festlegen müßte.
Aus diesem Grund gibt es für fast alle HTML-3-Elemente die Möglichkeit, eine feinere Klassifizierung mit dem Attribut CLASS vorzunehmen und dies auch im Style Sheet zu berücksichtigen. Nun ist der HTML-3.0-Entwurf bekanntlich eingefroren und die aktuelle Version trägt die Nummer 3.2. CLASS und das unten folgende Attribut ID sind darin noch nicht vorhanden. Ein erster DTD-Entwurf der Nachfolgeversion (mit dem Codenamen Cougar) enthält diese Attribute wieder (siehe Dave Raggetts Entwurf [[lit.html 8]]).
In der Praxis sieht die Klassifizierung folgendermaßen aus. Zunächst seien neben den unklassifizierten Absätzen einige als Zitat markiert.
<P>Ein normaler Absatz</P><P CLASS=zitat>A small step for me...</P>
Nun kann der Autor Zitate von anderen Absätzen abheben, etwa durch die folgenden Zeilen:
<STYLE TYPE="text/css">P.zitat { margin-left: 20%; margin-right: 20% }</STYLE>
Damit stellt der Web-Browser Zitate mit Rändern dar, die jeweils um 20% (von der gesamten Textbreite) eingerückt sind. Entscheidend war hier die angehängte Klasse im Selektor.
Wer es noch genauer mag, der kann in HTML-3 das von SGML bekannte Attribut ID verwenden. ID ist in SGML für die eindeutige Kennzeichnung eines Elements zuständig. Das heißt, ein Parser erzeugt eine Fehlermeldung, wenn ein Dokument zwei Elemente mit identischem ID-Attribut enthält. Die Schreibweise weicht im StyleSheet von der CLASS-Notation etwas ab. Da es nicht möglich ist, daß verschiedene Elemente die gleiche ID besitzen, muß die ID nicht an ein Element angehängt werden. Zur Unterscheidung von Elementselektoren erhalten ID-Selektoren das Präfix #.
<STYLE TYPE="text/css">#xyz1a { color: red }</STYLE><P ID=xyz1a>...</P>
Eine Besonderheit sind sogenannte Pseudoklassen für Hyperlinks (A, Anchor-Element) und Pseudoelemente für Blockelemente, etwa Absätze (P).
Die Klassen für Links sind link, ein nicht besuchter Link, visited, ein besuchter Link, und active, ein Link, den der Benutzer gerade anklickt (Maustaste gedrückt). Diese Pseudoklassen stehen durch einen Doppelpunkt getrennt hinter dem A-Selektor:
<STYLE TYPE="text/css">A:link { color: green } /* nicht besuchter Link */ A:visited { color: blue } /* besuchter Link */ A:active { color: white } /* aktiver Link */</STYLE>
Als Pseudoelemente stehen zur Verfügung: first-line und first-letter. Sie erlauben Style Sheets den Zugriff auf den ersten Buchstaben beziehungsweise die erste Zeile eines Textblocks. Während first-letter eher eine nette Zugabe ist, die man auch mit den bisher vorgestellten Möglichkeiten manuell erzielen kann, stellt first-line wirklich ein neues Feature dar. Denn welche Worte eines Absatzes in der ersten Zeile stehen, weiß der Verfasser einer Web-Seite nicht. Durch variable Fensterbreiten kann die erste Zeile unterschiedlich lang sein. Das Pseudoelement first-line bietet für dieses Problem einen Ausweg:
<STYLE TYPE="text/css">P:first-line { font-variant: small-caps } P:first-letter { font-size: 200% }</STYLE>
Die erste Zeile eines Absatzes erscheint nun im Schriftstil Small Capitals (Kapitälchen), und der erste Buchstabe in doppelter Größe (font-variant ist eine der neuen Eigenschaften).
Ein weiteres Feature drängt sich durch die verschachtelte Struktur von HTML auf, nämlich die kontextsensitive Zuweisung von Eigenschaften. Es läßt sich leicht am Beispiel mehrfach verschachtelter Listen erklären.
<OL>...<OL>...</OL></OL>
Die Listen vom Typ OL numeriert ein Web-Browser üblicherweise durch, aber leider auf jeder Stufe in gleicher Weise, in der Regel durch arabische Numerierung. Mit den Style Sheets läßt sich dies ändern.
<STYLE TYPE="text/css">OL { list-style: decimal } OL OL { list style: lower-alpha } OL OL OL { list style: lower-roman }</STYLE>
Mit diesen Definitionen erhalten geordnete Listen nun eine jeweils andere Numerierung. Auf der ersten Stufe die übliche arabische Schreibweise (1, 2, 3, 4, ...), darin eingebettete Listen kennzeichnet ein kleiner lateinischer Buchstabe (a, b, c, d, ...), und kleine römische Zahlen (i, ii, iii, iv, ...) schmücken die innersten Listen. Selbstverständlich funktioniert die kontextsensitive Zuweisung nicht nur bei Elementen gleichen Typs, sondern auch bei beliebigen Kombinationen:
<STYLE TYPE="text/css">DL UL OL { list style: lower-alpha } /* OL in UL in DL */ H1 EM { color : red } /* EM in H1 */ H2 .zitat { color : blue } /* Zitate (CLASS) in H2 */</STYLE>
Noch einfacher als die Benutzung eines ausgefeilten Verfahrens zur Festlegung von Eigenschaften ist es, gar keine Festlegung vornehmen zu müssen. Das Stichwort hierfür heißt Vererbung und bedeutet: HTML-Elemente vererben ihre Eigenschaftswerte an eingebettete Elemente. Setzt man, wie oben geschehen, die Farbe für eine Überschrift auf Blau, gilt dies auch für darin enthaltenen Text, der hervorgehoben ist. Eine Definition für die Farbe von EM ist nicht nötig.
<STYLE TYPE="text/css">H1, H2, H3 { color: blue }</STYLE>...<H1>blauer Text<EM>blauer Text</EM></H1>
Soviel zur Theorie, aber wie sieht es mit der heutigen Nutzung der Style Sheets aus? Als Ausgangspunkt für Experimente kann das Style Sheet für HTML-2.0 dienen, das im CSS-Entwurf enthalten ist.
Zur Darstellung benötigt man eigentlich nichts weiter als einen HTML-Viewer, der die Style Sheets versteht. Das W3C hat dafür den Begriff der CSS1-Konformität (CSS1 conformance) eingeführt. Ein Browser ist konform zu CSS1, wenn er sich an die Regeln der W3C-Spezifikation hält.
Netscape hat die Implementierung von CSS im Navigator für die Version 4 angekündigt und liegt damit hinter dem Konkurrenten, Microsofts Internet Explorer, zurück, der bereits im Juni in der Betaversion Style Sheets ansatzweise verarbeitete. Neben der W3C-Lösung CSS wird der Navigator4 eine hausgemachte Variante enthalten, sogenannte Javascript Style Sheets (siehe auch [[#literatur 10]]). Soweit derzeit absehbar, handelt es sich dabei lediglich um eine an JavaScript angelehnte Syntax.
Die Unterstützung einer offiziellen W3C-Initiative ist inzwischen offensichtlich zu einem Politikum zwischen Microsoft und Netscape geworden. Keine der beiden Firmen kann sich rühmen, ein Verfechter der SGML-Tugenden zu sein. Im Bestreben, die Marktführung zu erreichen, hatte der Navigator eine Reihe von firmenspezifischen HTML-Tags vorgelegt. Microsoft hat munter nachgezogen und ebenfalls Phantasie in der Auslegung des Begriffes Standard bewiesen.
Auf Unix-Systemen sieht es hinsichtlich CSS1 noch nicht so gut aus. Der ursprünglich unter dem Namen Tamaya angekündigte Browser von INRIA hat kürzlich als Amaya das Licht der Welt beim W3C erblickt, zunächst nur für Linux, inzwischen auch für Solaris[[#literatur 7]]. Amaya realisiert bislang aber nur einen kleinen Teil des CSS-Entwurfs. Die (beschränkte) Änderung der Schriftart und der Farben sind möglich. Einrückungen und Blockformatierungen (siehe Kasten) führt der Browser noch nicht aus.
Im März 1996 konnte das W3C stolz die Bereitschaft der beiden Firmen zur Unterstützung der CSS verkünden (siehe iX 5/96, S. 46). In der Folge wurde der CSS-Draft ein wenig zurechtgestutzt. Mehrspaltiges Layout etwa wurde in einen eigenen Entwurf ausgelagert. Es sieht so aus, als ob sowohl CSS als auch HTML näher an die existierenden Fähigkeiten der Browser angepaßt werden sollten. Die Entwicklung von HTML-3 nach HTML-3.2 paßt in dieses Bild.
Die Tatsache, daß der Explorer als erster einen Teil des gestutzten CSS-Drafts beherrscht, scheint dem moralischen Selbstverständnis von Microsoft einen Höhenflug beschert zu haben. Microsofts Thomas Reardon ließ es sich nicht nehmen, auf der CSS-Mailing-Liste zu verkünden, daß Netscapes Atlas (Navigator 3.0b5) zwei weitere proprietäre Tags beherrsche [[#literatur 9]]. Im Hochgefühl des vermeintlich nahen Endsiegs greift er tief in die propagandistische Mottenkiste und vergleicht Netscape mit der UdSSR beim Einmarsch in Afghanistan. An dieser Stelle scheint es angebracht, ausdrücklich zu erwähnen, daß dies nicht die April-Ausgabe der iX ist.
Eine weite Verbreitung des durchdachten Style-Sheet-Konzeptes wäre nach den vielen proprietären Neuerungen von zweifelhafter Qualität eine wohltuende Abwechslung und für die Entwicklung des WWW ein Schritt nach vorn. Trotz einiger Schwächen von HTML, welchen Erfolg hätte das Web ohne die breite Akzeptanz der HyperText Markup Language gehabt...
STEFAN MINTERT
beschäftigt sich an der Universität Dortmund am Fachbereich Informatik mit TeX, World Wide Web und SGML.
Literatur
[1] Stefan Mintert; Leise Revolution; Die Standard Generalized Markup Language; iX 7/95, S.126ff.
[2] Cascading Style Sheets, Level 1; W3C Proposed Recommendation, 12. November 1996
[3] HTML3 and Style Sheets; W3C Working Draft, 10. Juli 1996
[4] Henning Behme; Ordner unterwegs; Hypertext Markup Language: Version 3.2, Style Sheets, Objekte; iX 8/96, S.122ff.
[5] Stefan Mintert; Tabula Rasa; Noch nicht im Standard: Tabellen im Web; iX 2/96, S. 152ff.
[6] HTML-Erweiterungen und Style Sheets in MSIE3
[7] Henning Behme; Key Player; Referenz-Client des W3C: Amaya in der Version0.8; iX 11/96, S.70ff.
[8] Dave Raggett; Cougar-Draft-DTD; 12. Juli 1996
[9] Thomas Reardon; Netscape ML
[10] JavaScript-Based Style Sheets
| iX-TRACT |
|
Dieser Text ist der Zeitschriften-Ausgabe 03/1997 von iX entnommen.
iOS, Android, Windows Phone 7 und HTML5 - das neue Sonderheft von heise Developer führt Einsteiger und Profis in die Programmierung mobiler Geräte ein.
