Cascading Style Sheets { Grundlegendes : Änderungen und Ergänzungen in CSS 2.1 }

Dieser Artikel stellt alle Änderungen und Ergänzungen des neuen Standards CSS 2.1 vor und diskutiert ihre Auswirkungen.

CSS 2 wurde 1998 zum gültigen Standard. Seitdem konnten viele praktische Erfahrungen bei der Anwendung der Spezifikation gesammelt werden. Die meisten dieser Erfahrungen fließen in die künftigen CSS-3-Spezifikationen ein. Auf einigen Gebieten wird aber die Umsetzung und Interoperabilität von CSS 2 durch die gegenwärtige Situation behindert.

CSS 2.1 versucht, die erkannten Probleme durch eine Reihe von Maßnahmen zu lösen, die in der Spezifikation selbst so beschrieben werden:

Ein auf CSS 2 basierendes Stylesheet ist nicht unbedingt vorwärtskompatibel mit CSS 2.1, dennoch sind die vielen Vorteile der neuen Version es wert, die Kompatibilität zu brechen. Ein Stylesheet, dass nur auf den Eigenschaften in CSS 2.1 basiert, wird mit den heutigen Browsern weniger Probleme haben, als eins, dass auf allen Eigenschaften der Version CSS 2 basiert

Die Änderungen in Kurzform:

Ausführliche Beschreibung der Änderungen

Konformität

Wenn ein Anwenderprogramm der Norm entsprechen soll, dann muss es jetzt dem Benutzer die Möglichkeit geben, eine Datei mit einem Benutzer-Stylesheet auszuwählen. Diese Bedingung war bisher nicht zwingend vorgeschrieben.

Anwenderprogramme, die auf Geräten laufen, bei denen keine Möglichkeit besteht, Benutzer- Stylesheets zu schreiben oder auszuwählen, sind von dieser Regelung ausgenommen.

Diese Neuregelung spielt einen der größten Trümpfe der durch CSS möglich gewordenen Trennung von Präsentation und Inhalt aus und ist dadurch ein großer Fortschritt in Richtung Webzugänglichkeit. Hiermit wird jedem Websurfer die Möglichkeit gegeben, verschiedene Eigenschaften von Websites nur für seinen eigenen Bildschirm zu ändern, wenn er deren Inhalte, z. B. auf Grund einer Behinderung, nicht erkennen kann.

Sie bedeutet nun aber nicht, dass alle Webautoren befürchten müssen, dass ihre wohl-durchgestylten Designentwürfe durch Benutzer-Stylesheets verhunzt würden. Die große Masse der Surfer wird wahrscheinlich nie wissen, wie sie ein Benutzer-Stylesheet erstellt (einfach deshalb, weil sie es nicht braucht). Diejenigen Surfer, die wissen, wie es geht, haben meistens triftige Gründe dafür. Für Behinderte ist das Design in der Regel zweitrangig.

Benannte Farben

Zusätzlich wird der Farbwert orange mit dem Hexadezimalwert #ffA500 eingeführt, da dieser Wert bereits in allen modernen Browsern darstellbar ist. Der Wert ist für die folgenden Eigenschaften anwendbar:

Dies ist nur eine unbedeutende Änderung, die aber vom Standpunkt des menschlichen Farbenempfindens aus wohl Sinn macht. Die interessanteste Ergänzung ist hier wohl das von Tantek Celik entworfene Farbdiagramm.

Berechnete Werte

Bisher wurden Prozentwerte mit einem Referenzwert multipliziert, um den Berechneten Wert zu erhalten. Der Berechnete Wert konnte dabei niemals die Einheit '%' haben. Neu in CSS 2.1 ist, dass der berechnete Wert selbst wieder ein Prozentwert sein kann. Insbesondere die folgenden Eigenschaften können nun den Prozentwert vererben, wenn er als Spezifizierter Wert gegeben ist:

Mit Ausnahme der Eigenschaft text-indent erben die genannten Eigenschaften den Berechneten Wert aber nur, wenn als Schlüsselwort inherit spezifiziert ist.

