Regeln

Ein Stylesheet besteht vor allem aus einer Menge von Regeln.

Eine Regel (auch: Regelmenge, Regelsatz) ist die Grundkonstruktion eines Stylesheets. Regeln bestehen aus mindestens einem Selektor und einem Paar geschweifter Klammern, Deklarationsblock genannt, die eine Liste mit null oder mehr durch Semikola voneinander abgetrennten Deklarationen enthalten.

Eine Deklaration ist Bestandteil eines CSS-Deklarationsblocks. Deklarationen bestehen aus einer Eigenschaft, gefolgt von einem Doppelpunkt, gefolgt von einem Wert. Vor und hinter diesen Bestandteilen kann sich Leerraum befinden. Deklarationen werden durch Semikola voneinander getrennt.

Teilen sich mehrere Selektoren denselben Deklarationsblock, können sie durch Kommata getrennt nacheinander aufgeführt werden. Beachten Sie auch die übersichtliche Blockschreibweise bei der Notation mehrerer Deklarationen innerhalb eines Blocks.

p { margin: 0; }
    
h1, h2, h3, h4, h5, h6 {
  color: #889399;
  background-color: transparent;
  margin: 2em 0 1em 0;
}

Tabelle 6.2 verdeutlicht die Bezeichnungen.

Einige Eigenschaften sind zusammenfassende Eigenschaften (shorthand properties), die es Autoren erlauben, die Werte mehrere Eigenschaften innerhalb einer einzigen Eigenschaft anzugeben.

So lassen sich diese Eigenschaften

p {
  border-width: 1px;
  border-style: solid;
  border-color: red;
}

in der folgenden Eigenschaft zusammenfassen:

p { border: 1px solid red; }

Werden in einer zusammenfassenden Form Werte weggelassen, wird diesen »fehlenden« Eigenschaften ihr Ausgangswert zugewiesen (lesen Sie dazu Kapitel 6.6 »Vererbung und Initialwerte«).

Zum Seitenanfang

Maskierung

Für alle formalen Sprachen gelten sehr strenge Regeln, die festlegen, welche Zeichen an welcher Stelle erlaubt sind. Möchten Sie ein Zeichen verwenden, das syntaktisch an dieser Stelle nicht zulässig ist oder eine besondere Bedeutung hat, die an dieser Stelle nicht gewünscht ist, müssen Sie es maskieren, das heißt, Sie müssen ihm seine besondere Bedeutung an dieser Stelle nehmen. In CSS maskieren Sie ein Zeichen, indem Sie ihm einen Backslash (\) voranstellen. Die beiden folgenden Regeln sind somit äquivalent:

bo\
dy { margin: 0; }

body { margin: 0; }

Dass einige veraltete Browser mit der Zeichenmaskierung nicht klarkommen, lässt sich für CSS-Hacks ausnutzen (siehe Kapitel 6.8.4 »CSS«).

Webautoren benötigen Zeichenmaskierung auch dann, wenn sie Zeichen benutzen wollen, die außerhalb des Zeichenvorrats der gewählten Zeichenkodierung liegen. In diesen Fällen folgt dem Backslash die hexadezimale Referenz der Unicode-Position des Zeichens.

a[href^="http://"]:before,
a[href^="https://"]:before {
  /* Nordostpfeil und Leerzeichen vor externen Links */
  content: "\2197\00A0";
}

Zum Seitenanfang

Kommentare

Wie in XHTML gibt es auch in CSS die Möglichkeit, Kommentare zu notieren. Deren Syntax ist an die Programmiersprache C angelehnt und sieht wie folgt aus:

/* Einzeiliger Kommentar */
    
/* Mehrzeiliger
   Kommentar */

Kommentare dürfen nicht verschachtelt werden.

CSSDOC

