Cascading Style Sheets

Kernidee und Einsatz

Cascading Style Sheets, kurz CSS, ist eine Stylesheet-Sprache für elektronische Dokumente. Zusammen mit HTML und JavaScript gehört CSS zu den Kernsprachen des World Wide Web. CSS ist ein living standard, also ein fortlaufend weiterentwickelter Standard, und wird vom World Wide Web Consortium (W3C) betreut. Die Dateiendung ist .css, der MIME-Type lautet text/css.

CSS dient dazu, Darstellungsvorgaben möglichst von den Inhalten zu trennen. HTML oder XML beschreibt dann vor allem die inhaltliche Gliederung und Bedeutung eines Dokuments; CSS legt getrennt davon fest, wie diese Inhalte aussehen sollen, zum Beispiel Layout, Farben und Typografie. Solche Gestaltungsregeln können zentral in separaten CSS-Dateien gespeichert und für mehrere Dokumente wiederverwendet werden.

CSS kann Elemente anhand verschiedener Eigenschaften ansprechen: nach Elementnamen, ID, Position im Dokument, Attributen oder ihrer Stellung innerhalb einer Elementgruppe. Außerdem besitzt CSS ein Vererbungsmodell: Bestimmte Eigenschaftswerte werden an untergeordnete Elemente weitergegeben, wodurch weniger einzelne Regeln nötig sind.

CSS kann unterschiedliche Darstellungen für verschiedene Ausgabemedien festlegen, etwa Bildschirm, Papier, Projektion oder Sprache. Das ist zum Beispiel nützlich, wenn beim Drucken Linkadressen sichtbar sein sollen oder wenn Inhalte auf kleinen Displays lesbar bleiben müssen. Darstellungsorientierte HTML-Elemente wie font oder center gelten dagegen als veraltet beziehungsweise missbilligt.

Entwicklung der Standards

Erste Vorschläge für Web-Stylesheets gab es 1993, weitere folgten bis 1995. Am 10. Oktober 1994 veröffentlichte Håkon Wium Lie am CERN den ersten Vorschlag für „Cascading HTML style sheets“. Bert Bos arbeitete zur gleichen Zeit an einem Browser namens Argo mit eigener Stylesheet-Sprache; beide entwickelten CSS gemeinsam weiter. Neu war besonders die Idee, Regeln über mehrere Stylesheets hinweg so zu ordnen, dass entschieden werden kann, welche Formatierung auf ein Element angewendet wird.

Nach Präsentationen 1994 und 1995 wurde das W3C auf CSS aufmerksam. Im Dezember 1996 erschien CSS Level 1 als Recommendation. CSS Level 2 wurde im Mai 1998 veröffentlicht, war aber bis Anfang 2010 von keinem verbreiteten Browser vollständig umgesetzt. CSS Level 2 Revision 1, kurz CSS 2.1, übernahm Erfahrungen aus CSS2, korrigierte Unstimmigkeiten und strich Teiltechniken, die Browser nicht korrekt umgesetzt hatten. CSS 2.1 wurde am 7. Juni 2011 als Recommendation veröffentlicht. 2014 unterstützten die meisten Webbrowser CSS 2.1 weitgehend korrekt. Im April 2016 erschien der erste öffentliche Arbeitsentwurf von CSS 2.2.

CSS Level 3 ist seit 2000 in Entwicklung. Anders als frühere Versionen ist CSS3 modular aufgebaut: Einzelne Teilbereiche wie Selektoren, Media Queries oder Steuerung der Sprachausgabe können unabhängig weiterentwickelt werden. Breit unterstützte Standards sind unter anderem CSS Color Level 3, CSS Namespaces, Selectors Level 3 und Media Queries. Für CSS soll es laut CSS-Arbeitsgruppe keine Gesamtversion „CSS4“ geben; stattdessen werden einzelne Module mit eigenen Versionsnummern weiterentwickelt.

Regeln, Selektoren und Kaskade

Eine CSS-Regel besteht aus Selektoren und Deklarationen. Grundform:

Selektor1 [, Selektor2 [, …] ] { Eigenschaft: Wert; }

Der Selektor legt fest, welche Teile eines Dokuments betroffen sind. In geschweiften Klammern stehen die Eigenschafts-Deklarationen. Jede Deklaration besteht aus Eigenschaftsname, Doppelpunkt und Wert. Mehrere Deklarationen werden durch Semikolons getrennt; nach der letzten Deklaration ist ein Semikolon erlaubt, aber nicht nötig. Leerraum kann um die Bestandteile frei verwendet werden. Kommentare werden in CSS mit /* Kommentar */ geschrieben.

Selektoren beschreiben Bedingungen, die ein Element erfüllen muss. Wichtige Arten sind Typselektoren wie E für Elemente eines bestimmten Typs, Klassenselektoren wie .c, ID-Selektoren wie #myid und Attributselektoren wie [foo] oder [foo=bar]. Kombinatoren beschreiben Beziehungen im Dokument, zum Beispiel E F für Nachfahren, E > F für direkte Kinder, E + F für direkte Nachbarn und E ~ F für Geschwister.

Pseudoklassen wählen Elemente nach Zustand oder Struktur aus, zum Beispiel :link, :visited, :hover, :focus, :checked, :not(foo), :first-child oder :nth-child(…). Pseudoelemente wählen oder erzeugen besondere Teile eines Elements, etwa ::first-line, ::first-letter, ::before und ::after.

