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. |
Media-Typen werden in drei Kontexten eingesetzt:
link
@import
-Regel@media
-Regellink
-TagWerden 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.
link
-Tag im HTML-Code<link rel="stylesheet" media="screen, projection" href="style.css">
@import
-RegelDie 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.
@import
-Regel im HTML-Code<style type="text/css">
@import "style.css" print;
</style>
@import
-Regel im CSS-Code@import url("style.css") screen, projection;
@media
-RegelIm 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.
@media
-Regel@media print {
body {
font-size: 10pt;
}
/**
* weitere CSS-Regeln
*/
}
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.