Media Type für iPhone, Tablet, Monitor

Media Types von Sprachausgabe bis zum Druck

Das W3C hatte ursprünglich eine lange Liste mit den folgenden Typen für media vorgesehen:

all: Für alle Geräte
print: Drucker
screen: Desktop-Computer
speech: Sprachausgabe
aural: deprecated (veraltelt) Sprachausgabe
braille: deprecated (veraltelt) Braillezeile
handheld: deprecated (veraltelt) Geräte mit kleinen Monitoren
projection: deprecated (veraltelt) Präsentationen
tty: deprecated (veraltelt) Geräte mit einer festen Platz pro Zeichen
tv: deprecated (veraltelt) Fernseher, 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:

aspect-ratio: Seitenverhältnis Breite:Höhe. Zusätzlich können min- und max- als Präfix gesetzt werden.
z.B. "screen and (max-aspect-ratio: 16:9)"
color: Farbtiefe des Geräts. Zusätzlich können min- und max- als Präfix gesetzt werden.
z.B. media="screen and (min-color: 3)"
color-index: Die Anzahl der Farben, die ein Display darstellen kann. Zusätzlich können min- und max- als Präfix gesetzt werden.
z.B. media="screen and (min-color-index:256)"
device-aspect-ratio (veraltet): Seitenverhältnis Breite : Höhe des Displays bzw. Papiers
device-height (veraltet): Höhe des Displays bzw. Papiers
device-width (veraltet): Breite des Displays bzw. Papiers
grid: Ob es sich bei dem Gerät und ein Bitmap-orientiertes Display oder ein Grid / Raster von Displays handelt.
Ein Grid wird mit 1, Bitmaps mit 0 angegeben.
height: Höhe Zusätzlich können min- und max- als Präfix gesetzt werden.
z.B. media="screen and (max-height:700px)"
monochrom: Bit per Pixel
z.B. media="screen and (min-monochrome:2)"
orientation: Ausrichtung des Displays / Papiers. Die möglichen Werte sind landscape und portrait (Querformat und Hochformat).
z.B. media="all and (orientation: landscape)"
resolution: Pixeldichte (dpi oder dpcm) des Displays / Papiers
media="print and (min-resolution:300dpi)"
scan: Scanmethode des Displays. Mögliche Werte sind "progressive" und "interlace". media="tv and (scan:interlace)"
width: Breite des Displays. Zusätzlich können min- und max- als Präfix gesetzt werden.
media="screen and (min-width:500px)"

@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.