3. CSS – Cascading Style Sheets

CSS – Cascading Style Sheets (deutsch: Kaskadierende Stildefinitionen) – ist eine Layout- und Formatierungssprache, um Auszeichnungssprachen wie HTML zu formatieren. Idealerweise enthält das HTML-Dokument nur semantische Informationen und mit CSS werden diese dann gestalterisch und typografisch formatiert.

HTML bringt bereits einige Grundformatierungen mit, wie eine größere Schrift bei Überschriften. Diese lassen sich mit CSS anpassen, ebenso wie sich alle nicht formatierten Elemente formatieren lassen. Format-Tags in HTML und Format-Attribute sollten grundsätzlich nicht mehr verwendet werden. Sie sind seit HTML 5 veraltet. An deren Stelle tritt CSS.

Mit CSS ist es auch möglich, Ausgabearten für verschiedene Medien wie Monitor (screen), Projektion (projection) und Druck (print) getrennt festzulegen.

Abbildung: Logo für CSS 3
Abbildung: Logo für CSS 3

3.1 Grundlagen

Ein HTML-Dokument besteht aus semantisch sinnvollen Auszeichnungen für Überschriften, Absätzen, Listen usw. Die CSS-Anweisungen müssen nun so platziert werden, dass der Browser diese den Elementen zuordnen kann. Dazu müssen diese Anweisungen irgendwo abgelegt werden. Grundsätzlich gibt es dazu drei Möglichkeiten:

Der bevorzugte Weg ist die Benutzung einer CSS-Datei. Der Browser kann diese im Cache zwischenspeichern und der Inhalt lässt sich mit entsprechenden Werkzeugen verkleinern, sodass du Bandbreite sparen kannst (nicht wegen der Bandbreite, sondern wegen dem damit verbundenen Leistungsgewinn).

Lokale style-Elemente sollten nur in Ausnahmefällen benutzt werden, um kurzfristig Änderungen an den möglicherweisen komplexen Dateien vornehmen zu können. Solche lokalen Stilanweisungen haben eine höhere Priorität. Das style-Attribut erweitert oder modifiziert die Stile nochmals für ein einziges Element. Es hat die höchste Priorität bei widersprüchlichen Regeln aus den lokalen oder importierten Stilen.

Die Verknüpfung mit der CSS-Datei erfolgt im HEAD-Bereich des HTML-Dokuments:

1 <link rel="stylesheet" 
2       type="text/css" 
3       href="styles/style.css">

Beachten Sie, dass der Pfad zur Datei relativ zum HTML-Dokument anzugeben ist.

3.2 Syntax

Die Syntax von CSS ist relativ einfach. Die Grundstruktur besteht aus zwei Bausteinen:

  1. Selektor (selector)
  2. Regelsatz (rule set)

Der Selektor bestimmt, auf welches Element oder welche Elemente sich die Regeln beziehen.

1 Selektor {
2   Regelsatz
3 }

Wenn Stile in style-Attributen stehen, gelten sie nur für das betreffende Element, hier entfällt deshalb der Selektor.

Der Regelsatz wiederum besteht aus Regeln. Diese sind in der folgenden Form zu schreiben:

Stil: Parameter;

Das Semikolon am Ende ist erforderlich.

3.3 Selektor

Der Selektor ist so beschaffen, dass damit Elemente auf der Seite gezielt erreicht werden. Das gesamte Schema der Selektoren ist ziemlich umfassend. An dieser Stelle sollen zuerst die wichtigsten Bausteine gezeigt werden.

Elemente (Tags)

Mit CSS kannst du einzelne Elemente ansprechen. Die Syntax dazu sieht wie folgt aus:

TagName { Regelsatz }

Wenn du also alle Elemente <p> erreichen willst, reicht es aus, folgendes zu schreiben:

p { }

IDs

Häufig wird ein einziges Tag verändert. Das anzusprechende Tag muss als solches identifizierbar, dass heißt mit einer ID erreichbar sein. Das gleichnamige HTML-Attribut enthält eine Zeichenfolge, die in den CSS-Eigenschaften erreicht wird. Eine ID kann jedoch nur auf ein Element innerhalb eines Dokuments angewendet werden, darf also nur ein einziges Mal vorkommen. Die Syntax dazu sieht folgendermaßen aus:

#id { }

Ein Beispiel für eine Schaltfläche (button):

1 <style>
2 #send {
3   color: red;
4 }
5 </style>
6 <button id="send">Senden</button>

Klassen

