Serverzeit:   30.03.2017 - 10:53

Media-Typen in CSS

von Benjamin Jung am 27.02.2014

Mit CSS ist es möglich für den Ausdruck einer Webseite bestimmte Sonderregeln festzulegen. Dazu gibt es in CSS die Anweisung "media". Für die Benutzung vom CSS-Media-Typ gibt es zwei Möglichkeiten, welche wir jetzt genauer erklären wollen. Davor wollen wir jedoch die verschiedenen Werte etwas genauer erklären:

all Gilt für alle Medien-Typen
screen Gilt für die Ausgabe auf Bildschirmen.
projection Gilt für die Ausgabe mit Beamern.
handled Gilt für die Ausgabe auf tragbaren Computern.
tv Gilt für die Ausgabe auf TV-Bildschirmen.
print Gilt für die Ausgabe auf Papier.
tty Gilt für die nicht grafische Ausgabe.
aural Gilt für die sprachliche Ausgabe.
braille Gilt für die Ausgabe mit einer "Braile-Zeile" (Ausgabegerät für Blindenschrift).
embossed Gilt für die Ausgabe mit der "Braile-Schrift" auf Papier (Blindenschrift auf Papier - nur für spezielle Drucker).

Oft binden wir ein CSS-Dokument mit link-Element in HTML ein. Dieses besitzt das Attribut media, welches wir einem der oben genannten Werte als Wert übergeben können, dass sieht dann z. B. so aus:

 <link rel="stylesheet" href="printdesign.css" media="print" />
 <link rel="stylesheet" href="screendesign.css" media="screen" />

Wenn wir die media-Eigenschaft nicht im link-Element festlegen wollen, dann können wir diese Anweisung auch innerhalb eines CSS-Codes notieren. Dazu müssen alle Selektoren und Eigenschaften innerhalb des Media-Bereich angegeben werden. Dafür setzen wir den Media-Typ und setzen den Inhalt innerhalb von geschweiften Klammern. Dies sieht wie folgt aus:

 @media all {
     // Grund-Design fültig für alle Typen
 }
 @media print {
     // Design-Anpassung für den CSS-Typ "print"
 }
 @media screen, projection {
     // Design-Anpassung für den CSS-Typ "screen" und "projection"
 }
Hallo Gast  •  Autorenanmeldung
Copyright 2013 - 2014 Homepage-Webhilfe (Benjamin Jung)   •   Homepage-Webhilfe-Blog   •   Blog-Version 1.5   •   Powered by Benjamin Jung