Zum Inhalt springen

Websiteentwicklung: CSS: Syntax

Links hinzufügen
Aus Wikibooks


Allgemeine Struktur von CSS-Anweisungen

[Bearbeiten]

CSS-Anweisungen folgen einer bestimmten Struktur, generell werden jeweils bestimmte Regeln notiert. Zum einen gibt es die @-Regeln mit einer spezifischen Struktur (mit Beispielen):

  • @import "stil.css"; oder @import url("stil.css"); importiert einen Stil, wie bereits erläutert
  • @import url("print.css") print; importiert einen Stil für ein bestimmtes Medium, hier 'print'
  • @charset "ISO-8859-1"; zu Beginn einer Stilvorlagendatei kann die Kodierung festlegen, wenn dazu keine Angaben mit höherer Priorität vorliegen
  • @media print, screen {/* weitere CSS-Anweisungen */} gibt an, für welche Medien die eingeklammerten Anweisungen gelten, hier 'print' und 'screen'
  • @page {margin: 3cm;} Angaben zu einer Ausgabe in Seitenform, etwa beim Druck eines Buches
  • @font-face {...} Einbinden einer Schriftart in CSS2.0 oder voraussichtlich in einem Modul von CSS3.

Die Möglichkeiten der einzelnen @-Regeln werden jeweils getrennt erläutert.

Neben diesen besonderen Strukturen der @-Regeln werden allerdings meistens Regeln verwendet, die eine einheitliche Struktur aufweisen: 

Selektoren {Eigenschaft-1: Wert-1; Eigenschaft-2: Wert-2}

Dabei wird der Klammerausdruck auch als Block oder Deklarationsblock bezeichnet. Der Deklarationsblock faßt alle Eigenschaften zusammen, die für den vorhergehenden Selektor gelten sollen. Selektoren, Eigenschaften und Werte werden in weiteren Kapiteln im Detail erläutert. Selektoren haben die Aufgabe, genau festzulegen, für welche Elemente die Anweisungen im Deklarationsblock gelten sollen. Der Stil der mit den Selektoren festgelegten Ziel-Elemente wie etwa Farbe, Hintergrundfarbe, Höhe, Breite etc wird durch Eigenschaften beschrieben. Diese haben bestimmte Werte.

Eigenschaften und Werte

[Bearbeiten]

Eine CSS-Eigenschaft (englisch: property) bestimmt, was in der Darstellung angepasst werden soll. Ein Wert (englisch: value) zu einer Eigenschaft bestimmt wie etwas in der Darstellung angepasst werden soll. Für eine Eigenschaft muss immer mindestens ein Wert angegeben werden. Viele Eigenschaften lassen sich über den Wert 'inherit' vererben, auch wenn sie nicht automatisch vererbt werden. Siehe dazu das Kapitel Kaskadierung, Spezifität und Vererbung.

Interpretation von inherit im Internet Explorer
Der Internet Explorer bis Version 7 interpretiert den Wert inherit nur für die Eigenschaften direction und visibility, ansonsten tritt ein Fehler auf.


Die Werte sind bei jeder Eigenschaft angegeben. Oft sind dies bestimmten Schlüsselwörter wie bereits genanntes 'inherit'. Solch ein Schlüsselwort ist dann exakt so wie angegeben, aber ohne Anführungsstriche zu notieren; die Anführungsstriche kennzeichnen in diesem Buch lediglich, wo das Schlüsselwort beginnt und endet.

Weitere häufig auftretende Werte sind Zahlen, Längen oder Farben, die auf einer der folgenden Seiten erläutert werden.

Referenzierte Dateien als Werte

[Bearbeiten]

Gelegentlich können auch andere Dateien referenziert werden. Dazu ist eine URI/IRI absolut oder relativ anzugeben. Ein solcher Wert beginnt immer mit der Zeichenkette 'url(' und endet mit der Zeichenkette ')', jeweils ohne die Anführungszeichen, die hier nur verwendet werden, um zu kennzeichnen, wo die Zeichenkette beginnt und endet. Zwischen den beiden Zeichenketten wird dann die URI/IRI notiert. Nach 'url(' dürfen optional Leerzeichen folgen, dann folgt die URI/IRI selbst, optional umschlossen von einfachen oder doppelten Anführungszeichen, also ' oder ". Dem abschließenden ')' dürfen optionale Leerzeichen vorangehen.

