Hauptmenü

Untermenü

CSS - Grundlagen - Medientypen

1. Ausgabegeräte

Auch wenn es jetzt einige von euch irritiert, aber es gibt nicht nur Browser für die Ausgabe von HTML-Seiten. Es gibt zum Beispiel so genannte Screenreader, die Blinden die Seiten "vorlesen". Daneben existieren auch noch Braille-Zeilen oder andere Geräte. Gut, mit den meisten werdet ihr nie etwas zu tun haben, so lange ihr Seiten nicht komplett barrierearm umsetzen müsst.

Aber!

Denkt nur mal an Drucker. Es gibt immer noch genug Leute, die sich von Zeit zu Zeit Internetseiten ausdrucken, Anfahrtsbeschreibungen zum Beispiel. Und wenn ihr denen einen echten Gefallen tun wollt, so schont ihre Druckerpatronen und entwerft eine Schwarz-Weiß-Version für diesen Fall.

2. Die Medientypen

Angabe Medientyp
media="all" Gilt für alle Medientypen.
media="aural" Gilt für Sprachausgabegeräte wie Screenreader.
media="braille" Gilt für Braille-Zeilen.
media="embossed" Gilt für Braille-Drucker.
media="handheld" Gilt für Kleinstcomputer oder Organizer und wohl auch für alte Handys, aber nicht für Smartphones und Tablets..
media="print" Gilt für Drucker. Insbesondere, wenn man Seiten aus dem Browser heraus ausdrucken möchte
media="projection" Gilt für Beamer oder ähnliche Geräte.
media="screen" Gilt für die Darstellung am Monitor, vulgo im Browser.

3. Die Definition

Allgemein

Diese Vorgehensweise ist nur in den seltensten Fällen zu empfehlen. Ich zeige sie euch trotzdem mal.


/* Bildschirmausgabe */
@media screen
{
  h1 color#f00; }
  p  border1px solid #00f; }
}
/* tintenfreundliche Druckerausgabe */
@media print
{
  h1 color#000; }
  p  bordernone; }
}

Hier werden nun die entsprechenden Anweisungen je nach Medientyp gebündelt. Die Unterscheidung erfolgt über @media plus der gewünschten Ausgabeart.

Einbindung über externe Dateien


<link rel="stylesheet" media="screen" href="normal.css">
<link rel="stylesheet" media="print" href="print.css">

Hier erfolgt die Zuweisung über das media-Attribut des <link>-Tags.

Einbindung über @import


@import url("normal.css"screen;
@import url("print.css") print;

Bei dieser Vorgehensweise wird der Medientyp einfach nach der URL angegeben.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt