Schnittmuster für Web-Schneider

Was Style Sheets vermögen und wo die Browser versagen

Wissen | Know-how

Mit Cascading Style Sheets steht Web-Autoren erstmals eine sinnvolle Technik zum Layouten von HTML-Seiten zur Verfügung. Doch ihre Unterstützung durch die Browser von Microsoft und Netscape läßt noch zu wünschen übrig.

Der Entwurf einer Web-Seite hat bisweilen etwas von einem Geduldsspiel. Um Textblöcke und grafische Elemente vernünftig ausrichten zu können, müssen sie aufwendig in Tabellen eingebaut werden. Bestimmte Effekte lassen sich nur mit Tricks erzeugen, die Seiteneffekte der Browser benutzen, andere gar nicht. Die Konsequenz ist oft genug, daß der gestreßte Grafiker aufgibt, den gewünschten Entwurf in Photoshop zusammenbaut und als GIF in die Seite integriert.

Verwundern sollte dies nicht, denn die WWW-Sprache HTML wurde ursprünglich nicht als Layoutsprache konzipiert, sondern als Beschreibungssprache für wissenschaftliche Publikationen. Der Bedarf nach mehr grafischen Gestaltungsmöglichkeiten kam erst mit der Popularität des Web.

Microsoft und Netscape versuchten zwar nach Kräften, den Hunger der Kreativen nach immer neuen Stilmitteln zu stillen, und führten eine ganze Reihe von HTML-Tags zur Gestaltung von Web-Seiten ein. Im Marketing-Kampf der beiden Hersteller waren dies jedoch häufig proprietäre Erweiterungen, die der Browser des Kontrahenten nicht darstellen konnte.

Zusammen mit der Tatsache, daß die beiden marktführenden Browser etliche Tags sehr unterschiedlich interpretieren, führt dies dazu, daß Web-Gestalter oft die doppelte Arbeit hatten: So manche Seite, die unter Microsofts Internet Explorer hübsch aussieht, wirkt unter Netscapes Navigator unaufgeräumt, und umgekehrt ließ eine Reihe von Seiten, die auf den Navigator optimiert war, unter dem Internet Explorer zu wünschen übrig. Das Chaos wurde durch die Tatsache noch komplizierter, daß die Hersteller es selbst nicht so genau mit Ihren Layout-Erweiterungen nahmen. So gibt es teilweise sogar Darstellungsunterschiede zwischen den verschiedenen Browser-Versionen ein und desselben Herstellers.

Bereits vor einiger Zeit machte sich das für die Weiterentwicklung des Standards HTML zuständige W3-Konsortium über eine HTML-Erweiterung namens Cascading Style Sheets (kurz CSS) Gedanken. Sie sollte Ordnung in das Tohuwabohu der Layout-Erweiterungen bringen. Ihre Empfehlung zu 'Cascading Style Sheets, Level 1', kurz CSS1, wird mittlerweile von den wichtigsten Browsern - zumindest teilweise - unterstützt.

Im Gegensatz zu den windig zusammengestrickten HTML-Erweiterungen von Netscape und Microsoft wählte das W3-Konsortium einen wesentlich saubereren Weg, der den Inhalt von der Gestaltung einer Web-Seite trennt. Die W3ler führten keine neuen HTML-Tags zur grafischen Darstellung ein, sondern eine Zusatzsprache. Mit dieser legt ein Web-Designer in Stilvorlagen, sogenannten Style Sheets, die grafische Repräsentation der Standard-HTML-Tags fest.

Ein Style Sheet kann etwa definieren, daß die H2-Überschriften eines HTML-Dokuments mit der fetten, 40 Pixel hohen Standard-Serifenschrift des Browsers rechtsbündig dargestellt wird. Die entsprechende Stilvorlage sieht wie folgt aus:

H2{   font-family: sans-serif;   font-size: 40px;   font-weight: bold;   text-align: right }

Die Syntax von Style Sheets ist also grundsätzlich sehr einfach: Eine Stilvorlage beginnt mit dem Namen des betroffenen HTML-Elementtyps, gefolgt von einer geschweiften Klammer. In dieser befindet sich wiederum eine Liste der Attribute mit den zugehörigen Werten, jeweils durch Doppelpunkt und Strichpunkt voneinander getrennt. Fortan ersetzt der Browser das Standardlayout der HTML-Tags durch die in den Style Sheets definierten Vorlagen.

Insgesamt können Style Sheets nach der CSS1-Spezifikation über 70 Eigenschaften wie Fonts, Text et cetera einstellen. Einen Überblick gibt der Kasten [#Kasten1 CSS1-Eigenschaften im Detail]. Gute weiterführende Übersichten finden sich unter [[#Lit4 4], [#Lit7 7]].

Für die Verbindung von Style Sheet mit einer HTML-Datei stehen mehrere Wege zur Verfügung. Die Definition der Style Sheets kann wahlweise in einer eigenen Datei, im Kopf der HTML-Datei oder direkt bei den zugehörigen HTML-Tags erfolgen (siehe auch Kasten [#Kasten2 Verweben]).

Bereits die Erweiterungen nach CSS1 eröffnen dem Web-Designer neue Welten, wenn sie auch noch bei weitem nicht alles erlauben, was in modernem Layout denk- und machbar ist. So ist es sicherlich nur eine Frage der Zeit, bis neue Erweiterungen des Standards auf den Markt kommen.

Eine solche Erweiterung wird bereits unter dem Titel 'Positioning HTML Elements with Cascading Style Sheets' [#Lit9 [9]] beim W3-Konsortium diskutiert. Sie führt insgesamt 9 zusätzliche Eigenschaften ein, über die der Web-Grafiker die Position von Objekten in einem Dokument frei festlegen kann (siehe Kasten [#Kasten3 Auf den Punkt gebracht]).

Mittlerweile erfreuen sich die Cascading Style Sheets bei den Browser-Herstellern großer Beliebtheit. Die 4er Browser beherrschen neben der CSS1-Spezifikation auch die Positioning-Erweiterungen, wodurch diese schon vor ihrer offiziellen Absegnung zum Quasi-Standard aufsteigen.

So schön Cascading Style Sheets in der Theorie sein mögen - in der Praxis hinken die Browser dem Standard noch weit hinterher. Zum einen unterstützen sie nur einen Teil der offiziellen Spezifikation, zum anderen implementieren sie einige Bereiche sogar fehlerhaft. Microsofts Internet Explorer 3.02 beispielsweise kam nur mit einem kleinen Teil der Spezifikation klar. Netscapes Communicator 4.0 geht zwar etwas weiter, hat mit großen Teilen der Spezifikation aber immer noch große Probleme. Lichtblick am Horizont ist lediglich der Internet Explorer 4.0, der derzeit mit der besten CSS-Implementation aufwartet.

Wer heutzutage eine CSS-Seite entwickelt, kommt nicht umhin, sie mit mehreren Browsern zu testen - zu unterschiedlich ist das Ergebnis, als daß man sich auf die Kompatibilität der Browser verlassen könnte. Ärgerlich dabei, daß sich die 3er und die 4er Version des Internet Explorers nicht parallel installieren lassen. Glücklich schätzen können sich da die Web-Designer, die mehrere Rechner für den Test ihrer Seiten zur Verfügung haben ...

Wir haben uns die einzelnen Eigenschaften und ihre Unterstützung durch alle Browser im Detail angesehen. Im einzelnen: Relativ unproblematisch ist die Arbeit mit den elementaren Schriftattributen (font-family, -size, -weight). Während diese sowohl unter dem Internet Explorer 4.0 als auch unter Netscapes Communicator 4.01 funktionieren, sollte man beim Einsatz exotischer Schriftattribute vorsichtig sein. So weigert sich der Communicator beispielsweise über font-variant: small-caps eine Schrift in Kapitälchenform darzustellen.

Vorsicht sollte man auch bei der Änderung von Zeichen- oder Wortabständen walten lassen. Weder der Internet-Explorer noch der Communicator kommen mit der Eigenschaft word-spacing klar. Der Communicator weigert sich außerdem, das Property letter spacing zu interpretieren. Von beiden Browsern weitgehend unterstützt werden hingegen die Attribute line-height (Zeilenhöhe) und text-align (horizontale Textausrichtung).

Eher frustrierende Resultate ergaben unsere Tests bei der Arbeit mit Farben und Hintergründen. Prinzipiell konnten zwar beide Browser etwas mit den Attributen background-color (Hintergrundfarbe) und background-image (Hintergrundbild) anfangen. Netscapes Browser legte die Hintergrundfarbe allerdings nur direkt hinter den Text, während Microsofts Browser die komplette Box des jeweiligen Elementes mit der Hintergrundfarbe füllte, was einen komplett anderen optischen Eindruck vermittelt. Unterdessen führten unsere Experimente mit den Properties background-attachment und background-position zu keinerlei Veränderungen des Seitenlayouts. Sie scheinen weder von Microsoft noch von Netscape implementiert worden zu sein.

Etwas versöhnlicher stimmten uns die Testergebnisse mit den Box-Properties, über die sich Seitenabstände, Textumrandungen und ähnliches realisieren lassen sollten. Jeder Absatz und jede Überschrift wird dazu in eine rechteckige Box gepackt. Über rund zwei Dutzend Properties läßt sich festlegen, an welcher Seite die Box welchen Rahmen erhält, wie groß der innere Abstand zwischen Rahmen und Text und wie breit der Rand außerhalb des Rahmens ist. Sowohl Microsoft als auch Netscape unterstützen die Basis-Properties für Rahmen sowie für die Abstände außerhalb und innerhalb des Rahmens.

Doch auch hier bleiben Haken: Wendet man die Abstand-Properties beim Communicator auf eine Überschrift an, so schlägt der Browser seine Vorgabewerte zu den Angaben hinzu. Der Abstand fiel daher wesentlich größer aus als beim Internet Explorer. Wer die Absatzabstände seiner Web-Seite Browser-unabhängig gestalten möchte, muß daher auf die Überschriften-Tags verzichten. Durch den Einsatz des CLASS-Attributs ist dies ohne Probleme möglich (siehe [#Listing1 Listing]), das bringt jedoch den Nachteil mit sich, daß die Seite in Browsern ohne Style-Sheet-Unterstützung noch schlechter aussieht als nötig.

Bleibt ein Blick auf die Erweiterung zur absoluten Positionierung von HTML-Elementen. Auch diese wird von Netscape und Microsoft nur bruchstückhaft implementiert. Der Communicator weigert sich hartnäckig, Positionierungsattribute für einzelne Grafiken (IMG-Tags) anzunehmen. Microsofts Internet Explorer akzeptiert diese Attribute zwar für eine einzelne Grafik, nicht aber für gewöhnliche Absätze.

Folgendermaßen lassen sich Internet Explorer und Communicator gleichermaßen austricksen: Beide Browser können Positionsattribute für das DIV-Tag interpretieren. Möchte man einen Absatz oder eine Grafik an einer vorgegebenen Position festzurren, so können die entsprechenden HTML-Teile in ein solches DIV-Tag gepackt und dann als Ganzes positioniert werden. Das Listing zeigt, wie es geht.

Auch Style Sheets zeigen wieder einmal, mit welch heißer Nadel Web-Browser gestrickt werden. Eigenschaften werden gar nicht oder nur teilweise unterstützt. Obwohl Style Sheets den konzeptionell besseren Ansatz im Vergleich zum konventionellen HTML-Entwurf darstellen, haben Web-Designer auf diese Weise nicht viel gewonnen. Sie müssen nach wie vor ihre Seiten an die einzelnen Browser anpassen und mit den unterschiedlichen Programmen testen. Bleibt zu hoffen, daß Netscape und Microsoft gleichermaßen nachbessern. Schwacher Trost: Browser sollten Tags, die sie nicht kennen, ignorieren. Daher sollten ältere Browser mit Style Sheets keine Probleme machen. (jo)

[1] Hakon Wium Lie, Bert Bos: Cascading Style Sheets, Layout für das Web-Publishing, Addison-Wesley, Bonn, 1997
[2] Jo Bager: HTML++, Style Sheets und XML - die Zukunft des Web?, c't 8/97, S. 298
[3] Die W3-Seite zum Thema.
[4] Property Reference Index
[5] Web Designer's Guide to Style Sheets (viele Beispiele)
[6] Website zu [1], mit drei Online-Kapiteln
[7] Gute Einführung der Web Design Group
[8] Grundregeln für einen sinnvollen Gebrauch von Style Sheets
[9] CSS Positioning-Draft
[10] Microsofts Style Sheet Gallery mit Beispielseiten
[11] Der Style Sheet Reference Guide von webreview.com mit vollständiger Kompatibilitätsliste und 'Safe List'
[12] Style-O-Mattic von cnet

[#anfang Seitenanfang]


Die Eigenschaften, welche Cascading Style Sheets des Level 1 für das Layout definieren, lassen sich grob in die Kategorien 'Font', 'Text', 'Farbe und Hintergrund', 'Box' sowie 'Klassifikation' aufteilen. Die Attributmenge richtet sich nach der jeweiligen Eigenschaft. In Frage kommen etwa Konstanten, wie 'sans-serif' für die Schriftfamilie. Längenangaben werden prozentual zu einer Referenzgröße beziehungsweise als Absolutwert angegeben.

Als Referenzwerte stehen neben der Größe des HTML-Vaterelements die Höhe des Zeichensatzes (em) beziehungsweise die Höhe des Buchstabens 'x' (ex) zur Auswahl. Absolutwerte lassen sich in Zentimeter, Millimeter, Zoll, Punkt, Pica oder Pixel angeben. Farben können als RGB-Wert oder mit einem von 16 vorgegebenen Namen bezeichnet werden.

font: Mit der font-Eigenschaft lassen sich die folgenden zusammenfassen:

  • font-family: Generische Typfamilie (serif, sans-serif, cursiv, fantasy, monospace - der Browser bildet diese auf einen Systemfont ab) oder ein konkreter Font unter Angabe des Namens.
  • font-size: bestimmt die Größe des Zeichensatzes, entweder durch eines von sieben Konstanten ('xx-small' ... 'xx-large'), durch 'larger', 'smaller' bzw. in Prozent in Relation zum Vaterelement oder durch eine absolute Angabe.
  • font-weight: normal, bold (fett), bolder, lighter oder ein Wert zwischen 100 und 900 (normal = 400).
  • font-style: normal, italic, oblique
  • font-variant: normal, small-caps - mit letzerem Wert wird Text kapitalisiert dargestellt
  • line-height: absoluter Wert oder Prozentangabe

Text

  • word-spacing: Größe der Wortzwischenräume; Wert: 'normal' oder absoluter Wert, der auf den Standardwert addiert wird
  • letter-spacing: Größe der Zeichenabstände; Wert: 'normal' oder absoluter Wert, der auf den Standardwert addiert wird.
  • text-align: horizontale Ausrichtung: left, right, center, justify
  • vertical-align: vertikale Ausrichtung: top, bottom, baseline, middle, sub, super, text-top, text-bottom
  • text-decoration: none, underline, overline, line-through, blink
  • text-transform: capitalize, uppercase, lowercase, none
  • text-indent: Einrückung der ersten Zeile eines Textblocks (absolute Länge oder Prozentangabe)

Farbe und Hintergrund

  • color: beschreibt die Farbe des Textes innerhalb eines Elements.
  • background: beschreibt den Hintergrund eines Elements. Es faßt die Attribute background-color, background-image, background-repeat, background-attachment sowie background-position zusammen.

Box: CSS behandelt jeden Textblock wie eine Box, der wiederum von drei ineinander geschachtelten Boxen umgeben ist: Die Polsterung (padding) bezeichnet den Abstand des eigentlichen Textblocks zum Rahmen (border). Der Rand (margin) gibt an, wieviel Abstand zu anderen Boxen gehalten wird.

Die Eigenschaften der einzelnen Teilboxen lassen sich durch mehr als zwei Dutzend Tags festlegen. So läßt sich etwa die Breite von Polsterung, Rahmen und Rand sowohl links, rechts, oben als auch unten angeben.

Klassifikation: Mit Klassifikationseigenschaften lassen sich die HTML-Charakteristika der meisten Tags verändern. Mit der Eigenschaft display lassen sich etwa Tags zu block-level, inline- oder list-item-Elementen machen. Mit dem Parameter 'none' kann ein Element auch völlig unsichtbar gemacht werden.

Mit der Eigenschaft white-space legt der Web-Autor das Erscheinungsbild von Leerzeichen und Zeilenumbrüchen fest, mit list-style kann er das Aussehen von Listen beeinflussen.

Last not least erlaubt es CSS1, das Aussehen von sogenannten Pseudo-Klassen und Pseudoelementen vorzugeben. Pseudoklassen ermöglichen es, Stilvorgaben für unterschiedliche Zustände von bestimmten HTML-Elementen zu machen. Momentan ist A HREF das einzige HTML-Tag, für das Zustände definiert sind. Pseudo-Elemente bezeichnen typografische Strukturen, die nicht innerhalb HTML definiert sind, also etwa first-letter oder first-line.

[#anfang Seitenanfang]


Um ein Style Sheet mit einem HTML-Dokument zu verbinden, stehen mehrere Möglichkeiten zur Verfügung (vgl. [#Lit7 [7]]). Um es in mehreren Web-Seiten verwenden zu können, empfiehlt es sich, die Stilvorlage in eine externe Datei auszulagern und darauf per -Tag im Kopf der HTML-Datei zu verweisen.

Ein Style Sheet kann mit Hilfe des STYLE-Tag aber auch im -Bereich der HTML-Seite eingebettet werden. Dies macht aber nur Sinn, wenn der Web-Designer einem einzelnen Dokument ein bestimmtes Aussehen geben will:

Die Kommentarklammern sorgen dafür, daß ältere Browser, die das STYLE-Element nicht kennen, dieses ignorieren.

Importieren lassen sich Style Sheets mit dem @import-Befehl sowohl aus externen Dateien als auch aus dem STYLE-Element heraus.

Sämtliche @import-Befehle müssen dabei am Anfang des Style Sheets stehen:

     

Abstände frei definieren


Überschrift 1

Unterüberschrift 1.1

Dieser Absatz besteht aus Fließtext. Er hat keinen tieferen Sinn und auch sonst keine Bedeutung. Dieser Absatz besteht aus Fließtext. Er hat keinen tieferen Sinn und auch sonst keine Bedeutung. Dieser Absatz besteht aus Fließtext. Er hat keinen tieferen Sinn und auch sonst keine Bedeutung.

Mit Hilfe von Klassen lassen sich auch - selbstdefinierte - Überschriften richtig positionieren. Kennt der Browser keine Style Sheets, sieht die Seite jedoch noch schlechter aus.

[#anfang Seitenanfang]


Die Überlegungen der W3 zur absoluten Positionierung sind zwar noch nicht abgeschlossen, aber immerhin soweit gediehen, daß sie in Form eines vorläufigen Entwurfs der Allgemeinheit vorgestellt werden [#Lit9 [9]]. Neben Microsoft hat sich auch Netscape zu dem Konzept bekannt, was seinen endgültigen Erfolg besiegeln sollte. Ursprünglich wollte der Hersteller mit dem Communicator 4.0 dafür ein eigenes HTML-Tag namens LAYER etablieren. Mittlerweile empfiehlt die Firma den Entwicklern jedoch, auf die alternativen CSS-Erweiterungen zu setzen. Das LAYER-Tag unterstützt Netscape nunmehr ausschließlich aus Kompatibilitätsgründen.

Der CSS-Ansatz zur absoluten Positionierung ist schlicht und dennoch leistungsfähig: Bekommt ein HTML-Objekt das Property position mit dem Wert absolute oder relative zugewiesen, so wird es nicht im gewöhnlichen Textfluß der Seite dargestellt, sondern an einer Position, die unmittelbar über die Attribute left und top angegeben werden kann. Die Sequenz

   

positioniert beispielsweise Grafik.gif 40 Pixel unterhalb und 40 Pixel rechts von der linken oberen Ecke der HTML-Seite. Die frei positionierten HTML-Tags dürfen sich sogar überlappen. Ein Property namens z-index legt fest, welches Element dabei welches verdeckt.

  HTML-Elemente absolut positionieren       

HTML-Elemente absolut positionieren

Mit einem Trick lassen sich beliebige Elemente absolut positionieren.
Mit einem Trick lassen sich beliebige Elemente absolut positionieren.

Absolut auf der Seite positionierte Elemente dürfen sich sogar überlappen.

[#anfang Seitenanfang]


Trotz Style Sheets sind die Zeiten proprietärer Browser-Erweiterungen noch lange nicht passé. Dafür läßt auch dieser Layoutstandard noch zu viele Aspekte offen. Beispiel Typographie: Auch hier hat der Web-Designer bislang eher bescheidene Gestaltungsmöglichkeiten. Zwar erlaubt es das in HTML 3.2 eingeführte FONT-Tag beziehungsweise dessen CSS-Korrelate, Schriftarten und die Farben der Schriften vorzugeben. Falls diese aber nicht im Betriebssystem installiert sind, so benutzt der Browser automatisch wieder die verbreitetsten Systemfonts. Da sich diese je nach Betriebssystemen unterschieden (Mac: Helvetica, Times und Courier; Windows: Arial, Courier und Times), sehen auch die betreffenden Web-Seiten unterschiedlich aus.

Netscape hat daher in den Communicator 4.01 eine Technik namens TrueDoc integriert. Dieses Verfahren der Firma Bitstream erlaubt es mit einem speziellen 'FONT FACE'-Tag, vektorisierte Fontdateien in einem Dokument zu referenzieren. Der Browser lädt diese - mit 20 bis 40 KByte sehr kleine - sogenannte 'Portable Font Resource'-Datei (PFR), und stellt sie mit Hilfe eines Plug-ins dar.

Kein Netscape-Entwurf ohne Microsoft-Gegenmodell: In Zusammenarbeit mit Adobe entwickelt Microsoft ein Schriftenformat namens OpenType, einer Obermenge von PostScript und TrueType. Hierbei soll auch ein PFR entsprechendes Format namens Compressed Font (CF) entstehen, das für HTML-Dokumente geeignet ist.

Doch es gibt auch grundsätzliche Kritik an der Einbettung von vektorisierten Typdaten: Sie öffne dem systematischen Schriftenklau Tür und Tor. Bis es also einen einheitlichen Standard für Web-Typen gibt, fließen wohl noch etliche Terabyte durch die Modems.

Anzeige