Häufiger sollen mehrere Elemente adressiert werden. Dazu dienen Klassen, die in HTML in das Attribut class geschrieben werden. Du kannst diesem Attribut mehrere durch Leerzeichen getrennten Klassen übergeben und dadurch Regelsätze kombinieren. Dies spart umfangreiche Definitionen. Bootstrap nutzt diese Möglichkeit umfassend aus und erreicht so mit wenigen Regelsätzen eine große Anzahl von Modifikationsoptionen. Im Gegensatz zu IDs kann ein und dieselbe Klasse für mehrere Elemente definiert werden und darf damit mehrfach in einem Dokument vorkommen.

Die Syntax dazu sieht folgendermaßen aus:

.class { }

Ein Beispiel für eine Schaltfläche:

1 <style>
2 .btn {
3   color: red;
4 }
5 </style>
6 <button class="btn">Senden</button>

Attribute

Auf Attribute von HTML-Elementen kann mit folgender Syntax verwiesen werden:

[name] { }

[name="wert"] { }

Ein Beispiel für eine weitere Schaltfläche:

1 <style>
2 [data-item] {
3   color: blue;
4 }
5 </style>
6 <a href="link.html" data-item="22">Weiter</button>

Wird der Wert des Attributes (rechts vom =-Zeichen) nicht angegeben, so gilt allein die Existenz des Attributs als ausreichend, um die Regeln anzuwenden.

Logische Auswahl

Es kommt oft vor, dass Regelsätze auf mehrere Selektoren anwendet werden sollen. Dazu wird ein logisches ODER benötigt, welches in CSS ein Komma ist:

a, b { }

Zwischen a und b gibt es keinen Zusammenhang, die Regel wird auf beide unabhängig angewendet. Die Platzhalter a und b im Beispiel können wiederum komplexere Selektoren sein.

Weitere Selektoren

In der Praxis reichen diese Selektoren nicht aus. Die folgende Tabelle gibt eine kompakte Übersicht über alle weiteren Formen.

Tabelle: Einfache CSS-Selektoren
Symbol Beschreibung
* Universal / alles
tag Elemente
.class Klasse (Attribut class)
#id ID (Attribut id)
[a] Attributpräsenz
[a=v] Attributwert
[a~=v] Attribut enthält Wert als alleinstehendes Wort
[a|=v] Attribut enthält Wert nicht
[a^=v] Attribut beginnt mit Wert
[a$=v] Attribut endet mit Wert
[a*=v] Attribut enthält Wert

Der Umgang mit Hierarchien ist essenziell, denn HTML-Dokumente sind Hierarchien, oft auch Bäume genannt. Die folgende Abbildung zeigt die Beziehungen zwischen Elementen im Baum des Dokuments.

Abbildung: Elemente der Hierarchie einer HTML-Seite
Abbildung: Elemente der Hierarchie einer HTML-Seite

Die folgende Tabelle zeigt die Syntax für CSS.

Tabelle: CSS-Selektoren für Hierarchien
Symbol Beschreibung
e > f Auswahl, wenn f ein Kindelement von e ist
e f Auswahl, wenn f ein Nachfahre von e ist
e + f Auswahl, wenn f ein Nachfolger von e ist
e ~ f Auswahl, wenn f ein Geschwister von e ist

Gegenüber den Möglichkeiten der Beziehungen fehlen Selektoren für die Vorfahren, Vorgänger und Eltern. Dies erreichst du durch Vertauschen der Elemente.

Pseudo-Selektoren sind solche, die keine vergleichbare Darstellung in HTML haben, sondern sich aus der Position von Elementen oder der Benutzung ergeben. Es gibt drei Arten solcher Selektoren:

Tabelle: Statische CSS-Selektoren
Symbol Beschreibung
::first-line Erste Zeile
::first-letter Erster Buchstabe
::before Vor dem Element
::after Nach dem Element
::selection Der markierte (ausgewählte) Bereich
Tabelle: CSS-Selektoren für Bereiche
Symbol Beschreibung
:root Basiselement
:empty Gilt, wenn das Element leer ist
:first-child Das erste Kindelement einer Liste
:last-child Das letzte Kindelement einer Liste
:nth-child() Ein bestimmtes Kindelement einer Liste
:nth-last-child() Ein bestimmtes Kindelement einer Liste vom Ende
:only-child Nur gültig, wenn es nur ein Kindelement gibt
:first-of-type Erstes Kindelement von einem Typ
:last-of-type Letztes Kindelement von einem Typ
:nth-of-type() Kindelement von einem Typ in einer Liste
:nth-last-of-type() Kindelement von einem Typ in einer Liste vom Ende
:only-of-type Nur dieser Typ aus einer Liste
Tabelle: Dynamische CSS-Selektoren
Symbol Beschreibung
:link Ein Hyperlink
:visited Ein Hyperlink, der bereits besucht worden ist
:hover Ein Hyperlink, über dem die Maus schwebt
:active Ein Hyperlink, der aktive ist (angeklickt)
:focus Ein Element, das den Fokus hat (blinkender Cursor)
:target Ein Element, das ein Target-Attribut hat
:disabled Ein Element, das deaktiviert ist (disabled-Attribut)
:enabled Ein Element, das aktiviert ist (kein disabled-Attribut)
:checked Ein Element, das angehakt ist (nur Kontrollkästchen)
:valid Ein Element, das gültig ist
:invalid Ein Element, das ungültig ist
:lang() Ein Element, das das passende lang=”” Attribut hat
:not() Negiert die folgende Auswahl (dies ist ein Operator)

Die Prüfung der Gültigkeit von Formularelementen setzt voraus, dass die in HTML 5 definierten Attribute wie maxlength, required, date, email usw. zum Einsatz kommen.

Im Gegensatz zum Attribut lang kann die Funktion lang() in CSS ein Fallback auf eine Stammkultur ermitteln, reagiert also bei der Angabe “de-DE” auch auf “de” usw.

3.4 Das Box-Modell

HTML kennt zwei Arten von Darstellformen für Elemente: Fließelemente und Blockelemente. Fließelemente sind solche, die sich in fortlaufenden Text einbetten. Diese Elemente haben keine Dimensionen wie Breite und Höhe, denn sie richten sich nach den umgebenen Elementen. Blockelemente dagegen haben Dimensionen und diese führen dazu, dass angrenzende Elemente von dem eingenommenen Platz verdrängt werden. Das Verdrängungsverhalten ist darüberhinaus vielfältig anpassbar, bis hin zur gewollten Überlagerung. Mit speziellen Regeln können Elemente, die eigentlich Fließelemente sind, zu Blockelementen umdeklariert werden. Dies geht auch umgekehrt.

Das Box-Modell der Blockelemente definiert Eigenschaften für nahezu alle Bereiche eines rechteckigen Bereichs.

Abbildung: Bausteine des Box-Modells
Abbildung: Bausteine des Box-Modells

Wichtig ist zu erkennen, dass die Angabe der Breite width und Höhe height nicht die endgültigen Maße, sondern die Dimensionen des Inhaltsbereichs abbilden. Wenn ein Rahmen die Box umschließt, muss für die Berechnung der endgültigen Breite der Rahmen doppelt berechnet werden, wenn der Rahmen auf allen Seiten gleich ist:

Breite = Rand * 2 + Rahmenbreite * 2 + Abstand * 2

Höhe = Rand * 2 + Rahmenbreite * 2 + Abstand * 2

Unterscheiden sich Ränder, Rahmenbreiten und Abstände, wird die Berechnung entsprechend aufwändiger.

Bausteine der Box

Die Bausteine der Box dienen dazu, jeden Teil einzeln mit Werten zu belegen. Der innere Bereich nimmt den Inhalt auf. Die Bausteine sind:

Das es sich bei der Box um ein Rechteck handelt, sind jeweils vier Werte anzugeben:

Die mit margin gebildeten Abstände sind horizontal absolut gültig. Vertikal dagegen können die Abstände unter bestimmten Umständen zusammenfallen (collapsed). Dies tritt auf, wenn weder Rahmen (border) noch Abstand (padding) benutzt werden und keine Freistellung (clear) erfolgt. Dabei wird dann der untere Rand der oberen Box mit dem oberen Rand der unteren Box überlagert. Sind die Ränder unterschiedlich groß, wird der breitere Rand als gesamter Rand angenommen.

Das Box-Modell in CSS3

In CSS3 wurde eine Erweiterung des Box-Modells eingeführt, die mehr Flexibilität bei der Zuweisung ermöglicht. Mithilfe der Eigenschaft box-sizing lässt sich spezifizieren, worauf sich die Angaben von width bzw. height beziehen sollen. Erlaubt sind dabei eine der folgenden Angaben:

3.5 Beachtung von Medien

Mit CSS kann die Darstellung eines Dokuments für verschiedene Ausgabemedien festgelegt werden. Die Zuordnung eines Stylesheets zu einem Medium erfolgt mit Hilfe von Medienabfragen (Media Queries).

Als Medienabfrage wird eine Liste von Kriterien bezeichnet, die ein Ausgabemedium erfüllen muss, damit ein Stylesheet zur Verarbeitung eingebunden wird. Medienabfragen bestehen aus einem Medientyp (beispielsweise Bildschirm oder Drucker), einem Medienmerkmal (wie die Farbfähigkeit) oder einer Kombination aus beidem. Mithilfe der Kombinationsmöglichkeit können Stylesheets auf eine Vielzahl von Ausgabemedien zugeschnitten werden.

Syntax

Die Angabe eines Medientyps erfolgt als einfaches Schlüsselwort, beispielsweise screen.

Wird keine Medienabfrage angegeben oder besteht die angegebene Abfrage nur aus Leerzeichen, so gilt der Standardwert all.

Medienabfrage im HTML-Dokument
1 <link rel="stylesheet" href="monitor.css" media="screen">
2 <link rel="stylesheet" href="printer.css" media="print">

Der Medientyp print sorgt dafür, dass das Stylesheet printer.css nur bei der Druckausgabe benutzt wird. Auf einem Bildschirm (screen) dagegen wird monitor.css aktiviert.

Du kannst das Attribut media auch weglassen, dann gilt das betreffende Stylesheet für alle Medien. In der alternativen Datei müssen dann nur die Änderungen vermerkt werden.

Medienabfrage mit Standarddokument
1 <link rel="stylesheet" href="monitor.css">
2 <link rel="stylesheet" href="printer.css" media="print">

Die Regeln lassen sich alternativ auch direkt in der CSS-Datei unterbringen:

Regeln für Druckausgabe
1 @media print {
2   /* Regeln für Druckausgabe */
3 }

Medien haben bestimmte Merkmale, die die Auswahl der Regel modifizieren. Bei einem Bildschirm kann dies beispielsweise die Anzahl der Pixel sein. Präfixe wie min- und max- erlauben das Angeben von Bereichen.

1 <link rel="stylesheet" href="pt.css" 
2       media="(orientation: portrait)">

Das Stylesheet pt.css wird eingebunden, wenn die Inhalte auf Seiten im Hochformat (portrait) ausgegeben werden.

1 <style type="text/css" media="(color)">
2   /* Farbangaben. */
3 </style>

Die im style-Element angegebenen Farbangaben werden verarbeitet, wenn das Ausgabemedium Farben darstellen kann. Ein Schwarz-Weiß-Drucker würde dann davon profitieren, dass über ihn keine schlecht lesbaren Farben ausgegeben werden (Gelb auf Weiß beispielsweise).

1 @import 'layout.css' (min-width: 150mm);

Das Stylesheet layout.css kommt zur Anwendung, wenn der Anzeigebereich des Ausgabemediums mindestens 150mm beträgt.

Medienabfragen können mit logischem ODER gruppiert werden. Wie bei den CSS-Selektoren wird dazu das Komma benutzt. Gruppierte Abfragen sind voneinander völlig unabhängig. Sobald mindestens eine der Abfragen zutrifft, werden die Deklarationen angewendet.

1 @media print, embossed { 
2   /* Formate für Printmedien. */ 
3 }

In diesem Beispiel wird ein Stylesheet festgelegt, das sowohl für den Medientyp print als auch den Medientyp embossed verwendet werden kann.

Mehrere Medienmerkmale können mit dem Schlüsselwort and (und) verbunden werden. Ein Stylesheet wird nur dann verarbeitet, wenn alle damit verbundenen Kriterien erfüllt werden.

1 @media (min-width: 130mm) and (max-width: 160mm) { 
2   /* Kompaktes Layout */ 
3 }
4 @media print and (color), screen and (color) { 
5   /* Farbangaben */ 
6 }

Ist ein Medientyp am Anfang einer Medienabfrage notiert, so kann dieser Angabe das Schlüsselwort only oder das Schlüsselwort not vorangestellt werden. only (nur) erfüllt dabei nur den Zweck, die Medienabfrage vor Browsern zu verstecken, die diese und die damit verbundenen Kombinationsmöglichkeiten nicht unterstützen. Ansonsten wird die Abfrage verarbeitet, als wäre das Schlüsselwort nicht vorhanden. Wird einer Medienabfrage der Operator not (nicht) vorangestellt, so wird die Abfrage verneint.

1 @media only all and (min-width: 150mm) { 
2   /* Layout */ 
3 }
4 @media not all and (monochrome) { 
5   /* Farben */ 
6 }

