Media Type – Screen, Braille, TV, Aural, Presentation, Print

Media Types von Sprachausgabe bis zum Druck

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

print

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.

<link rel="stylesheet" href="style.css" type="text/css" media="braille, embossed" />

Eine Komma-getrennte Liste spricht mehrere Gerätetypen an.

<style>
@media handheld, projection, tv {
   #box { position: absolute; }
}
</style>

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