Um dieses Ziel zu erreichen, wurde in die Berechnung des Aktuellen Wertes ein weiterer Schritt und der Begriff Verwendeter Wert neu eingeführt, sodass jetzt folgende vier Schritte durchlaufen werden:

Spezifizierter Wert → Berechneter Wert → Verwendeter Wert → Aktueller Wert.

Die genaue Abfolge dieser Umrechnungen ist im Abschnitt Relative Längenwerte detailliert beschrieben.

Berechnung der Spezifizität

Ausgehend von der gängigen Praxis, haben heute Selektoren, die durch das Attribut style im Quelltext spezifiziert werden, eine höhere Spezifizität als jede Regel in einem Stylesheet. Dies wird erreicht, indem man die Spezifizität nicht mehr als Kette von drei Ziffern darstellt, sondern als Kette von vier Ziffern. Erhielten durch das Attribut style definierte Selektoren früher die Spezifizität 1-0-0, erhalten sie heute die Spezifizität 1-0-0-0.

Diese Änderung war nötig, um Eindeutigkeit in der Spezifizität zu erreichen. In CSS 2 hatte noch ein ID-Selektor die gleiche Spezifizität wie eine im Quelltext definierte Style-Regel. Das führte nicht nur zu Problemen in der Kaskade, sondern auch zu der Möglichkeit, dass durch ein simples Klassenattribut alle Inline-Styles nicht mehr sichtbar waren.

Inline-Styles kommen in der Regel nur während der Test- und Entwicklungsphase einer Website zum Zuge. Es ist schlechter Stil, sie auch nach Fertigstellung in einer Website zu belassen. Umso wichtiger ist es, dass sie während der Testphase unbeeinflußt von allen anderen Regeln und Deklarationen dargestellt werden. Auch trägt diese Änderung zur Erstellung von sauberem Code bei, denn Webautoren sind so gezwungen, ihre obsolet gewordenen Inline-Styles aus den Quelltexten zu entfernen und sie nicht einfach aus Bequemlichkeit dort stehen zu lassen.

Angaben zur Darstellung im Quelltext

Bestimmte Hinweise zur Darstellung im Quelltext, wie z. B. das Element font oder das Attribut align, wurden in CSS 2 noch generell anerkannt. Heute wird davon ausgegangen, dass Hinweise zur Darstellung im Quelltext in neu erstellten Websites nicht mehr existieren, weder als Elemente, noch als Attribute. Alle diese Hinweise können durch CSS- Deklarationen ersetzt werden und sind deshalb in der aktuellen HTML- Spezifikation als unerwünscht (='deprecated') gekennzeichnet.

Zusätzlich definiert CSS 2.1 eine Liste von HTML-Attributen, die nicht der Präsentation dienen (die hier genannte Liste ist vollständig):

abbr, accept-charset, accept, accesskey, action, alt, archive, axis, charset, checked, cite, class, classid, code, codebase, codetype, colspan, coords, data, datetime, declare, defer, dir, disabled, enctype, for, headers, href, hreflang, http-equiv, id, ismap, label, lang, language, longdesc, maxlength, media, method, multiple, name, nohref, object, onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload, onunload, profile, prompt, readonly, rel, rev, rowspan, scheme, scope, selected, shape, span, src, standby, start, style, summary, title, type, usemap, value, valuetype, version.

Sind dennoch im Quelltext eines HTML- Dokuments Hinweise zur Darstellung enthalten, hat das Anwenderprogramm die Wahl, sie entweder zu ignorieren oder zu berücksichtigen. Falls es sie berücksichtigt, werden sie zuerst in die entsprechenden CSS-Regeln übertragen, dann ihre Spezifizität auf 0-0-0-0 gesetzt. In der Kaskade werden sie wie Regeln behandelt, die ganz am Anfang des Autoren-Stylesheets stehen. Deshalb sind sie gegenüber allen späteren CSS-Regeln nachrangig.

Bedeutung für des Redesign alter Websites

