CSS, HTML und Javascript mit {stil}

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

Media Type Braille, TV, Handheld, Print

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

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.