Schon CSS2 hat mit dem media-Attribut im link- und im style-Tag eine einfache Methode mitgebracht, um Stylesheets für spezielle Geräte anzugeben.
Mit dem Media Type können Webseiten unterschiedliche CSS-Regeln anbieten – je nachdem, auf welchen Gerätetyp die Seite angezeigt, gedruckt, vorgelesen oder präsentiert wird.
Das W3C hat die folgenden Typen für media vorgesehen:
- all
- Für alle Geräte
- aural
- Sprachausgabe
- braille
- Braillezeile
- embossed
- Braille-Drucker
- handheld
- Geräte mit kleinen Monitoren
- Drucker
- projection
- Präsentationen
- screen
- Desktop-Computer
- speech
- Sprachausgabe
- tty
- Geräte mit einer festen Platz pro Zeichen
- tv
- TV, keine oder nur begrenzte Möglichkeit zu Scrollen
Die @media-Regel trennt die CSS-Eigenschaften für unterschiedliche Geräte: z.B. kann font-size für den Print und für Screen mit unterschiedlichen Werten angegeben werden.
@media screen {
p {
font-family: Verdana, sans-serif;
font-size: 17px;
}
}
@media print {
p {
font-family: Georgia, serif;
font-size: 16pt;
}
}
CSS pro Media-Typ
Die CSS-Regeln für die einzelnen Gerätetypen können mit drei Methoden eingebunden werden.
1. Extern in einer CSS-Datei
<link rel="stylesheet" href="style.css" type="text/css" media="braille, embossed" />
Eine Komma-getrennte Liste spricht mehrere Gerätetypen an.
2. Mit der media-Regel innerhalb der CSS-Datei
<style>
@media handheld, projection, tv {
#box { position: absolute; }
}
</style>
3. Import aus einer externen CSS-Datei
@import url("style.css") screen;
Dank der @media-Regel können wir das CSS für alle alle Geräte in einer CSS-Datei unterbringen. Grundsätzlich ist es besser, nicht mehrere Stylesheets anlegen. Jede CSS-Datei wird mit einem HTTP-Request geladen – das kostet ausgerechnet bei den mobilen Geräte zu viel kostbare Zeit. @media-Regeln werden sowohl in einer externen CSS-Datei oder innerhalb eines style-Tags interpretiert.
@media-Regeln dürfen ineinander verschachtelt werden.
@media screen and (min-width: 480px) {
body {
background-color:teal; color:ivory
}
@media screen and (min-width: 768px) {
body {
background-color:black; color:#fff
}
}
}
@media print {
nav {
display: none
}
@media (max-width: 12cm) {
.note { float: none }
}
}
Das erreicht die modernen Browser korrekt, aber nicht IE10 – noch eine Methode, um CSS vor Internet Explorer zu verbergen.
@media-Regeln für Screen
Keine der drei Methoden hilft ohne Weiteres, die mobilen Geräte auseinander zu halten: Wer Webseiten für den Monitor, für Tabletts und Smartphones individuell gestalten will, braucht über den Media Type hinaus Media Querys, um Eigenschaften des Monitors herauszufinden und für ein angepasstes Layout der Webseite zu nutzen.
Die @media-Regel lässt sich darum um weitere Angaben erweitern:
- width
- device-width
- device-height
- resolution
- orientation
- aspect-ratio
- device-aspect-ratio
@media only screen and (min-width:720px) and (orientation:portrait) {
}
Schon das iPhone ließ den Media-Typ »Handheld« links liegen und schlug sich auf die Seite des Media-Typs »Screen«. Erst CSS3 Media Querys fischen Unterschiede zwischen verschiedenen Monitoren heraus.
Keines will "handheld" sein
Alle Mainstream-Browser unterstützen media="screen", die meisten erkennen media="print" für ein Drucker-Stylesheet. Für Handys und andere kleine Geräte ist media="handheld" gedacht, wird aber stillschweigend ignoriert. Opera unterstützt media="speech", wenn die Spracherweiterung installiert ist.
Smartphones und Tabletts ziehen sich den Media-Type Screen an und lassen Handheld links liegen. Sie stellen also auf ihren kleinen Monitoren die Seite mit demselben Stylesheet dar wie die Browser auf dem Monitor des Desktop-Rechners. Mobilgeräte erwarten ihr CSS gefiltert via Media Queries.