Diese Neuregelung hat eine wichtige Implikation für das Redesign von existierenden Websites: die in alten Webtexten vorhandenen font-Elemente brauchen nicht mehr entfernt zu werden, wenn im Stylesheet eine relativierende Deklaration eingefügt wird.

Diese automatisch erzeugten Regeln stehen zwar an derselben Stelle im Text wie Inline-Styles, erhalten aber dennoch die Spezifikation '0-0-0-0'. Deshalb bekommen alle anderen Regeln für das Element font Vorrang. Das bedeutet praktisch: die Element/Attribut-Kombination font size wird nur dann berücksichtigt, wenn es im Stylesheet keinen Selektor font[size] gibt.

Man kann also alle im Quelltext vorhandenen Element/Attribut-Kombinationen zur Schriftgröße relativieren, indem man im Stylesheet die Regel body font[size]{font-size:1em} einfügt. Dann übernehmen diese Elemente einfach die Schriftgröße des Elternelements.

Analog dazu lassen sich auch sämtliche HTML-Angaben zur Schriftfarbe durch die CSS-Regel font[color] {color:#...} übergehen. Man muss dort einfach nur dieselbe Farbe deklarieren, die auch für den Rest des Textes gilt.

Noch einfacher wird es, indem man die folgende Deklaration im Stylesheet einfügt:

font { color: inherit; /* ersetzt 'font color' */ font-family: inherit; /* ersetzt 'font face' */ font-size: inherit; /* ersetzt 'font size' */

Das bewirkt, dass alle Elemente font die entsprechenden Eigenschaften von den Elternelementen erben — mit einer Ausnahme: es funktioniert nicht mit NN 4.

Für XML-Dokumente werden alle Hinweise zur Präsentation im Quelltext durch Regeln in Stylesheet des Anwenderprogramms ersetzt. Das bedeutet, dass sie eine sehr geringe Spezifizität haben und selbst durch Stylesheets des Benutzers überschrieben werden können.

Die Eigenschaft display

Ein mit inline-block formatiertes Element erhält den Stand eines Block- Level- Elements innerhalb des Kontexts zur Inline- Formatierung. Dadurch, dass ein mit inline-block deklariertes Element sich äußerlich wie ein replaziertes Element innerhalb der Textzeile verhält, fügt es sich nahtlos in einen Textabsatz ein. Anders als bei den normalen Inline- Level- Elementen hat man hier aber die Möglichkeit, die Eigenschaften width, height und margin zu deklarieren.

Breite von absolut positionierten Elementen

Die Möglichkeit, absolut positionierte Elemente auf die tatsächliche Breite ihrer Inhalte zu schrumpfen, wurde neu in den Standard aufgenommen. Wenn sowohl das Element width als auch eins der Elemente right oder left mit auto deklariert sind, dann wird als Berechnete Breite des Elements die Breite seines Inhalts angenommen. Der für die Berechnung verwendete Algorithmus ist ähnlich dem, der für die Spalten von Tabellen verwendet wird.

Die Angabe in CSS 2, dass zuerst right bzw. left auf 'Null' gesetzt und anschließend die Breite des Elements berechnet würden, war falsch.

Der Sinn dieser neuen Bestimmung ist, eine bessere Lösung für eine Gleichung mit zu vielen Unbekannten zu finden. Wenn die Breite eines Elements nicht eindeutig vorgegeben ist, richtet sich ihr endgültiger Wert jetzt nicht mehr nach der Breite des umfassenden Blocks, sondern nach der Breite der Inhalte des Elements.

Höhe von absolut positionierten Elementen

Wie bei Elementen aus dem normalen Elementfluß, wird die Höhe eines absolut positionierten Elements jetzt auf die tatsächliche Höhe seines Inhalts zurückgeschrumpft. Wenn sowohl das Element height wie auch das Element bottom mit auto deklariert sind, dann wird als Berechnete Höhe des Elements die Höhe seines Inhalts angenommen.

Die Angabe in CSS 2, dass zuerst bottom auf 'Null' gesetzt und anschließend die Höhe des Elements berechnet würde, war falsch.

Ähnliches wie für die Breite eines Elements gilt für seine Höhe, wenn sie nicht eindeutig definiert ist: der endgültige Wert für die Höhe wird jetzt nicht mehr durch die Dimensionen des umfassenden Blocks bestimmt, sondern durch die Höhe der Inhalte des Elements.

Die Eigenschaft clip

Für diese Eigenschaft werden die vier Variablen des Wertes rect (top, right, bottom, left) heute auf andere Weise berechnet.

In CSS 2 wurde für jede dieser Variablen der Abstand von der zugehörigen Seite der Box angegeben, also von oben, von rechts, von unten und von links.

In CSS 2.1 entsprechen die Werte für top und bottom den Abständen von der oberen Rahmenkante der Box und die Werte für left oder right den Abständen von der linken Rahmenkante der Box bei Schreibrichtung von links nach rechts und von der rechten Rahmenkante der Box bei Schreibrichtung von rechts nach links.

Zusätzlich wird Webautoren empfohlen, die vier Variablen durch Kommata zu trennen.

Diese Änderung ist praktisch eine Anpassung an die Realität: alle modernen Browser haben die Entfernungen bereits seit längerem von oben bzw. links/rechts berechnet.

Die Eigenschaft content

Hier wird der Wert normal neu eingeführt. Er bewirkt, dass der Browser das in der CSS-Regel beschriebene Pseudoelement nicht generiert. Der Grund für die Ergänzung ist, dass bis jetzt durch die Deklaration :before {content: ""} eine leere Box generiert wurde. Auf Grund der Bedeutung, die der Wert normal in CSS 3 haben wird, wurde dieser Wert nicht none genannt.

Der Wert normal ist vor allem dann nützlich, wenn man Stylesheets für verschiedene Medien erstellt und nicht alle generierten Inhalte auf allen Medien dargestellt werden sollen, z. B. Bildschirminhalte, die nicht unbedingt im Druck ausgegeben werden sollen. (Diese Änderung hat in der Praxis nur wenig Bedeutung, weil IE/Win 6 die Eigenschaft content als Ganzes nicht versteht.)

Das Verschwinden des Wertes <uri> ist nicht weiter tragisch, denn dieser Wert wurde bisher von keinem der modernen Browser realisiert.

Druckseitenformatierung

Die Eigenschaften size, marks und page sind nicht Bestandteil von CSS 2.1.

Die Eigenschaft marks diente der Platzierung von Schneidmarken und Passermarken im Ausdruck, durch page konnte mit Hilfe der At-Regel @page die Orientierung eines Ausdrucks geändert werden und size letztendlich legte die Seitengröße und Orientierung des Druckausgabemediums fest. Diese Eigenschaften sollten ein erster Anlauf auf das Ziel sein, Druckvorlagen mit Hilfe von HTML und CSS zu erstellen.

Das W3C gibt durch Entfernen dieser Eigenschaften aus dem aktuellen Standard das Ziel aber nicht auf, sondern geht in CSS 3 anders an die Sache heran. Das CSS-3-Modul Paged Media definiert das CSS-Seitenmodell, in dem die Aufteilung einer im Grunde genommen 'unbegrenzt großen' Website auf einzelne Druckseiten beschrieben wird.

Hintergrundeigenschaften

Die Bestimmung, dass Schlüsselwörter der Eigenschaft background-position nicht mit Längenwerten und Prozentangaben mischbar sind, wurde entfernt.

Wiederholung und Positionierung einer Hintergrundgrafik innerhalb von Inline- Level- Elementen sind nicht definiert.

Die neue Regelung bestimmt, dass jetzt Schlüsselwörter mit Längenwerten und mit Prozentwerten kombiniert werden können. So sind jetzt zum Beispiel auch Werte wie left 100% möglich. Es gibt aber eine einschränkende Bedingung: die Schlüsselworte left und right dürfen in solchen Kombinationen nur als erster Wert notiert werden, die Schlüsselworte top und bottom dürfen nur als zweiter Wert erscheinen.

Die Position der Hintergrundgrafik orientiert sich an der padding-Kante eines Elements. Da Elemente im Kontext zur Inline- Formatierung kein padding besitzen, ist die Position des Hintergrundes in diesen Elementen nicht definiert.

Fonteigenschaften

Die Eigenschaften font-stretch und font-size-adjust entfallen in CSS 2.1. Ebenso ist die At-Regel @font-face nicht mehr Bestandteil der Spezifikation.

Auch der bisherige Anhang C 'Umsetzung und Hinweise zur Ausführung von Schriftart- Definitionen' ('Implementation and performance notes for fonts') wurde nicht übernommen.

In dieser Version der Spezifikation sind sämtliche Regelungen über Fontbeschreibungen und Fontcharakteristika weggefallen, die verbleibenden Regeln wurden stark vereinfacht. Dadurch hat das Kapitel Fonts heute nur noch etwa ein Viertel seiner vorherigen Größe.

Der in CSS 2 beschriebene Algorithmus zur Berechnung von Fonts stammte im wesentlichen noch aus CSS 1, wurde aber seinerzeit mit einigen Erweiterungen versehen. Diese Erweiterungen sollten jedoch dann übergegangen werden, wenn ein Stylesheet keine @font-face-Regeln enthielt. Da bis heute kein Browser mit der At-Regel @font-face etwas anfangen kann, mussten die Browser theoretisch auf das alte CSS-1-Regelwerk zurückgreifen.

Das war natürlich nicht der Fall und dementsprechend wurde das Regelwerk jetzt angepasst: der Algorithmus wurde wesentlich vereinfacht und besteht heute nur noch aus fünf statt neun Punkten.

Ähnlich verhält es sich mit den Eigenschaften zur Schriftlaufweite, font-stretch, und font-size-adjust zur Verbesserung der Lesbarkeit von Schriften. Beide wurden mit CSS 2 neu eingeführt, aber niemals in die Praxis umgesetzt. Sie erscheinen erst wieder im CSS-3-Modul Fonts.

Die Eigenschaft white-space

Für diese Eigenschaft wurden die zwei neuen Werte pre-wrap und pre-line sowie das Whitespace Processing Model eingeführt.

Die beiden neuen Werte wirken ähnlich wie der schon bekannte Wert pre, der eine Sequenz von Leerzeichen in ganzer Länge darstellt und Zeilenumbrüche nur erlaubt, wo sie im Quelltext oder im generierten Inhalt explizit vorgegeben sind.

pre-wrap stellt eine Sequenz von Leerzeichen ebenfalls in ganzer Länge dar, erlaubt aber Zeilenumbrüche auch am normalen Ende einer Zeile, das heißt dort, wo der Zeilenumbruch auch normalerweise stattfinden würde.

pre-line zieht eine Sequenz von Leerzeichen zu einem Zeichen zusammen und erlaubt Zeilenumbrüche auch am normalen Ende einer Zeile.

Das Whitespace Processing Model ist ein Modell zur Berechnung der Leerzeichen in bidirektionalem Text.

Die Eigenschaft text-shadow

Diese Eigenschaft war nicht Teil von CSS 1, sondern wurde erst mit CSS 2 neu eingeführt. Sie wurde bisher von keinem der modernen Browser umgesetzt und erscheint erst wieder im CSS-3-Modul Text.

Die Eigenschaft caption-side

Untertitel einer Tabelle können nur noch oberhalb oder unterhalb der Tabelle stehen, nicht mehr rechts oder links davon, d. h. es sind nur noch die Werte top und bottom erlaubt.

Die Elemente caption vor oder nach einer Tabelle sind eigenständige Block- Level- Elemente. Sie können deshalb im normalen Elementfluß nicht neben anderen Block- Level- Elementen, wie z. B. table, stehen. Will man beide Elemente nebeneinander stehen haben, verwendet man am besten die Eigenschaft float.

Horizontale Ausrichtung in Tabellenspalten

Der Wert string der Eigenschaft text-align wurde aus der Spezifikation entfernt.

Praktische Anwendungsmöglichkeiten für diesen Wert sind z. B. Preistabellen oder Formulare. Er ist aber ebenfalls eines der mit CSS 2 eingeführten Merkmale, die bis jetzt noch von keinem Browser reproduziert werden. So bleibt nur, die Inhalte wie bisher in zwei Tabellenzellen aufzuteilen, von denen die linke nach rechts orientiert und die rechte nach links orientiert ist.

Rahmenmodelle in Tabellen

Hier hat sich der Ausgangswert für die Eigenschaft border-collapse geändert. In CSS 2 war er collapse, in CSS 2.1 ist er jetzt separate.

Diese Änderung bezieht sich auf das CSS-Tabellenmodell. Sie trägt der Tatsache Rechnung, dass die Mehrheit der modernen Browser Tabellen heute mit Abständen zwischen den Zellen darstellt. Dies entspricht dem Separated Border Model oder einer Darstellung, die ähnlich aussieht.

Mauszeiger

Dieser Cursor zeigt an, dass ein Program zwar noch aktiv ist, der Benutzer aber dennoch interaktive Eingaben machen kann. Er wird meistens als Pfeil mit Uhr oder Sanduhr ausgegeben. Fahren Sie zum Beispiel mit der Maus über diesen Absatz (dieser Wert wird noch nicht durch alle Browser unterstützt).

Aurale Stylesheets

Das gesamte Kapitel 19 über aurale Stylesheets ist nicht länger Bestandteil der Norm. Es wird jetzt als Anhang A geführt und hat nur noch informativen Charakter. Das Gleiche gilt für die in auralen Stylesheets verwendeten Einheiten deg, grad, rad, ms, s, Hz und kHz.

Die Eigenschaft speak-header aus dem Kapitel Tabellen wurde ebenfalls in diesen Anhang verlegt.

Der Medientyp aural wird als missbilligt ('deprecated') eingestuft und durch den neuen Medientyp speech in CSS 3 ersetzt.

Die Regeln über aurale Stylesheets werden in ihrer jetzigen Form nicht weiter existieren, sondern im CSS-3-Modul Speech aufgehen, das auf der Speech Synthesis Markup Language basiert.

Änderungen und Ergänzungen in CSS 2.1

Die Änderungen in Kurzform:

Ausführliche Beschreibung der Änderungen

Konformität

Benannte Farben

Berechnete Werte

Berechnung der Spezifizität

Angaben zur Darstellung im Quelltext

Bedeutung für des Redesign alter Websites

Die Eigenschaft `display`

Breite von absolut positionierten Elementen

Höhe von absolut positionierten Elementen

Die Eigenschaft `clip`

Die Eigenschaft `content`

Druckseitenformatierung

Hintergrundeigenschaften

Fonteigenschaften

Die Eigenschaft `white-space`

Die Eigenschaft `text-shadow`

Die Eigenschaft `caption-side`

Horizontale Ausrichtung in Tabellenspalten

Rahmenmodelle in Tabellen

Mauszeiger

Aurale Stylesheets

Weitere Änderungen und Ergänzungen

Änderungen und Ergänzungen in CSS 2.1

Die Änderungen in Kurzform:

Ausführliche Beschreibung der Änderungen

Konformität

Benannte Farben

Berechnete Werte

Berechnung der Spezifizität

Angaben zur Darstellung im Quelltext

Bedeutung für des Redesign alter Websites

Die Eigenschaft display

Breite von absolut positionierten Elementen

Höhe von absolut positionierten Elementen

Die Eigenschaft clip

Die Eigenschaft content

Druckseitenformatierung

Hintergrundeigenschaften

Fonteigenschaften

Die Eigenschaft white-space

Die Eigenschaft text-shadow

Die Eigenschaft caption-side

Horizontale Ausrichtung in Tabellenspalten

Rahmenmodelle in Tabellen

Mauszeiger

Aurale Stylesheets

Weitere Änderungen und Ergänzungen

Die Eigenschaft `display`

Die Eigenschaft `clip`

Die Eigenschaft `content`

Die Eigenschaft `white-space`

Die Eigenschaft `text-shadow`

Die Eigenschaft `caption-side`