Der eigene Onlineshop für Fotografen

Workshop HTML5 & CSS3 - Stephan Heller

Liste der verschiedenen Media-Typen

Media-Typ Vorgesehen für...
all alle Ausgabegeräte (Standard, wenn kein Media-Typ angegeben ist)
braille Braillezeilen, also Ausgabegeräte für Blinde, über die Bildschirminhalte als Braille wieder gegeben werden.
embossed Drucker für Blindenschrift.
handheld »handgeführte« Geräte, solche mit kleinen oder monochromen Bildschirmen sowie Geräte mit geringer Bandbreite.
print für den Ausdruck. Aber auch für alle Dokumente, die in einer Druckvorschau angezeigt werden.
projection für die Projektion (Beamer).
screen Computer-Bildschirme, die Inhalte nicht seitenweise, sondern fortlaufend anzeigen.
speech Sprachgeneratoren (womit hiermit keine Screenreader gemeint sind, diese verarbeiten die Informationen des Browsers).
tty Geräte mit feststehendem Buchstaben-Raster beziehungsweise einseitigem Bildschirm wie Terminal-Bildschirme (z.B. Bankautomaten, Ticket-Automaten) oder mobile Endgeräte mit limitieren Bildschirm-Kapazitäten.
tv Fernsehgeräte mit geringer Bildschirmauflösung und ohne Scroll-Fähigkeit.

Einsatz der Media-Typen

Media-Typen werden in drei Kontexten eingesetzt:

  1. Als Attribut im HTML-Tag link
  2. In Verbindung mit der @import-Regel
  3. In Verbindung mit der @media-Regel

link-Tag

Werden CSS-Dateien im HTML-Code per link-Tag eingebunden, kann über das Attribut media der konkrete Media-Typ angegeben werden, für den das CSS verwendet werden soll.

Dabei können ein oder mehrere Media-Typen, mit Kommata voneinander getrennt, angegeben werden. Wird eine CSS-Datei eingebunden, ohne das der das media-Attribut gesetzt ist, wird der Media-Typ all verwendet.

Beispiel link-Tag im HTML-Code

<link rel="stylesheet" media="screen, projection" href="style.css">

@import-Regel

Die Einbindung von CSS-Dateien über die @import-Regel kann sowohl im HTML-Code als auch in CSS-Dateien selber verwendet werden. Wichtig ist, dass die @import-Regel vor allen anderen CSS-Regeln (mit Ausnahme der @charset-Regel) notiert werden muss.

Auch hier können mehrere Media-Typen durch Kommata voneinander getrennt angegeben werden. Die Schreibweise ist sowohl mit als auch ohne url() möglich.

Wesentlicher Unterschied zum link-Tag ist, dass die @import-Regel von alten Browsern nicht unterstützt wird. Damit sind allerdings ganz alte Browser gemeint, von daher ist die eher ein theorethisches Problem.

Beispiel @import-Regel im HTML-Code

<style type="text/css">
    @import "style.css" print;
</style>

Beispiel @import-Regel im CSS-Code

@import url("style.css") screen, projection;

@media-Regel

Im Gegensatz zum Media-Typ im link-Tag oder im Einsatz mit der @import-Regel bezieht sich die @media-Regel nicht auf eine vollständige CSS-Datei, sondern definiert einen Bereich innerhalb einer CSS-Datei (oder im style-Element im head der HTML-Datei).

Dabei bestimmt die @media-Regel, für welchen Media-Typ der von der Regel umschlossene Abschnitt vorgesehen ist. Innerhalb einer CSS-Datei können mehrere Blöcke mit unterschiedlichen @media-Regeln definiert sein, derselbe Media-Typ in verschiedenen @media-Regeln verwendet werden.

@media-Regel können allerdings nicht verschachtelt werden, eine Media-Regel innerhalb einer anderen ist falsches CSS.

Beispiel @media-Regel

@media print {
    body {
        font-size: 10pt;
    }
    /**
    * weitere CSS-Regeln
    */
}

Media Queries

Mit CSS3 stehen Media Queries zur Verfügung. Dies sind grundsätzlich @media-Regeln, welche um weitere Parameter ergänzt werden (z.B. min-width: ..., device-heigh: ... oder orientation: .... Diese werden mit einem der Schlüsselworte and, only oder not mit dem Media-Typ kombiniert und definierten, für welche Situation ein CSS gelten soll. Mehr auf der Homepage des W3C: Media Queries.

Buchempfehlungen