Media Type vs Media Query

Media Types von Sprachausgabe bis zum Druck

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

@media type=" … " trennt CSS-Eigenschaften nur für unterschiedliche Geräte.

@media screen {
   p { 
      font-family: Verdana, sans-serif;
      font-size: 17px;
   }
}

@media print {
   p { 
      font-family: Georgia, serif;
      font-size: 16pt;
   }
}

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

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 Media Queries, um Eigenschaften des Monitors herauszufinden und für ein angepasstes Layout der Webseite zu nutzen.

Schon das erste 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.

Media Queries

Media Queries sind mächtiger als der veraltete Media Type und flexibler. Sie prüfen die Merkmale von Ausgabegeräten detaillierter und können die alten Media Types einbeziehen. In erster Linie nutzt das responsive Webdesign Media Queries für Breakpoints, denn eine Media Query differenziert nach Auflösung und Ausrichtung des Monitors.

aspect-ratio

Seitenverhältnis Breite:Höhe. Zusätzlich können min- und max- als Präfix gesetzt werden.

@media screen and (aspect-ratio: 16:9) { … }

color

Farbtiefe des Geräts. Zusätzlich können min- und max- als Präfix gesetzt werden.

@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)"

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

@media all and (orientation: landscape) { … }

resolution

Pixeldichte (dpi oder dpcm) des Displays / Papiers
media="print and (min-resolution:300dpi)"

@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)"

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

Media Types geben die Art des Ausgabegeräts vor, Media Queries spezielle Eigenschaften des Viewports oder Browserfensters.

Media Queries für System-Einstellungen und Zeigegeräte (Maus, Stift)

@media (prefers-color-scheme: dark) {
	body {
		background-color: #323232;
		color: #ccc;
	}
}

@media (hover: hover) {
  … 
}

@media (pointer: fine) {
  …
}