Umfangreiche Websites, an denen mehrere Entwickler über einen längeren Zeitraum gemeinsam arbeiten, erfordern klare Konventionen, Tabus und umfassende Dokumentationen. Dabei sind Kommentare besonders wichtig. Jeder gewissenhafte Webautor kommentiert seine Stylesheets sauber, ausführlich und präzise. Kommentare erhöhen die Übersichtlichkeit und Verständlichkeit und helfen dabei, sich in einem fremden Stylesheet zurechtzufinden – oder in einem eigenen, an dem man schon seit einigen Wochen nicht mehr gearbeitet hat.

Leider ist die ausführliche Dokumentation eines Stylesheets eher die Seltenheit. Wenn Webautoren ihre Stylesheets kommentieren, dann tun sie es häufig zur Strukturierung, weniger zur Dokumentation, und jeder so, wie er es sich im Laufe der Jahre angewöhnt hat. Natürlich einigen auch Webautoren sich schnell auf einen gemeinsamen Kommentarstil, wenn sie zusammen an denselben Stylesheets arbeiten, aber sie sind derzeit auf sich allein gestellt, da kein einheitlicher Dokumentationsstandard zur Verfügung steht. Hier soll CSSDOC Abhilfe schaffen.

CSSDOC ist ein sinnvoller Arbeitsentwurf eines längst überfälligen Dokumentationsstandard für CSS-Stylesheets. Derzeit gibt es noch keine fertige CSSDOC-Spezifikation und daher auch noch keine Werkzeuge, die direkt aus den Kommentaren eine Dokumentation erzeugen oder Webautoren bei der Kommentierung ihrer Stylesheets unterstützen. Sobald die erste stabile Dokumentation vorliegt, ist auch schnell mit entsprechenden Implementierungen zu rechnen.

Webautoren notieren CSSDOC-Kommentare in Form spezieller Kommentarblöcke, DocBlock genannt. DocBlöcke werden mit /** eingeleitet und mit */ beendet. Alle Zeilen innerhalb eines Blocks beginnen mit *. Jeder Block besteht aus bis zu drei Teilen: Titel, Beschreibung und CSSDOC-Tags. Diese Teile werden durch eine leere Kommentarzeile voneinander abgegrenzt.

/**
* Ein einfacher DocBlock ohne Tags
*
* Hier steht die Beschreibung. Wenn sie besonders lang
* ist, kann sie sich über mehrere Zeilen erstrecken.
*/

CSSDOC unterscheidet zwischen Dateikommentaren (File Comments), die den Inhalt einer Datei beschreiben, und Kommentarblöcken für einzelne Abschnitte (Section Comments). Der Dateikommentar dient der einleitenden Beschreibung eines CSS-Stylesheets. Er steht direkt zu Beginn des Stylesheets beziehungsweise direkt nach der Angabe der Zeichenkodierung (@charset). Abschnittskommentare unterteilen ein umfangreiches Stylesheet in mehrere Teile. Welche Teile das sind, gibt CSSDOC nicht vor – hier gilt es, eigene Konventionen aufzustellen. Abbildung 6.2 zeigt die grobe Aufteilung eines Stylesheets schematisch.

Abb. 6.2: Die Aufteilung eines Stylesheets mittels CSSDOC

Tags sind die (maschinenlesbaren) Metainformationen eines CSSDOC-Kommentarblocks. Sie enthalten unter anderem Strukturinformationen, Autoren- und Copyrightinformationen oder beschreiben die Browserkompatibilität des kommentierten CSS. Tags stehen am Ende eines Kommentarblocks nach dem Titel und der Beschreibung.

Ein Tag besteht aus Name und Wert, wobei der Name mit einem @ beginnt. Tabelle 6.3 führt einige der derzeit verfügbaren Tags auf und gibt an, wo und wie sie angewendet werden. Eine vollständige Liste aller Tags mit Anwendungsbeispielen bietet der aktuelle CSSDOC-Arbeitsentwurf.

Zwei Beispiele sollen die Verwendung von CSSDOC demonstrieren.

Listing 6.2 zeigt einen typischen Dateikommentar, der einige Informationen über den Autor des Stylesheets sowie Copyright- und Lizenzinformationen enthält. Natürlich kann der Dateikommentar noch weitere der in Tabelle 6.3 aufgeführten Tags enthalten.