Dieses Beispiel zeigt, wie Bildschirmen mit einem mindestens 150mm breiten Anzeigebereich Regeln zugewiesen werden. Ein Browser, der Medienabfragen versteht, ignoriert das Schlüsselwort only. Durch die Verneinung der Abfrage monochrome werden die Farbangaben von allen Medien verwendet, die mit Farbangaben umgehen können.

Jedes Merkmal kann auch ohne Wertangabe verwendet werden. In diesem Fall wird abgefragt, ob das Merkmal auf dem verwendeten Medium vorhanden ist.

1 @media (width) { 
2   /* Das Ausgabemedium besitzt das Merkmal "Breite" */ 
3 }
4 @media (color) { 
5   /* Das Ausgabemedium besitzt das Merkmal "Farbfähigkeit" */ 
6 }

Parameter

Das Merkmal width (Breite) beschreibt bei fortlaufenden Medien die Breite des Anzeigebereichs (Viewport) und bei paginierten Medien die Breite einer Seite. Die Präfixe min- und max- sind erlaubt, um Grenzen anzugeben.

1 @media (width: 60em) { 
2   /* Breite entspricht genau 60em */ 
3 }
4 @media (min-width: 50em) { 
5   /* Breite beträgt mindestens 50em */ 
6 }
7 @media (max-width: 70em) { 
8   /* Breite beträgt höchstens 70em */ 
9 }

Bei Merkmalen, die sich auf den Anzeigebereich beziehen ist es fast immer sinnvoll, eines der möglichen Präfixe zu verwenden, da die tatsächliche Anzeigebreite beim Benutzer nicht vorhersehbar ist.

Das Merkmal height (Höhe) beschreibt bei fortlaufenden Medien die Höhe des Anzeigebereichs (Viewport) und bei paginierten Medien die Höhe einer Seite. Die Präfixe min- und max- sind erlaubt, um Grenzen anzugeben.

Die Merkmale device-width (Geräte-Breite) und device-height (Geräte-Höhe) beschreiben die Breite bzw. Höhe des Ausgabegerätes, beispielsweise die Breite eines Bildschirms in Pixel. Der Wert ist eine positive Längenangabe. Die Präfixe min- und max- sind erlaubt, um Grenzen anzugeben.

1 @media (device-width: 800px) { 
2   /* Breite entspricht genau 800 Pixel */ 
3 }
4 @media (min-device-width: 800px) { 
5   /* Breite beträgt mindestens 800px */ 
6 }
7 @media (max-device-width: 1024px) { 
8   /* Breite beträgt höchstens 1024px */ 
9 }

Das Merkmal orientation (Orientierung) beschreibt das Seitenformat eines Ausgabemediums. Die Orientierung entspricht dem Wert landscape (Querformat), wenn der Wert des Merkmals width größer ist als der Wert des Merkmals height. Andernfalls entspricht die Orientierung dem Wert portrait (Hochformat). Der Wert ist eines der Schlüsselwörter portrait oder landscape.

1 @media (orientation: portrait) { 
2   /* Formate für hochformatige Ausgabemedien */ 
3 }

Das Merkmal aspect-ratio (Seitenverhältnis) beschreibt das Verhältnis des Merkmals width zum Merkmal height. Der Wert ist ein Verhältniswert. Die Präfixe min- und max- sind hier erlaubt.

1 @media (aspect-ratio: 4/3) { /* Fall 1 */ }
2 @media (min-aspect-ratio: 4/3) { /* Fall 2 */ }
3 @media (max-aspect-ratio: 4/3) { /* Fall 3 */ }

In diesem Beispiel wird der Verhältniswert 4/3 den Varianten des aspect-ratio-Merkmals zugewiesen. Das Stylesheet wird verarbeitet, wenn das Seitenverhältnis des Anzeigebereichs (Viewport) genau 4 zu 3 entspricht (Fall 1). Das ist beispielsweise bei einem Anzeigebereich von 492 zu 369 Pixel der Fall. Das Stylesheet in Fall 2 wird angewendet, wenn das Seitenverhältnis 4/3 oder höher (z.B. 5/3 oder 6/3) beträgt. Im Fall 3 wird das Stylesheet entsprechend nur verarbeitet, wenn das Seitenverhältnis 4/3 oder geringer ist (beispielsweise 2/3 oder 1/3).

Das Merkmal device-aspect-ratio (Geräte-Seitenverhältnis) beschreibt das Verhältnis des Merkmals device-width zum Merkmal device-height. Die Anwendung erfolgt analog zum Merkmal aspect-ratio.

