Media Types

Ausgabemedien wie z.B. Bildschirm oder Drucker erfordern unterschiedliche Formatierungen für die Gestaltung der Daten. Während am Bildschirm etwa ein längerer Text in heller Schrift auf dunklem Hintergrund gut lesbar sein kann, ist dies für die Ausgabe am Drucker keine gute Lösung. Bei der Bildschirmausgabe muss Ihnen die URL von Verweisen nicht angezeigt werden während die entsprechende Angabe auf Papier sehr informativ sein kann. Deshalb können Sie für verschiedene Ausgabemedien verschiedene externe CSS-Dateien einbinden, die wiederum unterschiedliche Formatdefinitionen enthalten können. Der Browser entscheidet beim Präsentieren der Seiten, welche der eingebundenen CSS-Dateien maßgeblich ist. Wenn der Web-Browser also beispielsweise die Seiten am Bildschirm anzeigt, sollte er die CSS-Datei verwenden, die Sie explizit für das Medium 'screen' bestimmen, und wenn der Anwender eine Seite ausdruckt, sollte der Browser stattdessen die CSS-Datei verwenden, die Sie für das Medium 'print' angeben.

media="all"

CSS-Datei gilt für alle Medientypen.

media="aural"

CSS-Datei gilt für computergesteuerte, synthetische Sprachausgabe. Beachten Sie in diesem Zusammenhang auch die Seite CSS-Eigenschaften für Sprachausgabe.

media="braille"

CSS-Datei gilt für Ausgabegeräte mit so genannter «Braille-Zeile».

media="embossed"

CSS-Datei gilt für Braille-Drucker.

media="handheld"

CSS-Datei gilt für Organizer.

media="print"

CSS-Datei gilt für den Ausdruck.

media="projection"

CSS-Datei gilt für die Datenprojektion mit Beamern.

media="screen"

CSS-Datei gilt für die Bildschirmanzeige.

media="tty"

CSS-Datei für nicht-grafische Ausgabemedien mit fixer Zeichenbreite.

media="tv"

CSS-Datei gilt für Fernsehgeräte, die Scrollen nicht erlauben.

Der MS Internet Explorer interpretiert diese Angaben ab der Software-Version 4.0 nur teilweise. Daher wird in Plone bei der Drucken-Aktion ein Javascript ausgeführt, das das Stylesheet-Dokument beim Drucken austauscht.

Media Queries

@media screen and (min-width: 1024px) {
    body {
        font-size: 100%;
   }
}

link-Element:

<link rel="stylesheet" href="wide.css" media="screen and (min-width: 1024px)" />

@import-Anweisung:

@import url("wide.css") screen and (min-width: 1024px);

Die verschiedenen Queries können kombiniert werden mit ànd, z.B.:

@media screen and (min-device-width: 480px) and (orientation: landscape) {…}

<meta name="viewport" content="initial-scale=1.0, width=device-width" />

@media screen and (max-width: 768px) {
    …
}
@media screen and (max-width: 520px) {
    …
}
@media screen and (min-width: 1200px) {
    …
}