Beispiele:

  • Absolute Adresse: url( http://example.com/garnknaeulhintergrund.png )
  • Relative Adresse: url( /hintergrund/garnknaeul.png )
  • ... mit Anführungszeichen: url( 'irgendwasschoenes.jpg' )
  • ... oder: url("sonstwas.svg")

Relative Pfadangaben wie bei den letzten beiden Beispielen werden relativ zur Stilvorlagendatei zu einer absoluten Adresse aufgelöst. Die beiden letzten Beispiele verweisen also auf Dateien im selben Verzeichnis wie die Datei, in welcher das Beispiel notiert ist.

Man sollte bei den Adressen problematische Zeichen vermeiden. Treten zum Beispiel doch die verwendeten Anführungszeichen oder Klammern auch in der URI/IRI auf, so sind sie mit einem vorangehenden Zeichen '\' zu kennzeichnen (zu maskieren). Bei HTTP und einigen anderen Protokollen ist es ferner möglich oder notwendig, weitere Zeichen wie Leerzeichen zu maskieren (URI-Maskierung).

Zeichenketten

[Bearbeiten]

Teilweise können auch Zeichenketten als Werte angegeben werden, zum Beispiel bei der Eigenschaft content.

Solche Zeichenketten werden mit einfachen oder doppelten Anführungszeichen umschlossen notiert. Entsprechend sind dann in der Zeichenkette entweder die verwendeten Anführungszeichen zu vermeiden oder mit einem vorangehenden '\' zu maskieren. Statt '\ kann auch notiert werden: '\22' oder statt "\"" entsprechend "\27" - die Zahlen ergeben sich aus dem Unicode des entsprechenden Anführungszeichens.

Zeichenketten können nicht direkt einen Zeilenumbruch enthalten. Sollte ein Zeilenumbruch erwünscht sein, so ist dieser wiederum zu maskieren. Dazu wäre dann zu notieren: '\A' oder '\00000a'.

Ist es hingegen erwünscht, nur bei dem notierten Wert einen Zeilenumbruch einzufügen - warum auch immer - so ist dieser ebenfalls zu maskieren, also etwa so:
"Irgendein Text,\
mit Zeilenumbruch notiert"
Das wird interpretiert wie:
"Irgendein Text, mit Zeilenumbruch notiert"

Nun kann es auch noch vorkommen, insbesondere, aber nicht nur bei solchen Zeichenketten, dass Zeichen notiert werden sollen, welche bei der verwendeten Kodierung nicht verfügbar sind, oder wo man das Zeichen nicht auf der eigenen Tastatur suchen mag oder finden kann. Innerhalb von einer CSS-Datei können dann die Unicode-Nummern mit vorangehendem '\' verwendet werden, entsprechend den oben bereits genannten Nummern für Anführungszeichen wie '\22' oder "\27".

Wird das CSS hingegen in (X)HTML oder SVG im Attribut style notiert, so wird der Inhalt des Attributes interpretiert, also können auch dort entsprechend maskierte Angaben stehen, zum Beispiel ü für 'ü'. Bei XHTML und SVG, nicht aber HTML gilt dies auch, wenn das CSS im Element style notiert ist.

Selektoren und Deklarationsblöcke

[Bearbeiten]

Ein Selektor hat die Aufgabe, das gewünschte Element auszuwählen (selektieren). Die zu einem Selektor passende CSS-Notation mit folgendem Deklarationsblock sieht wie folgt aus: 

Selektor { Eigenschaft: Wert }

Leerzeichen sind optional. Werden mehrere Eigenschaften notiert, so sind diese mit Semikolon zu trennen. Ein Leerzeichen als Eigenschaft hat keine Wirkung. Also sind folgende Notationen gleichwertig: 

Selektor { Eigenschaft1: Wert1; Eigenschaft2: Wert2 }
Selektor { Eigenschaft1: Wert1; Eigenschaft2: Wert2; }
Selektor {Eigenschaft1: Wert1 ;   Eigenschaft2:  Wert2  }
Selektor 
{ 
  Eigenschaft1: Wert1 ;   
  Eigenschaft2: Wert2
}
Selektor 
{ 
  Eigenschaft1: Wert1 ;   
  Eigenschaft2: Wert2;
}

Element-Selektoren

[Bearbeiten]

Die einfachste Variante ist der Element-Selektor. Hierbei werden alle Elemente mit gleichem Elementnamen ausgewählt. 

p { color: blue }

Diese Definition spricht alle p-Elemente in einem Dokument an. Für diese wird die aktuelle Farbe (Eigenschaft: color) als blau (blue) festgelegt, was unter anderem dazu führt, dass der darin notierte Text blau dargestellt wird.

Eindeutige Kennzeichnung eines bestimmten Elementfragmentes

[Bearbeiten]

Um ein einzelnes, bestimmtes Element zu formatieren, kann dieses mit einem Fragmentidentifizierer (bei (X)HTML und SVG zum Beispiel mit dem Attribut id) versehen und anhand dessen ausgewählt werden. Ein id-Attributwert darf nur einmal pro Dokument vorkommen und darf nicht mit einer Zahl beginnen. In Bezug zu CSS eignen sie sich daher gut, um Bestandteile eines Dokumentes zu kennzeichnen, welche nur einmal auftreten. Beispielhaft ist die typische Verwendung zur Untergliederung eines Dokumentes in Kopf-, Haupt- sowie Fußbereich. Es ist hilfreich, den Wert als erklärenden Namen zu notieren, wobei sich erklärend auf die inhaltliche Bedeutung des Elementes in der Dokumentstruktur beziehen sollte, nicht etwa auf die Art der Dekoration durch die Stilvorlage, die ja mit einer anderen Stilvorlage anders aussehen kann.

Der Wert des Fragmentidentifizierers wird in CSS mit einer vorangehenden Raute (#) gekennzeichnet, gefolgt vom Wert. Ist der Wert ID, folglich: 

#ID { Eigenschaft: Wert}

Um ein bestimmtes Element zu kennzeichnen wird also etwa im (X)HTML-Quelltext das id-Attribut gesetzt: 

<p id="einleitung">Hier erscheint die Einleitung zu einem langen Text.</p>

…und anschließend mit CSS ausgewählt: 

#einleitung { color: blue}

Klassen

[Bearbeiten]

Möchte man mehrere, jedoch nicht alle Elemente gleichartig formatieren, bietet sich die Nutzung einer Klasse an. Eine Klasse kann im Gegensatz zu einem Fragmentidentifizierer mehrfach in einem (X)HTML-Dokument oder SVG-Dokument angegeben werden. Es können also meherere Elemente zu einer Klasse gehören, andererseits kann ein Element auch zu mehreren Klassen gehören. Dies ist hilfreich, um immer wiederkehrende Formatierungen anzuwenden, ohne diese auf alle gleichartigen Elemente auszudehnen. Man beachte hier, dass das verwendete Format ein Attribut definiert haben muss, welches der Kennzeichnung von Klassen dient. Dies ist bei (X)HTML und SVG der Fall. Viele andere Formate haben solch ein Attribut allerdings nicht. Die CSS-Spezifikation weist ausdrücklich darauf hin, dass das verwendete Format explizit angegeben muss, dass dieser Selektor auf solch ein Attribut anwendbar sein soll. Ansonsten ist der Selektor wirkungslos. Insbesondere ist der Selektor also nicht bei beliebigem XML anwendbar, bei welchem das Darstellungsprogramm die Spezifikation des individuellen Formates nicht kennt.

Klassen werden in CSS durch einen Punkt (.) gekennzeichnet, gefolgt vom Klassennamen. 

.Klasse { Eigenschaft: Wert}

Um ein (X)HTML-Element oder SVG-Element mit einer Klasse zu versehen, wird das class-Attribut genutzt: 

<p>Ein "normaler" Absatz.</p>
<p class="farbig_hervorgehoben">Ein optisch hervorgehobener Absatz.</p>
<p>Ein "normaler" Absatz.</p>
<p class="farbig_hervorgehoben">Ein optisch hervorgehobener Absatz.</p>
<p>Ein "normaler" Absatz.</p>

…und via CSS selektiert: 

p { color: black}
.farbig_hervorgehoben { color: blue}

Diese Regeln weisen allen Absätzen (p-Elementen) die schwarze Textfarbe zu, jedoch werden alle Absätze mit der Klasse 'farbig_hervorgehoben' mit blauer Textfarbe dargestellt.

Elemente können mehreren Klassen angehören. Dies wird dann im Attribut class als eine mit Leerzeichen separierte Liste notiert. In CSS selektiert wird die Zugehörigkeit zu mehreren Klassen, indem die Selektoren der einzelnen Klassen ohne Leerzeichen aneinandergehängt werden. Damit solch ein Selektor zutrifft, muß das Element also zu allen angegebenen Klassen gehören. Die Klassen können dann einzeln angesprochen werden: 

<p>Ein "normaler" Absatz.</p>
<p class="optisch hervorgehoben">Ein optisch hervorgehobener Absatz.</p>
<p>Ein "normaler" Absatz.</p>
<p class="optisch Absatz">Ein optisch hervorgehobener Absatz.</p>
<p>Ein "normaler" Absatz.</p>

p { color: black}
.optisch { color: #f00}
.Absatz { font-style: italic}
.optisch.hervorgehoben {font-size:1.2em}
.optisch.Absatz {font-variant:small-caps}

Universal-Selektor

[Bearbeiten]

Der Universal-Selektor wählt alle Elemente aus. Er wird in CSS durch einen Stern (*) gekennzeichnet. 

* { color: blue; background: white}

Dies weist allen Elementen eine blaue Farbe und weißen Hintergrund zu.

Attribut-Selektoren

[Bearbeiten]

Elemente können auch anhand anderer Attribute als id oder class ausgewählt werden. Dazu dienen die Attribut-Selektoren, bei welchen der Attributname und gegebenenfalls andere Angaben in eckige Klammern gesetzt werden.

[href] – Attributname
Wählt alle Elemente aus, welche ein Attribut href im Quelltext zugewiesen bekommen haben, unabhängig vom Wert des Attributes.
[type="submit"] – Zuweisungs-Operator
Dieser Attributselektor wählt alle Elemente aus, die einen bestimmten Wert im Attribut haben. In diesem Fall also alle Absende-Knöpfe oder allgemeiner Elemente mit der Attributangabe type="submit". Einfache Anführungszeichen sind auch zulässig.
Auf diese Weise könnte auch ein Element mit einem id-Attribut ausgewählt werden: [id="einleitung"]. Dieser Selektor unterscheidet sich jedoch erheblich von #einleitung, welcher das selbe Element auswählt, da beide Selektoren eine unterschiedliche Spezifität aufweisen. Da nicht jede Sprache Fragmentidentifizierer haben muss, stellt dies jedoch eine immer funktionierende Variante dar.
[class~="warning"] – Operator für Liste
Dies wählt alle Elemente aus, in denen "warning" als Bestandteil einer mit Leerzeichen getrennten Liste in einem Attribut mit Namen class vorkommt - andere Attributnamen sind natürlich auch möglich, wenn ihre Werte eine solche Listenstruktur aufweisen. Also zum Beispiel <p class="important warning"> oder <p class="warning highlight">, aber nicht <p class="my-warning">.
[lang|="de"] – Operator für Werte mit Bindestrich
Dies wählt alle Elemente aus, deren Wert des Attributes lang mit "de" beginnt, optional gefolgt von einem Bindestrich und einem beliebigem Teil, also zum Beispiel lang="de", lang="de-DE" oder lang="de-CH"/code>.

Mit CSS3 wurden drei weitere Operatoren eingeführt:

[href^="http"] – Operator für Wertbeginn
Dies wählt alle Elemente aus, deren Attribut href mit "http" beginnt, also in diesem Falle alle absoult addressierten Verweise einer Seite.
[src$=".png"] – Operator für Wertende
Dies wählt alle Elemente aus, deren Attribut src auf ".png" endet, also in diesem Falle alle Graphiken, welche ein PNG einbinden.
[class*="warn"] – Operator für Wert, welcher diese Zeichenkette enthält
Dies wählt alle Elemente aus, deren Attribut class die Zeichenkette "warn" enthält, also zum Beispiel class="my-warning" oder class="warnings".

Pseudo-Klassen und Pseudo-Elemente

[Bearbeiten]

CSS kann darüber hinaus bestimmte Bereiche eines Dokumentes dynamisch gestalten, ohne dass dafür eine Änderung im Quelltext des Dokumentes erfolgen muss. Hierzu existieren die Konzepte der Pseudo-Klassen und Pseudo-Elemente, welche in einem eigenen Kapitel näher betrachet werden.

Pseudo-Klassen und Pseudo-Elemente werden in CSS mit einem Doppelpunkt (:) gekennzeichnet. Ab CSS3 werden Pseudo-Elemente zur besseren Unterscheidung durch einen doppelten Doppelpunkt (::) gekennzeichnet.

Beispiele (zur Erläuterung siehe Kapitel Pseudoklassen, Pseudoelemente und erzeugte Strukturen): 

p:first-child { color: blue }
p:before { content: '► '}

Gruppierung von Selektoren

[Bearbeiten]

Alle möglichen Selektoren können gruppiert werden, um eine Eigenschaft bei mehreren Elementen anzuwenden. Dazu werden die einzelnen Selektoren mit einem Komma (und optionalen Leerzeichen) getrennt notiert. 

h1, h2, h3, h4, h5, h6, legend {font-weight: bold}

Kombination von Selektoren

[Bearbeiten]
Die Beziehungen der (X)HTML-Elemente untereinander

CSS-Selektoren können kombiniert werden, um die Auswahl der Elemente weiter zu begrenzen. Die Leserichtung der Verschachtelung erfolgt dabei von links nach rechts. Die Auswertung durch den Parser (im Darstellungsprogramm) jedoch von rechts nach links. Selektoren sollten so allgemein wie möglich gehalten werden, um die Auswertung durch das Darstellungsprogramm zu beschleunigen.

Nachfahren

[Bearbeiten]

Hiermit wird ein Element ausgewählt, das sich innerhalb eines anderen befindet. 

<p class="farbig">
  Textabsatz Nummer eins, welcher eine <strong>Betonung</strong> enthält.
</p>
<p>
  Textabsatz Nummer zwei, welcher eine <strong>Betonung</strong> enthält.
</p>
<blockquote class="farbig"><p>Ein Zitat</p></blockquote>

CSS-Beispiele 

p.farbig {
  color: blue;  /* die färbt nur den ersten Absatz blau */
}
.farbig strong {
  color: red;  /* die färbt nur die Betonung im ersten Absatz rot */
}

Kinder

[Bearbeiten]

Ist ein Element Kindelement eines anderen Elementes, so wird dafür zur Selektion ein Kind-Selektor verwendet. Dazu wird das Elternelement gefolgt von Leerzeichen, '>' , gefolgt von Leerzeichen gefolgt vom zu selektierenden Nachfahren notiert: 

g.knopf > circle  {fill: blue}

Bei diesem auf SVG-Dokumente anwendbaren Beispiel werden alle Kreise blau gefüllt, die Kindelemente einer Gruppe sind, welche zur Klasse 'knopf' gehören.

Das trifft etwa zu auf: 

<g class="knopf">
<circle id="k1" r="10" />
<circle id="k2" cy="30" r="10" />
<circle id="k3" cy="60" r="10" />
</g>

Aber nicht auf: 

<g class="knopf">
<g class="ersteGruppe">
<circle id="k1" r="10" />
<circle id="k2" cy="30" r="10" />
<circle id="k3" cy="60" r="10" />
</g>
<g class="zweiteGruppe" transform="translate(50,0)">
<circle id="l1" r="10" />
<circle id="l2" cy="30" r="10" />
<circle id="l3" cy="60" r="10" />
</g>
</g>

Wird dieser Selektor innerhalb von XML notiert, etwa im Element style, so ist zu beachten, dass '>' ein besonderes Zeichen ist. Es ist also entweder zu maskieren: &gt; oder aber der Bereich im style ist als CDATA zu kennzeichnen. In einer eigenständigen CSS-Datei ist dieses Vorgehen wiederum falsch. Das Problem ist ein weiterer Hinweis darauf, dass es einfacher und effektiver ist, CSS in einer eigenständigen Datei zu notieren.

Geschwister, direkt nachfolgend

[Bearbeiten]

Haben zwei Elemente ein gemeinsames Elternelement, so sind sie Geschwister. Es kann nützlich sein, besondere Regeln zu notieren, wenn zwei aufeinander folgen. Selektiert wird das direkt nachfolgende Element mit dem Selektor '+' zwischen dem vorhergehenden Geschwister und dem zu selektierenden.

Beispiel: 

h2 + h3 {padding: 3ex; color: red}

Folgt eine h3-Überschrift direkt auf eine h2-Überschrift, so wird sie mit zusätzlichem Innenabstand ausgestattet und rot dargestellt.

Geschwister, allgemein

[Bearbeiten]

Möchte man nun alle folgenden Geschwister eines Elementes ansprechen, so bietet dafür CSS3 den Selektor '~'. Zuerst wird also das Element notiert, dessen Geschwister gewählt werden sollen, dann '~', dann die zu selektierenden Geschwister.

Beispiel 

h2 ~ p {margin-top: 1ex}

Das selektiert alle Absätze, welche eine h2-Überschrift als Geschwister haben und dieser folgen, also nicht jene, die der h2-Überschrift vorangehen. 

<p>...</p>

<h2>Beispiele</h2>

<p>Es gibt zwei Hauptanwendungen:</p>
<ol>
<li>...</li>
<li>...</li>
</ol>

<p>Und weitere Nebenanwendungen</p>

<ol>
<li>...</li>
<li>...</li>
</ol>

Zur Anwendung kommt der Deklarationsblock also bei dem zweiten und dem dritten Absatz, nicht aber beim ersten.

Erweiterungen, spezifisch für bestimmte Darstellungsprogramme

[Bearbeiten]

CSS gibt auch vor, wie die Namen von Eigenschaften auszusehen haben, die von Anbietern von Darstellungsprogrammen auszusehen haben, die also nicht zur Spezifikation von CSS gehören.

Generell beginnen die Namen mit einem '-' oder '_', gefolgt von einem Präfix, der spezifisch für das Programm ist, für welches die Eigenschaft eine Bedeutung hat. Danach folgt ein weiterer '-' und dann der eigentliche Name, der inhaltlich die Funktion der Eigenschaft zum Ausdruck bringen sollte.

So gibt es zum Beispiel '-moz-' für Mozilla/Gecko (Firefox, Seamonkey, Iceweasel, Iceape etc) oder '-webkit-' für Programme, die auf WebKit basieren (etwa Arora, rekonq, Chromium, Safari, Google Chrome etc) oder '-o-' für Opera, auf Presto basierend, '-khtml-' für Programme, die khtml verwenden (etwa der Konqueror; zwar ist WebKit selbst von khtml abgeleitet, ist aber inzwischen ein eigenständiges Projekt mit eigenem Präfix), '-ms-' für den Microsoft Internet Explorer.

Diese spezifischen Eigenschaften dienen primär Test- und Demonstrationszwecken oder auch, um Probleme zu lösen, die insbesondere in Stilvorlagen des Darstellungsprogrammes selbst oder in Stilvorlagen von Nutzern auftreten können. In Autorenstilvorlagen ergeben solche Eigenschaften praktisch nur einen Sinn, wenn experimentelle Implementierungen von neuen CSS-Arbeitsentwürfen getestet werden sollen - das Verhalten ist also nur für die jeweilige Testversion des Darstellungsprogrammes gesichert und kann sich ansonsten jederzeit ändern und hat keine normative Bedeutung.

Das Verfahren stellt sicher, dass Vorschläge für neue Eigenschaften von einem breiteren Publikum getestet, kommentiert und verbessert werden können. Denn ansonsten werden unbekannte Eigenschaften einfach ignoriert. Eine Eigenschaft ist insbesondere dann vom Darstellungsprogramm als unbekannt anzunehmen, wenn sie nicht in einer Empfehlung steht oder kein Präfix hat, welches für das Darstellungsprogramm spezifisch ist. Auf wenn ein passendes Präfix vorhanden ist, ist die Interpretation natürlich optional, womit auch sichergestellt ist, dass solch experimentelle Implementierungen jederzeit wieder korrigiert und in neuen Versionen des Programmes verworfen werden können.

Autoren sollten solch spezifische Eigenschaften in ihren normalen Stilvorlagen also nicht nutzen, beziehungsweise die Stilvorlagen nicht in veröffentlichten Dokumenten nutzen, beziehungsweise diese als Testumgebungen für CSS-Arbeitsentwürfe kennzeichnen, damit das breite Publikum an dem Test partizipieren kann und den Arbeitsentwurf kommentieren.

Kommentare

[Bearbeiten]

Selbstverständlich sollten Sie sich die Zeit nehmen, Ihre Definitionen zu kommentieren. Der Nächste, der Ihre CSS-Datei bearbeiten muss, wird es Ihnen danken - und das können auch Sie selbst nach ein paar Jahren und tausenden von anderen Dokumenten sein, die Sie inzwischen bearbeitet haben.

Kommentare beginnen immer mit einem Schrägstrich gefolgt von einem Stern und enden mit den gleichen Zeichen in umgekehrter Reihenfolge: 

/* Kommentar */

@-Regeln

[Bearbeiten]

@-Regeln sind Strukturen in CSS mit besonderer Syntax, welche Funktionen haben, die darüber hinausgehen, mit Selektoren Elementen Eigenschaften zuzuordnen.

Eine Regel beginnt immer mit dem Zeichen '@' gefolgt von einem Schlüsselwort. Danach gibt es Strukturen, die je nach Regel unterschiedlich sein können.

@charset

[Bearbeiten]

Wie bereits im Kapitel Grundlagen erläutert, kann die Regel @charset dazu verwendet werden, die Kodierung eines CSS-Dokumentes anzugeben. Damit die Angabe bei der Dekodierung Verwendung findet, ist sie ganz zu Beginn der CSS-Datei zu notieren, also in der ersten Zeile, ohne vorherige BOM (Bytereihenfolge-Markierung, welche ansonsten ebenfalls von Programmen verwendet werden kann, um das Dokument zu dekodieren).

Falls ein Dienstprogramm (zum Beispiel für HTTP) eine Information über die Kodierung angibt, wird diese Information verwendet und nicht die Angaben im Dokument selbst. Trotzdem kann es sinnvoll sein, im Dokument explizit Angaben zu machen, etwa damit man beim späteren Editieren der Datei gleich daran erinnert wird, welche Kodierung verwendet wird, aber auch, wenn die Datei an einem anderen Ort abgespeichert wird, wo kein Dienstprogramm eine Information über die Kodierung angibt. Angaben zur Kodierung - gleich aus welcher Quelle - beziehen sich immer auf die komplette Datei, es ist also nicht möglich, ein Fragment einer Datei anders dekodieren zu lassen als das gesamte Dokument. Offensichtlich kritisch bei Kodierungsangaben im Dokument ist das Problem, dass das Dokument wenigstens bis zur Stelle dieser Angabe bereits dekodiert sein muß, um die Angabe zur Kodierung lesen zu können, daher sind die Angaben von einem Dienstprogramm eigentlich sehr hilfreich. Aus verschiedenen Gründen gucken aber die meisten Dienstprogramme weder in den Dateien nach Kodierungsangaben, noch haben sie andere verläßliche Quellen oder standardisierte Meta-Informationsangaben zu Dokumenten, daher ist davon auszugehen, dass die Angaben eines Dienstprogrammes in der Regel nicht spezifisch für ein Dokument sind, sondern aus Voreinstellungen in der Konfiguration des Dienstprogrammes stammen. Kodierung und Konfiguration sind dann folglich aufeinander abzustimmen. Die Konfiguration des Dienstprogrammes kann auch gezielt so erfolgen, dass es keine Kodierungsinformationen sendet.

Die genaue Syntax der Regel @charset ist wie folgt:
Es sind zu Beginn des Dokumentes exakt 10 Zeichen zu notieren, die hier zwischen einfachen Anführungszeichen notiert sind: '@charset "'
Danach folgt die für die Kodierung charakteristische Zeichenkette, etwa:
ISO-8859-1 oder UTF-8.
Danach folgen die Zeichen '";'.

Beispiele:
@charset "UTF-8";
oder
@charset "ISO-8859-1";.

@import

[Bearbeiten]

Mittels der Regel @import ist es möglich, externe Stilvorlagen in eine Stilvorlage einzubinden. Zur Identifikation der gewünschten Stilvorlage wird ihre URI/IRI angegeben. Solche Regeln sind zu Beginn eines Dokumentes zu notieren, allenfalls kann eine Regel @charset davorstehen.

Die genaue Syntax der Regel @import ist wie folgt:
Sie beginnt mit der Zeichenfolge, die hier zwischen einfachen Anführungszeichen notiert ist:
'@import '.
Danach gibt es zwei Möglichkeiten, die alternativ notiert werden können, es wird in jedem Falle eine URI/IRI notiert, hier abgekürzt als 'URI', ein Beispiel für eine relative Angabe wäre etwa 'stil.css':

  • "URI"
  • url(URI)

Danach folgt entweder ein Semikolon ';' oder einen Medienangabe, gefolgt von einem Semikolon, also zum Beispiel ' print;' oder ' screen, tv, projection;'. Hinsichtlich möglicher Medien siehe den Abschnitt über Medientypen.

@media

[Bearbeiten]

Mittels der Regel @media können CSS-Anweisungen spezifisch für bestimmte Medien notiert werden. Die spezifischen Angaben stehen dann in einem Block, welcher also mit geschweiften Klammern markiert wird.

Die genaue Syntax der Regel @media ist wie folgt:
Sie beginnt mit der Zeichenfolge, die hier zwischen einfachen Anführungszeichen notiert ist:
'@media '.
Darauf folgt eine mit Komma (und optionalen Leerzeichen) separierte Liste von Medientypen, gefolgt von einer geschweiften Klammer auf: '{'
Die Regel endet mit einer geschweiften Klammer zu: '}'.
Dazwischen sind die CSS-Anweisungen notiert, die für die angegebenen Medientypen verwendet werden sollen.

Die verfügbaren Medientypen sind weiter unten aufgeführt.

Innerhalb der Regel @media dürfen keine weiteren @-Regeln stehen, diese wären dann als ungültig zu ignorieren.

Beispiel: 

@media print {
    body {color: black; background: white }
}
@media screen {
    body {color: #006; background: #ffc}
}
@media screen, print {
    body { font-fanily: sans-serif }
}

body {font-size: 1em}
h1 {font-size: 2em}
h2 {font-size: 1.6em}

Die Angaben außerhalb der Medienregeln gelten für alle Darstellungen. Für die Druckausgabe wird schwarze Schrift auf weißen Grund angegeben, für den Monitor dunkelblau auf hellgelb. Für beides soll dann die generische Schriftfamilie 'sans-serif' verwendet werden.

@page

[Bearbeiten]

Bei Büchern oder Vorträgen mit eine Projektor sind Inhalte meistens auf Einzelseiten aufgeteilt. Mit der Regel @page können Angaben gemacht werden, welche für solch eine Seitendarstellung spezifisch sind. Details dazu werden beschrieben im Kapitel Seitenmedien.

@font-face

[Bearbeiten]

Diese Regel ermöglicht es, Schriftartendateien zu referenzieren. Sie ist nicht in CSS 2.1 verfügbar. Details dazu werden beschrieben im Kapitel Schriftart.

@namespace

[Bearbeiten]

Diese Regel ermöglicht es, ein Präfix für einen Namensraum festzulegen, um darüber Elemente oder Attribute zu selektieren, siehe nächster Abschnitt.

Namensraum-Modul

[Bearbeiten]

Bei XML-Formaten wie XHTML oder SVG sind Elemente immer einem bestimmten Namensraum zugeordnet. Auch Attribute können einem bestimmten Namensraum zugeordnet sein. Bei SVG werden Referenzierungen etwa mit Attributen aus dem Namesraum von XLink realisiert, die demzufolge alle einen Präfix haben, dem zuvor ein Namensraum zugeordnet wurde.

Enthalten nun Dokumente, die mit CSS dekoriert werden sollen, Elemente oder Attribute mit Präfix für Namensräume, so kann auch in der Stilvorlage ein Präfix für einen Namensraum definiert werden. Mit einem speziellen Selektor kann dann ein Element oder Attribut mit Präfix gezielt selektiert werden.

Darstellungsprogramme, die dieses Modul nicht kennen, werden sowohl die Definitionen der Präfixe für Namensräume ignorieren als auch die entsprechenden Regeln, die mit dem Selektor aufgestellt werden. Wenn also rückwärtskompatibel selektiert werden soll, muß anhand anderer Kriterien selektiert werden.

Regel @namespace

[Bearbeiten]

Mit der Regel @namespace wird ein Präfix für einen Namensraum definiert. Dies geschieht zu Beginn einer Stilvorlage, aber nach gegebenenalls notierten Regeln @charset und @import.

Die Regel beginnt mit derr Zeichenfolge '@namespace', optional gefolgt von Leerzeichen. Es kann ein voreingestellter Namensraum angegeben werden, der dann gilt, wenn kein Präfix verwendet wird. Dazu folgt dann (im Bedarfsfalle in Anführungszeichen) einfach der Namensraum. Ansonsten folgt auf '@namespace' nach den optionalen Leerzeichen eine Zeichenfolge (ohne Leerzeichen) für das Präfix, dann wieder optionale Leerzeichen, gefolgt von der Namensraumangabe (im Bedarfsfalle in Anführungszeichen). Hinter der Namensraumangabe können jeweils optionale Leerzeichen folgen, gefolgt von einem Semikolon ';'.

Beispiele: 

@namespace "http://www.w3.org/2000/svg";
@namespace xlink "http://www.w3.org/1999/xlink";
@namespace x "http://www.w3.org/1999/xhtml";

Hier ist also der voreingestellte Namensraum der von SVG und das Präfix 'xlink' wird für Attribute von XLink verwendet, das Präfix 'x' für Elemente oder Attribute von XHTML. Zumindest die ersten beiden Angaben wären typisch für Stilvorlagen für SVG-Dokumente, die letzte kann nützlich sein, falls etwa in foreignObject XHTML notiert wird und die XHTML-Elemente mit Präfixen versehen werden.

Bei der Definition der in der Stilvorlage verwendeten Präfixe ist es nicht erforderlich, daß dies dieselben Präfixe sind, wie sie im XML-Dokument verwendet werden. Relevant ist nur, daß der zugehörige Namensraum paßt.

Präfix-Präfix oder -Selektor

[Bearbeiten]

Um nun Elemente oder Attribute mit einem entsprechenden Präfix zu selektieren, wird deren Namen eine Zeichenkette oder ein Präfix vorangestellt, welche mit dem Präfix für den entsprechenden Namensraum beginnt. Ein vertikaler Balken '|' separiert dies dann vom folgenden Namen des Elementes oder Attributes.

Beispiele passend zum Beispiel zur Definition von Präfixen im vorherigen Abschnitt:

'x|p'
selektiert alle p mit einem Präfix für den Namensraum von XHTML
'xlink|title'
selektiert alle title mit einem Präfix für den Namensraum von XLink
'|stroke'
selektiert alle stroke, die nicht zu einem Namensraum gehören
'*|a'
selektiert alle a egal mit welchem Präfix, selbst ohne Präfix
'g'
selektiert alle g ohne Präfix, also gemäß obiger Angabe sind die dann im Namensraum von SVG

Ein kompletter Block für ein Element könnte also etwa so aussehen: 

x|p {background: blue; color: yellow}

Oder für ein Attribut: 

a[xlink|title] { stroke: blue; fill: yellow}

Medientypen

[Bearbeiten]

CSS 2.0 und CSS2.1 definieren folgende Medientypen:

screen
Computer-Bildschirme (Voreinstellung)
tty
Teleprinter, Terminals, Geräte mit grober Auflösung mit äquidistantem Zeichenraster
tv
Fernseher und ähnliche, niedrige Auflösung, Farbe, eingeschränkte Möglichkeiten zu rollen
projection
Projektoren
handheld
Tragbare Geräte mit geringer Auflösung, geringe Bandbreite, keine Farbe
print
Druckausgabe auf einzelnen Papierseiten und Vorschau auf dem Monitor dafür
braille
Braille-Lesegeräte
embossed
Braille-Seitendrucker
aural
Sprachausgabe (CSS 2.0)
speech
Sprachausgabe (CSS 2.1)
all
Alle Geräte

Medienanfragen

[Bearbeiten]

Medienanfragen (englisch media queries) sind eine neue Konstruktion in CSS 3, eine Erweiterung der einfachen Medienangabe in CSS 2. Dies erfordert auch eine neue Syntax, die zwar der sonstigen Syntax von CSS ähnelt, aber aufgrund einer etwas anderen Aufgabe sowohl logisch als auch in der Notation neue Strukturen aufweist.

Mit solch einer Medienanfrage oder -abfrage können abhängig von den Eigenschaften des Ausgabegerätes alternative Stilvorlagen angeboten werden, unter denen das Darstellungsprogramm anhand der Angaben in der Anfrage automatisch die passende auswählen kann.

Die An- oder Abfrage resultiert daher in einer Antwort - ja oder nein - entweder die Stilvorlage ist anzuwenden oder nicht, daher muß das Darstellungsprogramm den Inhalt der Anfrage - die Aussage - logisch bewerten.

Eine Medienanfrage besteht aus einem Medientyp und optionalen Aussagen, die zusammen Kriterien des Ausgabemediums abfragen - treffen die Aussagen zu, werden die zugehörigen CSS-Anweisungen ausgeführt, sonst nicht. Medienanfragen können in einer mit Komma und optionalen Leerzeichen separierten Liste zusammengefügt werden.

Die genaue Syntax ist in kompakter Form (EBNF-Notation) definiert. Dabei dienen eckige Klammern der Gruppierung. Das Fragezeichen bedeutet optional, keins oder eins. Der Stern bedeutet keins oder mehr. Unter L sind die Zeichen zusammengefaßt, die als Leerzeichen gelten. Das Zeichen | steht für oder, beziehungsweise Alternativen. Einfach hinzuschreibende Zeichen sind in einfache Anführungszeichen gesetzt. Das Komma ',' entspricht einer logischen oder-Verknüpfung, also trifft solch eine Aussage zu, wenn mindestens eine der Anfragen zutrifft. 

 Media-Query-Liste: L* [Media_Query [ ',' L* Media_Query ]* ]?;

 Media_Query: [['only' | 'not']? L* Medientyp L* [ 'and' L* Ausdruck ]*]
  | Ausdruck [ 'and' L* Ausdruck ]*;

 Ausdruck: '(' L* Merkmal L* [':' L* Wert]? L* ')' L*;

 Medientyp: all| aural | braille | handheld | print |
  projection | screen | speech | tty | tv | embossed;

 Merkmal: width | min-width | max-width
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | orientation
  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome
  | resolution | min-resolution | max-resolution
  | scan 
  | grid;

L : [#x20 | #x9 | #xD | #xA];

Wert: Merkmalsabhängig, siehe folgende Einzelerklärungen

Beispiel mit Regel @media: 

@media all and (orientation:portrait) {color: #040; background: #cfc}
@media print and (orientation:landscape) {color: black; background: white}

Beispiel mit Regel @import: 

@import url(stil.css) all and (orientation:portrait);
@import url(print.css) print and (orientation:landscape);

Beziehungsweise zur Verwendung in einem Attribut in (X)HTML oder XML: 

media="all and (orientation:portrait)"
media="print and (orientation:landscape)"

'and' dient immer als Verknüpfung zwischen dem Medientyp und dem Ausdruck und wie die Bezeichnung schon andeutet, handelt es sich um ein logisches Und. Der Anfrageteil trifft also zu, wenn der angegebene Medientyp und der Ausdruck zutreffen.

Der Medientyp 'all' kann auch zusammen mit 'and' weggelassen werden (eine Kurzschreibweise, die in obiger Kurznotation nicht berücksichtigt wurde), folgendes ist also gleichwertig: 

media="all and (orientation:portrait)"
media="(orientation:portrait)"

Beispiel für eine Liste: 

@media screen and (orientation:portrait), 
 tv (orientation: landscape) 
 {
   body {color: #040; background: #cfc}
 }

Mit dem Schlüsselwort 'not' kann die Aussage auch negiert werden: 

@media not all and (orientation:portrait), 
 tv (orientation: portrait) 
 {
   body {color: #040; background: #cfc}
 }

Die Aussage trifft also zu auf 'tv' oder auf alle anderen Medientypen, sofern sich nicht die Orientierung 'portrait' aufweisen.

Das Schlüsselwort 'only' dient nur dazu, im Bedarfsfalle die Medienanfrage vor älteren Programmen zu verbergen, welche solche Anfragen nicht komplett verstehen. Diese stellen fest, dass es laut ihrem Kenntnisstand 'only' nicht gibt und wenden die Regel gar nicht an. 

@media only all and (color) {
body {color: #040; background: #cfc}
}

Das ist gleichzeitig auch ein Beispiel für einen Ausdruck ohne Wert.

Medien-Merkmale

[Bearbeiten]

Die Medien-Merkmale entsprechen den CSS-Eigenschaften, auch die Notation innerhalb der Blöcke entspricht der bereits erläuterten CSS-Syntax für Deklarationsblöcke.

Die Unterschiede liegen in der unterschiedlichen Funktion. Deklarationsblöcke geben an, welche Eigenschaften angewendet werden sollen; Blöcke mit Medien-Merkmalen geben an, welche Eigenschaften ein Ausgabemedium haben muß, damit CSS-Anweisungen ausgeführt werden können.

Während Deklarationsblöcke immer aus Paaren aus Eigenschaft und Wert bestehen, können Merkmale auch alleine ohne Wert stehen, wenn es nur drauf ankommt, dass das Merkmal überhaupt verfügbar ist.

Neben dem Grundmerkmal gibt es bei den meisten auch noch die zusätzlichen Präfixe min- und max-. Mit ersterem gibt man die minimale Größe an, mit dem zweiten die maximale Größe.

width und height

[Bearbeiten]

Das Merkmal width steht für die Breite des verwendeten Anzeigebereiches, entsprechend height für die verwendete Höhe. Oft oder meistens wird ja nicht der gesamte Monitor für die Anzeige des Dokumentes verwendet, sondern nur ein Teil davon in einem Fenster. Daher sind diese Größen wichtig, um abschätzen zu können, wieviel Platz man für die Stilvorlage und den Inhalt verfügbar hat. Sofern Rollbalken vorhanden sind, zählen diese zu dem so angegebenen Anzeigebereich. Der Wert ist jeweils eine nicht negative Länge. Anwendbar ist das Merkmal auf visuelle und taktile Medien, also etwa nicht auf reine Sprachausgaben. Die Merkmale können auch die Präfixe min- und max- haben. 

@import url("klein.css") screen 
  and (max-width: 399px) 
  and (max-height: 699px);
@import url("mittel.css") screen 
  and (min-width: 400px) 
  and (max-width: 700px) 
  and (min-height: 400px) 
  and (max-height: 700px);
@import url("gross.css") screen 
  and (min-width: 701px) 
  and (min-height: 701px);

An dem Beispiel zeigen sich schon kleinere Probleme, denn CSS erlaubt auch eine Reskalierung von Pixeln, diese müssen also nicht immer ganzzahlig sein. Bei obiger Angabe gibt es also ein paar wenige Fälle, welche nicht abgedeckt sind. Mit endlich vielen Nachkommastellen kann man das Problem natürlich reduzieren, aber nicht völlig vermeiden. Sofern die Stilvorlagen miteinander vereinbar sind, kann man natürlich den maximalen Wert des kleineren Bereiches gleich dem minimalen Wert des größeren Bereichs wählen, dann wendet man beide Stilvorlagen an, wenn der Wert exakt getroffen wird, sonst nur einen. Verwendet man in obigem Beispiel etwa jeweils '399.99px' als Grenze, so ist es unwahrscheinlich, dass der Fall wirklich eintritt.

Das ist bei CSS nicht die einzige Stelle, wo die Notation nicht so ganz ausgereift und durchdacht ist. In dem Sinne ist Perfektion nichts, was man von CSS-Spezifikationen erwarten sollte - in älteren, besser durchdachten W3C-Spezifikationen wie SMIL werden solche Intervallprobleme etwa deutlich besser gelöst.

device-width und device-height

[Bearbeiten]

Das Merkmal device-width steht für die Breite des gesamten Anzeigebereiches, entsprechend device-height für die gesamte Höhe. Bei Monitoren ist dies also die Bildschirm- oder Monitorgröße. Diese ist allerdings nur selten relevant für den wirklich verfügbaren Platz für Inhalt und Stilvorlage. Die Merkmale eignen sich also eher, um abzuschätzen, welcher Typ von Ausgabegerät überhaupt verwendet wird, nicht um damit wirklich Details der Gestaltung zu bestimmen. Der Wert ist jeweils eine nicht negative Länge. Anwendbar ist das Merkmal auf visuelle und taktile Medien, also etwa nicht auf reine Sprachausgaben. Die Merkmale können auch die Präfixe min- und max- haben.

orientation

[Bearbeiten]

Mit dem auf die Medientypen 'print', 'projection', 'screen' und 'tv' anwendbaren Merkmal orientation wird die Orientierung des Ausgabegerätes abgefragt. Der Wert ist entweder 'portrait' oder 'landscape'. Bei 'portrait' ist die Höhe größer als die Breite, bei 'landscape' umgedreht. Bei Gleichheit gilt 'portrait'. Mit Breite und Höhe sind die Merkmale width und height gemeint.

aspect-ratio

[Bearbeiten]

Während orientation nur einen qualitativen Vergleich von Höhe und Breite zuläßt, kann dies mit dem Merkmal aspect-ratio quantitativ erfolgen.

Der Wert ist das Verhältnis von width zu height. Die Notation besteht aus einer positiven ganzen Zahl, gefolgt von '/', gefolgt von einer positiven ganzen Zahl. Optionale Leerzeichen vor und nach dem '/' sind erlaubt. Anwendbar ist das Merkmal bei 'print', 'projection', 'screen' und 'tv'. Das Merkmal kann auch die Präfixe min- und max- haben.

device-aspect-ratio

[Bearbeiten]

Während aspect-ratio das Aspektverhältnis des verfügbaren Anzeigebereiches abfragt, bezieht sich das Merkmal device-aspect-ratio nur auf den gesamten Anzeigebereich, also bei Bildschirmen oder Monitoren auf deren Aspektverhältnis. Das Merkmal sagt also mehr darüber aus, welches Gerät überhaupt verwendet wird, als eine konkrete Information darüber zu liefern, wie Inhalte angeordnet werden können.

Der Wert ist das Verhältnis von device-width zu device-height. Die Notation besteht aus einer positiven ganzen Zahl, gefolgt von '/', gefolgt von einer positiven ganzen Zahl. Optionale Leerzeichen vor und nach dem '/' sind erlaubt. Anwendbar ist das Merkmal bei 'print', 'projection', 'screen' und 'tv'. Das Merkmal kann auch die Präfixe min- und max- haben.

color

[Bearbeiten]

Mit dem Merkmal color kann abgefragt werden, wieviele Bits pro Farbkanal beim Anzeigegerät verfügbar sind. Handelt es sich nicht um ein Gerät mit Farbausgabe, so ist der Wert 0, sonst eine positive ganze Zahl. Anwendbar ist das Merkmal bei visuellen Medien. Das Merkmal kann auch die Präfixe min- und max- haben.

Wird kein Wert angegeben, so trifft das Merkmal zu, wenn es sich um ein Gerät mit Farbausgabe handelt, der Wert also nicht 0 wäre.

Sollte das Gerät pro Farbkanal unterschiedlich viele Bits verfügbar haben, gilt die kleinste Zahl.

Sind die Farben in einem Index durchnumeriert, also nicht alle Farbkanäle frei wählbar, wird ebenfalls die kleinste Anzahl von Bits pro Farbkanal bei den verfügbaren Farben verwendet.

color-index

[Bearbeiten]

Sind die Farben in einem Index durchnumeriert, kann mit dem Merkmal color-index abgefragt werden, wieviele Farben im Index vorhanden sind. Ist kein Index verfügbar, ist der Wert 0, sonst eine positive ganze Zahl. Anwendbar ist das Merkmal bei visuellen Medien. Das Merkmal kann auch die Präfixe min- und max- haben.

Wird kein Wert angegeben, so trifft das Merkmal zu, wenn es sich um ein Gerät mit Farb-Index handelt, der Wert also nicht 0 wäre.

monochrome

[Bearbeiten]

Bietet das Anzeigegerät nur eine einfarbige Darstellung, etwa in Grauwerten, so kann mit dem Merkmal monochrome ähnlich zu color abgefragt werden, wieviele Bits für Helligkeitsunterschiede verfügbar sind. Handelt es sich nicht um ein Gerät mit einfarbiger Darstellung, so ist der Wert 0, sonst eine positive ganze Zahl. Anwendbar ist das Merkmal bei visuellen Medien. Das Merkmal kann auch die Präfixe min- und max- haben.

Wird kein Wert angegeben, so trifft das Merkmal zu, wenn es sich um ein Gerät mit einfarbiger Darstellung handelt, der Wert also nicht 0 wäre.

Beispiel, wie man unterschiedliche Stilvorlagen für Drucker mit und ohne Farbwiedergabe realisieren kann: 

@import url("druck_kontrast.css") print and (monochrome);
@import url("druck_farbe.css") print and (color);

resolution

[Bearbeiten]

Die Auflösung des Anzeigegerätes kann als Merkmal resolution abgefragt werden. Der Wert ist eine positive Zahl, direkt gefolgt von einer Einheit, entweder 'dpi' für Pixel pro 2.54cm (inch) oder 'dpcm' für Pixel pro Zentimeter.

Anwendbar ist das Merkmal bei 'print', 'projection', 'screen' und 'tv'. Das Merkmal kann auch die Präfixe min- und max- haben.

Sind die Pixel nicht quadratisch, trifft das Merkmal resolution allein nie zu. Allerdings kann immer min-resolution verwendet werden, um auch bei nicht quadratischen Pixeln die kleinste Auflösung oder Pixeldichte abzufragen, entsprechend mit max-resolution die größte.

Bei Farbdruckern ist immer die Pixeldichte einer beliebigen Farbe gemeint.

scan

[Bearbeiten]

Für den Medientyp 'tv' kann abgefragt werden, mit welchem Modus das Bild aufgebaut wird. Verfügbar für dieses Merkmal scan sind die Werte 'progressive' (kontinuierlich fortschreitend) und 'interlace' (verschränkt, verschachtelt).

grid

[Bearbeiten]

Mit dem Merkmal grid kann bei visuellen und taktilen Medien abgefragt werden, ob die Ausgabe auf ein Flächenraster beschränkt ist oder alle Pixel einzeln modifizierbar sind. 'tty' ist etwa ein typisches Medium mit einer Rasterausgabe.

Der Wert ist entweder 0 oder 1. 1 trifft auf eine Rasterausgabe zu, 0 sonst.

Fehlerbehandlung bei Medienanfragen

[Bearbeiten]

Für Medienanfragen gibt es spezielle Fehlerbehandlungsregeln, die auch Rückschlüsse darauf zulassen, wie sich aktuelle Darstellungsprogramme verhalten, wenn in Zukunft weitere Medientypen und Merkmale in einer neuen CSS-Version eingeführt werden.

  • Ein unbekannter Medientyp führt dazu, dass die Anfrage nicht zutrifft, die zugehörige Stilvorlage wird also nicht angewendet.
  • Ein unbekanntes Merkmal wird wie 'not all' behandelt, was darauf hinausläuft, dass die Medienanfrage behandelt wird, als sei das unbekannte Merkmal nicht angegeben.
  • Ein unbekannter Wert für ein Merkmal wird ebenfalls behandelt, als ob 'not all' angegeben sei, was darauf hinausläuft, dass die Medienanfrage mit unbekanntem Wert behandelt wird, als sei das Merkmal nicht angegeben.
  • Anfragen mit fehlerhafter Syntax werden ansonsten so weit analysiert, bis ihr Ende gefunden ist, sie werden als 'not all' behandelt, also als ob sie nicht angegeben wären.

Behandlung von fehlerhaften Anweisungen, unbekannten Eigenschaften und Werten

[Bearbeiten]

CSS definiert auch eine Fehlerbehandlung. Das generelle Verhalten besteht darin, unbekannte Anweisungen zu ignorieren. Dies ermöglicht es unter anderem auch einzuordnen, was ältere Darstellungsprogramme tun werden, wenn sie auf Eigenschaften oder Werte stoßen, die erst nach ihrer Veröffentlichung spezifiziert wurden, welche sie also nicht kennen können. Damit ist es dann auch möglich, Stilvorlagen so zu strukturieren, dass ein Ersatz für Eigenschaften angeboten wird, die älteren Programmen unbekannt sind. Weil unbekannte Anweisungen ignoriert werden, kann man für alte Programme vor einer neuen Anweisung etwas notieren, welches die neue Anweisung ersetzt. Das alte Programm wird dann die neue Anweisung ignorieren, während neue Programme die neue Anweisung interpretieren und damit also der ältere Ersatz mit höherer Priorität überschrieben werden kann.

Das Darstellungsprogramm hat die Stilvorlage auch zu analysieren, wenn sie unbekannte Strukturen enthält. In solch einem Falle ist es das Ziel der Analyse, herauszufinden, wo der ungültige Teil eines Anweisung beginnt und wo er endet. Dieser Bereich wird dann ignoriert, als sei er nicht in der Stilvorlage vorhanden, der Rest wird interpretiert.

Unbekannte Eigenschaft

[Bearbeiten]

Beispiel: 

p {color: blue; time-warp: -7days slow; background: yellow}

Die Eigenschaft time-warp wird dem Darstellungsprogramm unbekannt sein. Sie wird folglich einschließlich ihres Wertes ignoriert. Effektiv interpretiert das Darstellungsprogramm stattdessen: 

p {color: blue; background: yellow}

Unbekannte Werte

[Bearbeiten]

Beispiel: 

p {color: 450nm; font-family: sans-serif; font-size: 2; background: "red"}

Die Angabe von Wellenlängen, um Farben zu notieren, ist in CSS nicht definiert, daher ist der Wert falsch oder unbekannt. Bei der Angabe der Schriftgröße wurde die Einheit vergessen. Für die Hintergrundfarbe wurde fälschlich das Schlüsselwort für die Farbe in Anführungszeichen gesetzt.

Nach Ignorieren der fehlerhaften Anweisungen wird effektiv stattdessen folgendes interpretiert: 

p {font-family: sans-serif}

Unbekannter Selektor

[Bearbeiten]

Beispiel: 

h1, h2 & h3 { color:blue}

'&' ist in CSS2.1 ein unbekannter Selektor. Daher wird die Anweisung igoriert, also insbesondere auch für h1.

Fehlerhafte Deklaration

[Bearbeiten]

Beispiele: 

h1 { color:blue; color }  /* ':' und Wert fehlen */
h2 { color:green;   color; color:blue }  /* in der Mitte dasselbe */
h3 { color:blue; color: } /* Wert fehlt */
h4 { color:red;   color:; color:blue } /* in der Mitte dasselbe */
h5 { color:blue; color{;color:red} } /* { } hier unzulässig */
h6 { color:red;   color{;color:green}; color:blue } /* in der Mitte dasselbe */

Effektiv wird das dann interpretiert als: 

h1 {color:blue}
h2 {color:blue}
h3 {color:blue}
h4 {color:blue}
h5 {color:blue}
h6 {color:blue}

Fehlerhafte Struktur

[Bearbeiten]

Beispiele für zu ignorierende Strukturen angelehnt an Beispiel aus der Spezifikation 

p @dumm {color: blue}     /* unerwartete @-Regel @dumm */
@ab @dafuer;               /* @-Regel mit unerwartetem @-Schlüsselwort @dafuer */
}} {{ - }}               /* Anweisung mit unerwarteten rechten geschweiften Klammern */
) ( {} ) h1 {color: blue } /* Anweisung mit unerwarteter rechter runder Klammer */

Unbekannte @-Regeln und @-Schlüsselwörter

[Bearbeiten]

Bei unbekannten @-Regeln und @-Schlüsselwörtern wird der komplette, zur @-Regel gehörige Block ignoriert. Beispiel: 

@zeitmaschine {
 @warp-einstellung {
   time-warp: -7days slow;
   color: blue
 }
 h1 {color: red}
}
code {color: #af0}

Davon bleibt dann effektiv nur: 

code {color: #af0}

weil es außerhalb der unbekannten @-Regeln steht.

Unerwartetes Ende der Stilvorlage

[Bearbeiten]

Am Ende einer Stilvorlage werden alle noch offenen Strukturen geschlossen. Beispiel: 

@media print {
    h1:after { content: '!

Automatisches Schließen macht daraus effektiv: 

@media print {
    h1:after { content: '!'}
}

Unerwartetes Ende einer Zeichenkette

[Bearbeiten]

Zeichenketten können keine Zeilenumbrüche enthalten, daher werden diese automatisch geschlossen, wenn ein Zeilenende erreicht wird. Allerdings tritt dann die Fehleranalyse für unbekannte Werte und Strukturen ein. Beispiel: 

code {
 color: red;
 font-family: 'Courier New Times
 background: red;
 font-size: 1em
}

Das Darstellungsprogramm schließt 'Courier New Times', der Wert von font-family wäre dann: font-family: 'Courier New Times' background: red;.
'Courier New Times' background: red; ist aber keine gültiger Wert für font-family, daher wird die Anweisung ignoriert. Interpretiert wird: 

code {
 color: red;
 font-size: 1em
}


Abgerufen von „https://de.wikibooks.org/w/index.php?title=Websiteentwicklung:_CSS:_Syntax&oldid=825639“