Das Merkmal color (Farbe) beschreibt die Anzahl der Bits, die ein Gerät pro Farbkomponente (das sind Rot, Grün oder Blau) verwendet. Kann das Ausgabegerät keine Farben anzeigen, ist der Wert 0 (Null) zutreffend. Wird für verschiedene Farbkomponenten eine unterschiedliche Anzahl an Bits verwendet, so zählt die niedrigste verwendete Bit-Anzahl des Geräts. Der Wert ist eine nicht negative Zahl.

1 @media (color: 2) { /* Einfaches Farblayout */ }
2 @media (min-color: 3) { /* Komplexes Farblayout */ }
3 @media (max-color: 2) { /* Einfaches Farblayout */ }

Das Merkmal color-index (Farbindex) beschreibt die Anzahl der Farbdefinitionen in der Farbtabelle des Ausgabemediums. Verfügt das Medium nicht über eine Farbtabelle, ist der Wert 0 (Null) zutreffend. Üblicherweise besitzen nur Medien eine Farbtabelle, deren Farbfähigkeit eingeschränkt ist.

1 @media (color-index: 16) { 
2   /* genau 16 Farben stehen zur Verfügung */ 
3 }
4 @media (min-color-index: 20) { 
5   /* Mindestens 20 Farben stehen zur Verfügung */ 
6 }
7 @media (max-color-index: 256) { 
8   /* Höchstens 256 Farben stehen zur Verfügung */ 
9 }

Das Merkmal monochrome (schwarz-weiß) beschreibt die Anzahl der Bits, die zur Beschreibung eines schwarz-weiß-Farbtons verwendet werden. Handelt es sich nicht um ein Gerät, das nur Graustufen darstellen kann (sondern auch Farben), ist der Wert 0 (Null) zutreffend.

1 @media (monochrome: 1) { 
2   /* nur schwarz und weiß stehen zur Verfügung */ 
3 }
4 @media (min-monochrome: 4) { 
5   /* Mindestens 16 Graustufen stehen zur Verfügung */ 
6 }
7 @media (max-monochrome: 8) { 
8   /* Höchstens 256 Graustufen stehen zur Verfügung */ 
9 }

Das Merkmal light-level (Lichtstärke) beschreibt die Lichtverhältnisse der Umgebung, die durch den Helligkeitssensor der Kamera erfasst werden. Folgende Einstellungen sind möglich:

Die Spezifikation verwendet absichtlich keine festen Lux-Werte, da viele Geräte eine eigene Kontrastanpassung vornehmen und die Technologien zu unterschiedlich sind (E-Ink bleibt im Hellen leserlich, während Flüssigkristall-Displays keinen Kontrast mehr bieten). Da Helligkeitssensoren häufig nicht geeicht sind, ist die Reaktion schwer vorhersagbar.

 1 @media (light-level: normal) {
 2   p { 
 3     background: url("texture.jpg"); 
 4     color: #333 }
 5 }
 6 @media (light-level: dim) {
 7   p { 
 8     background: #222; 
 9     color: #ccc }
10   }
11 @media (light-level: washed) {
12   p { 
13     background: white; 
14     color: black; 
15     font-size: 2em; }
16 }

Das Merkmal pointer (Zeiger) unterscheidet die Genauigkeit der Angabe. So kann die sonst oft schwierige Unterscheidung zwischen Touch-Geräten einerseits (Smartphones und Tablets, aber auch Konsolen wie die Wii) und Geräten mit Maus, Touchpad oder Eingabestiften getroffen werden. Folgende Einstellungen sind möglich:

1 @media (pointer: coarse) {
2   input {
3     padding 1em;
4     font-size: 2em;
5   }
6 }

Bei Touchgeräten werden die Schriftgröße und der Innenenabstand des Eingabefelds entsprechend vergrößert.

Da die meisten Geräte mehrere Eingabemöglichkeiten haben, deren Gebrauch aber nicht vorhergesagt werden kann, kann man mit any-pointer herausfinden, ob es die Eingabegeräte überhaupt gibt. Du kannst mit pointer und any-pointer nicht sicher auf bestimmte Geräte schließen. Allerdings kannst du in Kombination mit der Displaybreite sehr gut erkennen, ob jemand per Smartphone, Tablet oder Desktoprechner unterwegs ist. Dadurch kannst du Webseiten genauer für bestimmte Geräte optimieren.

Das Merkmal resolution (Auflösung) beschreibt die Auflösung, also die Dichtigkeit der Bildpunkte auf einem Ausgabemedium. Besitzt das verwendete Ausgabemedium keine rechteckigen Bildpunkte (beispielsweise Drucker), so kann das Merkmal nur in Verbindung mit einem Präfix verwendet werden. In diesem Fall prüfen Abfragen mit min-resolution die geringstmögliche, Abfragen mit max-resolution die höchstmögliche Dichtigkeit der Bildpunkte des Ausgabemediums ab.

1 @media (resolution: 96dpi) { 
2   /* Die Auflösung beträgt 96 Bildpunkte pro Zoll */ 
3 }
4 @media (min-resolution: 200dpcm) { 
5   /* Die Auflösung beträgt mindestens 200 Punkte pro cm */ 
6 }
7 @media (max-resolution: 300dpi) { 
8   /* Die Auflösung beträgt höchstens 300 Punkte pro Zoll */ 
9 }

Das Merkmal scan (Abtasten) beschreibt den Bildaufbau von Ausgabegeräten des Typs tv. Dieser kann progressiv erfolgen, das entspricht etwa dem Bildaufbau auf einem Computerbildschirm, dann trifft der Wert progressive zu, oder mit Hilfe von Zeilenbildung (d.h. einzelne Bildzeilen werden nach und nach dargestellt), dann trifft der Wert interlace zu. Erlaubt sind die Werte progressive oder interlace.

1 @media (scan: progressive) { 
2   /* Bildschirmlayout */ 
3 }

Das Merkmal grid (Raster) beschreibt die Rastereigenschaft von Ausgabemedien. Bei Ausgabegeräten, die Inhalte in einem Raster darstellen, trifft der Wert Eins (1) zu, andernfalls der Wert Null (0).

1 @media (grid: 0) { 
2   /* Zahlreiche Schriftformatierungen */ 
3 }

3.6 Der Viewport

Zu den Grundlagen der Entwicklung für mobile Geräte gehört das Meta-Element viewport. Diese eine Zeile HTML-Code sorgt für eine korrekte Skalierung der Website beim ersten Aufruf auf dem mobilen Gerät.

Die Browser der mobilen Geräte gehen zuerst einmal davon aus, dass Websites nicht für sie ausgelegt sind und die Website-Breite die Display-Breite um einiges übersteigt. Der Browser-Viewport (Anzeigebereich) ist deshalb beispielsweise in Mobile Safari auf eine Breite von 980 Pixeln eingestellt, so dass die meisten Websites komplett zu sehen sind. Dies hat den Nachteil, dass die Inhalte sehr klein und Schriften nicht lesbar sind. Der Nutzer muss dann selbst hineinzoomen, um etwas erkennen zu können.

Viewport einstellen

Die Einstellung des Viewport lässt sich sehr einfach über ein HTML-Element anpassen. Weicht die eigene Website von der oben genannten Standardbreite ab, so kann man den Viewport anpassen. Dadurch kann man dafür sorgen, dass Inhalt und Anzeigebereich übereinstimmen. Bei schmaleren Layouts wird dadurch kein unnötiger Platz verschenkt, sondern die Website in der möglichen Maximalgröße dargestellt.

Startansicht von apple.com auf mobilen Geräten (links) und gezoomte Ausschnitt mit lesbarer Schrift (rechts):

Abbildung: Website mit und ohne Zoom
Abbildung: Website mit und ohne Zoom

Für die Änderung füge folgende Zeile in den Kopfbereich der Seite ein. Diese wird dann von mobilen Geräten ausgewertet.

1 <!DOCTYPE html>
2 <head>
3     <meta name="viewport" content="width=1024" />
4 </head>
5 <body>
6 </body>

Handelt es sich um Website, die speziell für mobile Geräte erstellt oder optimiert ist, geht man meist nicht den obigen Weg, eine fixe Breite für den Viewport anzugeben. Ein Smartphone hat beispielsweise im Hochformat eine logische Breite von 320px und im Querformat 480px (physikalisch wird der Wert höher sein). Dies hätte zur Folge, dass im Hoch- und Querformat die gleichen Inhalte, lediglich in einem unterschiedlichen Zoomlevel, gezeigt würden.

Stattdessen wird eine Formel verwendet, um passend umzurechnen:

Breite des Viewports = Breite des Devices

Hat das Smartphone nun eine Breite von 320px im Hochformat, Werden genau 320px der Website gezeigt werden (1:1). Ebenso werden im Querformat dann 480px gezeigt. Diese flexible Einstellung ist einerseits geräteunabhängig und ermöglicht es andererseits auch, im Querformat den gewonnenen Platz in der Breite sinnvoll zu nutzen.

Der folgende Vergleich zeigt den Effekt. Die Ansicht auf mobilem Gerät mit Meta-Element im Quellcode width=device-width (linkes Bild) und ohne (rechtes Bild):

Abbildung: Ansicht mit und ohne Meta-Element
Abbildung: Ansicht mit und ohne Meta-Element

Viewport-Einstellungen

Das Meta-Element für den Viewport besitzt neben der Breite weitere Eigenschaften, die komma-separiert aufgelistet werden.

1 <meta name="viewport" content="width=device-width, 
2                                initial-scale=1.0, 
3                                user-scalable=no" />
initial-scale
Der Wert legt den anfänglichen Zoomgrad fest. 1.0 führt dazu, dass die Inhalte 1:1 dargestellt werden, dass heißt auf einem Screen mit 320px Breite füllt eine 320px-breite Grafik die komplette Breite aus (siehe auch Screenshot oben). Dementsprechend führt beispielsweise 2.0 zu einer 2x-fachen Vergrößerung.
user-scalable
Mit diesem Attribut wird definiert, ob der Nutzer auf der Seite zoomen kann (yes) oder nicht (no).
minimum-scale und maximum-scale
Diese beiden Eigenschaft ermöglichen es, den Zoomgrad einzuschränken. Setze die maximale Skalierung auf 2.0, kann der Inhalt maximal 2x-fach vergrößert werden.

3.7 Einheiten

CSS-Einheiten drücken eine Längenangabe aus. Diese wird für Breiten, Höhen, Abstände, Ränder usw. benötigt. Syntaktisch bestehen Einheitsangaben aus einer Zahl und einer Maßeinheit. Bei der Zahl 0 kann die Maßenheit entfallen. Es gibt zwei Arten von Einheiten: absolute und relative.

Absolute Einheiten

Absolute Einheiten sind folgende:

Die Beziehung zwischen Pixel (Bildschirmpunkt) und Zoll ist bei Windows auf 1 Zoll = 2.54 cm = 96 Pixel festgelegt. Dabei liefern Standardgeräte mit normaler Auflösung ein Verhältnis von 1 Gerätepixel = 1 Pixel. Geräte mit hoher Auflösung, wie Drucker oder Retina-Displays liefern n Gerätepixel = 1 Pixel. Dabei gilt in etwa folgendes:

Tabelle: Medienabfrage im HTML-Dokument
System Auflösung Gerätepixel pro Pixel
Mac 72 1
Windows 96 1
Mobil low 120 1
Mobil medium 160 2
Mobil high 240 2
Retina 300 3

Willst du die wirkliche Auflösung herausfinden, kannst du dies nur mit der Angabe der Bildschirmbreite und -höhe und der Diagonale des Bildschirms. Bei 4,65 Zoll (Smartphone) und 1280x720 Pixeln ergibt sich nach dem Satz des Pythagoras:

sqrt(1280² x 720²) / 4.65 = 315.8

Das wird auf 316 gerundet und die Vermarkter eines solchen Gerätes machen meist plakative 320 dpi daraus. Dividiert durch 96 ergibt sich ein Verhältnis von 1:3,33, was gerundet 3 Gerätepixel pro Pixel ergibt.

Generell sollten absolute Angaben nur benutzt werden, wenn die Ausgabe sicher bestimmt werden kann. Das ist im Grunde nur bei Druckern möglich.

Relative Einheiten

Relative Einheiten nutzen einen bestimmten Ausgangspunkt von da kalkuliert man nur noch Verhältnisse. Verfügbar sind folgende Einheiten:

Die in der Typografie benutzte Einheit em definiert die Größe des Buchstabens “M” ungefähr als Maß der Einheit. Dies ist bei CSS nicht der Fall, der Wert ist jedoch bei der Browserstandardschrift Times New Roman vergleichbar. Welchen konkreten Pixelwert der Browser nutzt ist allerdings nicht klar definiert, es sind keineswegs 12 Pixel wie oft behauptet und die häufiger anzutreffenden 16 Pixel sind keine Garantie.

Das folgende Bild zeigt, das bei der Standardschriftart (hier aus Firefox) tatsächlich 16 Pixel für den Buchstaben “M” benutzt werden und dass dies der Angabe 16px entspricht. Die rote Linie ist 16 Pixel breit. Als Schriftgröße wurde bei diesem Screenshot einmal 1em und einmal 16px eingestellt und jeweils dasselbe Ergebnis erzielt.

Abbildung: Vermessung der Pixel der Einheit em
Abbildung: Vermessung der Pixel der Einheit em