Media Type vs Media Query

Media Types von Sprachausgabe bis zum Druck

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

<link rel="stylesheet" media="screen" href="styles.css">
<link rel="stylesheet" media="print" href="print.css">

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

Das media-Attribut wird im Grunde genommen nicht mehr gebraucht. Heute trennt @media type=" … " die CSS-Eigenschaften 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;
   }
}

Keine speziellen Media Types mehr

Die Media Types wie aural, braille, … wurden aus der CSS-Spezifikation entfernt, weil sie veraltet und unnötig geworden sind. Screenreader und Sprachausgabe brauchen kein aural mehr, das nie richtig unterstützt wurde. Stattdessen nutzt man heute ARIA (Accessible Rich Internet Applications – Standard, der Webinhalte für Menschen mit Behinderungen besser zugänglich macht) und CSS für die Sprachausgabe. Braille-Displays verarbeiten Webseiten direkt und brauchen kein spezielles CSS. Schon das erste iPhone ließ den Media-Typ »Handheld« links liegen und schlug sich auf die Seite des Media-Typs »Screen«.

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.

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 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) überprüft, ob das Gerät einen präzisen Zeiger hat – also eine Maus oder ein Trackpad. Die Abfrage unterscheidet zwischen Touchscreen und Maus. Der präzise Zeiger der Maus kann mit kleineren Klickflächen arbeiten.

@media (pointer: fine) {
  …
}