/**
* Stylesheet für http://jendryschik.de/
*
* Standardstylesheet
*
* @author Michael Jendryschik
* @link http://jendryschik.de/
* @copyright Copyright 2000-2008, Michael Jendryschik
* @license CC-A 2.0
*/

In Listing 6.3 ist zu sehen, wie ein Bugfix kommentiert wird. Das Tag @bugfix stellt klar, dass es sich bei dem nachfolgenden CSS um einen Bugfix handelt. @affected führt die Browser auf, deren Bug behoben werden soll, @css-for wiederum die Browser, die das Bugfix-CSS lesen können. @valid gibt an, ob der Bugfix gültiges CSS verwendet, und @see, wo es weitere Informationen über den Bugfix gibt.

/**
* Korrektur des Italics-Bugs
*
* @bugfix
* @affected IE 5/Win, IE6
* @css-for IE 5/Win, IE6
* @valid yes
* @see http://www.highresolution.info/weblog/entry/
* dem_italics_bug_die_zaehne_zeigen/
*/
* html body * { overflow: visible; }
* html iframe, * html frame { overflow: auto; }
* html frameset { overflow: hidden; }

In Kapitel 8 bauen wir gemeinsam eine kleine Website auf und schreiben ein vollständiges Stylesheet, das wir mit CSSDOC kommentieren und dokumentieren werden.

Zum Seitenanfang

At-Regeln

Neben gewöhnlichen Regelsätzen gibt es mit At-Regeln noch eine zweite Art von Regeln. Sie dienen besonderen Zwecken, die durch andere Regeln nicht erfüllt werden. So können mit At-Regeln unter anderem die Wirksamkeit von darin enthaltenen Regeln auf bestimmte Medien eingeschränkt, Stylesheets importiert und die Zeichenkodierung vorgegeben werden.

Eine At-Regel beginnt mit @ (daher der Name), gefolgt von einem Bezeichner, und reicht bis zum schließenden Semikolon (;) oder dem Ende des folgenden Deklarationsblocks.

Ausgabe für bestimmte Medien

Mithilfe der At-Regel @media lassen sich »gewöhnliche« Regeln umschließen und deren Geltungsbereich auf bestimmte Ausgabemedien einschränken:

@media screen, handheld {
  body {
    color: #eee;
    background: #333;
  }
}

@media print {
  body {
    color: #000;
    background: #fff;
  }
}

Die erste @media-Regel schränkt den Geltungsbereich der darin enthaltenen Regel auf die Ausgabemedien screen und handheld ein; die zweite tut dasselbe für die Druckausgabe. Natürlich könnten die @media-Regeln noch weitere Regeln enthalten und theoretisch beliebig oft innerhalb eines Stylesheets vorkommen. Dadurch ist es zwar möglich, Deklarationen für die unterschiedlichen Medientypen innerhalb einer einzigen Datei zusammenzufassen, jedoch wird das Stylesheet so schnell unübersichtlich. Eher empfiehlt sich die Einbindung eines eigenen Stylesheets pro Medium per link-Element.

Stylesheets importieren

Die At-Regel @import muss vor allen anderen Regeln eines Stylesheets stehen und dient dazu, Regeln aus externen Stylesheets in eine CSS-Datei oder in das style-Element eines XHTML-Dokuments zu importieren. Dabei gibt es zwei Schreibweisen:

@import "fonts.css";
    
@import url("fonts.css");

Auf vielen Webseiten ist dies gängige Praxis. Aufgrund kleinerer, ärgerlicher Fehler in einigen Browsern sollten Sie in Stylesheets nicht importieren.

Angabe der Zeichenkodierung

Die At-Regel @charset darf nur jeweils ein Mal in Stylesheets verwendet werden. Sie muss direkt zu Beginn der Datei notiert werden, auch Kommentare und Leerraum sind nicht erlaubt. Sie dient dazu, die Zeichenkodierung des Dokuments anzugeben, beispielsweise UTF-8:

@charset "UTF-8";