Ein wichtiges Prinzip ist die Kaskade: Verschiedene Stylesheets und Regeln können zusammenwirken. Wenn mehrere Deklarationen dieselbe Eigenschaft für dasselbe Element festlegen, überschreibt die letzte passende Eigenschaftsdeklaration frühere Deklarationen derselben Eigenschaft. Angaben können vom Browser, vom Benutzer oder vom Autor des Stylesheets stammen; umgesetzt werden zuerst die Angaben des Browsers, dann die des Benutzers und schließlich die des Autors.

Layout und Längeneinheiten

In den Anfängen der Webentwicklung wurden komplexe Layouts oft mit dem HTML-Element table gebaut: Die Website wurde als Tabelle mit Zeilen, Spalten und Zellen strukturiert. Das hatte Nachteile, besonders geringe Gestaltungsfreiheit und schlechte Darstellung auf kleinen Displays.

Moderne Browser unterstützen CSS-Verfahren für flexiblere Layouts. Flexbox wird mit display: flex aktiviert und erlaubt es, HTML-Elemente innerhalb eines Elements frei zu positionieren und nebeneinanderliegende Elemente zum Beispiel auf mobilen Geräten umzubrechen. Grid wird mit display: grid aktiviert und erlaubt es, HTML-Elemente in Bereiche einzuteilen, deren Größe und Position festgelegt werden können.

Für Layouts nutzt CSS Längeneinheiten. Absolute Längeneinheiten beziehen sich zwar auf physikalische Einheiten wie Zentimeter oder Zoll, sind aber nicht identisch mit tatsächlichen Bildschirmmaßen. Eine Angabe von 1cm in CSS muss auf dem Bildschirm also nicht genau 1 cm entsprechen. Wichtige festgelegte Beziehungen sind: 1in = 2.54cm = 25.4mm = 96px = 72pt und 4px = 3pt. Die Einheit px heißt zwar „Pixel“, entspricht aber nicht zwingend einem echten Bildschirmpixel.

Relative Längeneinheiten beziehen sich auf andere Größen, etwa Prozentwerte, Bildschirmgröße oder Schriftgrößen. em bezieht sich auf die Schrift-Blockhöhe des aktuellen Elements, rem auf die Schrift-Blockhöhe des Wurzel-Elements. lh und rlh beziehen sich auf Zeilenhöhen, ch und rch auf die Breite des Zeichens „0“ im aktuellen Font beziehungsweise im Wurzel-Font.

Einbindung und angepasste Darstellung

CSS wird am häufigsten mit HTML oder XHTML kombiniert. Es kann als externes Stylesheet mit einem link-Element eingebunden werden, als internes Stylesheet in einem style-Element stehen oder direkt in einem HTML-Element über das style-Attribut notiert werden. Die externe Einbindung ist am häufigsten, weil ein Stylesheet für mehrere Dokumente nur einmal geladen werden muss und Wiederholungen im Code vermieden werden. Mit @import kann CSS weitere externe Stylesheets einbinden.

Bei link-Elementen gibt es dauerhafte Stylesheets, bevorzugte Stylesheets und alternative Stylesheets. Dauerhafte Stylesheets werden auf jeden Fall verwendet. Bevorzugte Stylesheets gelten, bis der Benutzer ein anderes auswählt. Alternative Stylesheets müssen ausdrücklich gewählt werden und sollten zusammen mit einem fest eingebundenen Stylesheet genutzt werden. CSS kann auch dynamisch mit JavaScript eingebunden werden; dabei kann der Inhalt kurz ohne Stil erscheinen, was als Flash of Unstyled Content auffallen kann.

Für verschiedene Geräte oder Eigenschaften gibt es spezifische Stylesheets. Seit CSS2 können medienspezifische Stylesheets über das Attribut media angesprochen werden, zum Beispiel all, screen, print, speech, braille, handheld, projection, tty oder tv. Innerhalb einer CSS-Datei können @media-Regeln genutzt werden, etwa um beim Drucken schwarze Schrift, weißen Hintergrund, kleinere Überschriften oder ausgeblendete Navigation festzulegen.

Seit CSS3 erweitern Media Queries dieses Prinzip. Sie fragen Eigenschaften des aktuellen Geräts ab, zum Beispiel Breite und Höhe des Browserfensters, Breite und Höhe des Geräts, Orientierung oder Bildschirmauflösung. Media Queries sind besonders wichtig für responsives Webdesign, also für Webseiten, die sich an unterschiedliche Geräte anpassen.

Kompatibilität, Hacks und Sicherheit

Browser unterscheiden sich darin, welche CSS-Eigenschaften sie unterstützen und welche Standarddarstellungen sie für HTML-Elemente verwenden. Dadurch müssen Entwickler darauf achten, dass eine Website in verschiedenen Browsern nicht zu stark abweicht. Möglichkeiten zur Lösung sind Reset-Stylesheets, Conditional Comments für den Internet Explorer und Browserpräfixe für Funktionen, die in älteren Browserversionen oder nur in bestimmten Browsern verfügbar sind.

CSS-Hacks sind nichtstandardisierte CSS-Techniken, die Interpretationsschwächen bestimmter Browser ausnutzen. Sie können verwendet werden, um einzelnen Browsern besondere Regeln zu geben oder Regeln auszuschließen. Ein Beispiel ist der Star-HTML-Hack: p { background-color: blue; } färbt Absätze blau, während * html p { background-color: red; } nur vom Internet Explorer vor Version 7 zusätzlich interpretiert wurde und Absätze dort rot färbte.

CSS kann auch Sicherheitsrisiken verursachen. Laut Artikel ist es möglich, CSS ohne JavaScript oder andere Skriptsprachen zum Tracken von Nutzern oder zum Abfangen von Daten aus Webformularen, zum Beispiel Passwörtern, zu verwenden. Software-Keylogger, die nur aus CSS-Anweisungen bestehen, seien mit wenigen Zeilen Code realisierbar.