Media Type vs Media Query

Media Type: Braille, TV, Handheld, Projection

Das media-Attribut im link- und style-Tag war ursprünglich als eine einfache Methode gedacht, um spezielle Ausgabegeräte wie Monitor, Druck, Audio oder Braillezeile anzusprechen. Heute setzt die Entwicklung von Webseiten auf Media Queries, die flexibler sind und besser differenzieren.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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

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) {
  …
}