CSS/Media Queries/Medienmerkmale

Text-Info

20min

leicht

● Einstieg in CSS
● Media Queries

Ein Medienmerkmal beschreibt eine bestimmte Eigenschaft des Mediums, auf das die Ausgabe erfolgen soll. Es kann sich um Abmessungen handeln (width oder height) oder eine bestimmte Eigenschaft des Mediums.

Jede Abfrage auf ein Medienmerkmal wird in runde Klammern gesetzt, und ergibt den Wert „wahr“, wenn die Merkmalsabfrage zutrifft, oder sonst „falsch“.

Medienmerkmale

width

Das Merkmal width (Breite) beschreibt bei fortlaufenden Medien die Breite des Anzeigebereichs (Viewport) und bei paginierten Medien die Breite einer Seite.

• 
• 
• 
• 
• 
• 

• abgefragter Wert: Eine positive Längenangabe.
• betrifft: sichtbare und fühlbare Medien.
• Merkmalstyp: Wertebereich.

Beispiel

@media (width: 60em)     { /* Breite entspricht genau 60em */ }
@media (min-width: 50em) { /* Breite beträgt mindestens 50em */ }
@media (width >= 70em)   { /* Breite beträgt höchstens 70em */ }

Beachten Sie: Bei Merkmalen, die sich auf den Anzeigebereich beziehen, ist eine Abfrage auf einen exakten Wert kaum sinnvoll, da die tatsächliche Anzeigebreite beim Benutzer nicht vorhersehbar ist.

height

Das Merkmal height (Höhe) beschreibt bei fortlaufenden Medien die Höhe des Anzeigebereichs (Viewport) und bei paginierten Medien die Höhe einer Seite.

• 
• 
• 
• 
• 
• 

• abgefragter Wert: Eine positive Längenangabe.
• betrifft: sichtbare und fühlbare Medien.
• Merkmalstyp: Wertebereich.

Die Anwendung erfolgt analog zum Merkmal width.

aspect-ratio

Das Merkmal aspect-ratio (Seitenverhältnis) beschreibt das Verhältnis des Medienmerkmals width zum Merkmal height.

• 
• 
• 
• 
• 
• 

• abgefragter Wert: Ein ratio-Wert (Verhältnis zweier Zahlen) oder eine positive Fließkommazahl.
• betrifft: Bitmap-Medientypen.
• Merkmalstyp: Wertebereich.

Beispiel

@media (aspect-ratio: 4/3) { /* Fall 1 */ }
@media (min-aspect-ratio: 4/3) { /* Fall 2 */ }
@media (aspect-ratio <= 1.33) { /* Fall 3 */ }

In diesem Beispiel wird der Verhältniswert 4/3 den Varianten des aspect-ratio-Merkmals zugewiesen. Das Stylesheet wird verarbeitet, wenn das Seitenverhältnis des Anzeigebereichs (Viewport) genau 4 zu 3 entspricht (Fall 1). Das ist z.B. bei einem Anzeigebereich von 492 zu 369 Pixel der Fall. Das Stylesheet in Fall 2 wird angewendet, wenn das Seitenverhältnis 4/3 oder höher (z.B. 5/3 oder 6/3) beträgt. Der Fall 3 zeigt die Variante mit einer Fließkommazahl statt eines Buchs, entsprechend wird das Stylesheet nur verarbeitet, wenn das Seitenverhältnis 1,33 oder geringer ist (z.B. 2/3 oder 1/3).

Siehe auch

die gleichnamige CSS-Eigenschaft: aspect-ratio

orientation

Das Merkmal orientation (Orientierung) beschreibt das Seitenformat eines Ausgabemediums. Die Orientierung entspricht dem Wert portrait (Hochformat), wenn der Wert des Merkmals height größer ist als der Wert des Merkmals width. Andernfalls entspricht die Orientierung dem Wert landscape (Querformat).

• 
• 
• 
• 
• 
• 

• abgefragter Wert: Eines der Schlüsselwörter portrait oder landscape
• betrifft: Bitmap-Medientypen.
• Merkmalstyp: Aufzählung

Beispiel

@media (orientation: portrait) { /* Formate für hochformatige Ausgabemedien */ }

Beachten Sie:

• (orientation:landscape) bedeutet nicht zwingend, dass der Bildschirm Querformat hat. Auf Touch-Geräten kann das Einblenden der Bildschirmtastatur dazu führen, dass der Viewport vom Hoch- ins Querformat wechselt.
• Internet Explorer und Safari erkennen die Kurzschreibweise (orientation) ohne Angabe eines Werts nicht. Sie sollten dieses Merkmal daher nur in Verbindung mit einem der vorgegebenen Schlüsselwörter verwenden. Die Angabe ohne Schlüsselwort kann aber nur dann zum Ergebnis „falsch“ führen, wenn das Ausgabemedium nicht über Merkmale wie Breite und Höhe verfügt (z. B. eine Sprachausgabe).

color

Das Merkmal color (Farbe) beschreibt die Anzahl der Bits, die ein Gerät pro Farbkomponente (z. B. Rot, Grün oder Blau) verwendet. Kann das Ausgabegerät keine Farben anzeigen, ist der Wert 0 (Null) zutreffend. Wird für verschiedene Farbkomponenten eine unterschiedliche Anzahl an Bits verwendet, so zählt die niedrigste verwendete Bit-Anzahl des Geräts.

• 
• 
• 
• 
• 
• 

• abgefragter Wert: Eine nicht negative Zahl.
• betrifft: sichtbare Medientypen.
• Merkmalstyp: Wertebereich

Beispiel

@media (color: 2) { /* Einfaches Farblayout */ }
@media (min-color: 3) { /* Komplexes Farblayout */ }
@media (color < 3) { /* Einfaches Farblayout */ }

color-index

Das Merkmal color-index (Farbindex) beschreibt die Anzahl der Farbdefinitionen in der Farbtabelle des Ausgabemediums. Farbtabellen werden auf Geräten verwendet, die nicht im Stande sind, die Farbe jedes Bildpunktes einzeln zu steuern. Verwendet das Medium keine Farbtabelle, ist der Wert 0 (Null) zutreffend.

• 
• 
• 
• 
• 
• 

• abgefragter Wert: Eine positive Zahl.
• betrifft: sichtbare Medientypen.
• Merkmalstyp: Wertebereich.

Beispiel

@media (color-index) { /* Das Gerät verwendet eine Farbtabelle */ }
@media (min-color-index: 20) { /* Mindestens 20 Farben stehen zur Verfügung */ }
@media (color-index <= 256) { /* Höchstens 256 Farben stehen zur Verfügung */ }

Beachten Sie: Einzig der Opera Browser gibt an, eine Farbtabelle zu verwenden.

Beachten Sie: Safari und Chrome verstehen die Präfixe min- und max- dieses Merkmals nicht.

display-mode

Das Merkmal display-mode testet den Anzeigemodus einer Anwendung. Sie können es verwenden, um eine konsistente Benutzererfahrung zwischen dem Starten einer Site über eine URL und dem Starten über ein Desktop-Symbol zu gewährleisten.

• 
• 
• 
• 
• 
• 

• abgefragter Wert: Ein Schlüsselwort:
  • fullscreen Der gesamte verfügbare Anzeigebereich (vergleiche Fullscreen API) wird genutzt und es wird kein User Agent angezeigt.
  • standalone Die Anwendung sieht aus und fühlt sich an wie eine eigenständige Anwendung. Dies kann bedeuten, dass die Anwendung ein anderes Fenster hat, ein eigenes Symbol im Startmenü der Anwendung, usw. In diesem Modus schließt der User Agent Oberflächenelemente zur Steuerung der Navigation aus, kann aber andere Oberflächenelemente wie z. B. eine Statusleiste enthalten.
  • minimal-ui Die Anwendung sieht aus wie eine eigenständige Anwendung und fühlt sich auch so an, verfügt aber über einen minimalen Satz von UI-Elementen zur Steuerung der Navigation. Die Elemente variieren je nach Browser.
  • browser Die Anwendung wird in einer herkömmlichen Browser-Registerkarte oder einem neuen Fenster geöffnet, je nach Browser und Plattform.
• betrifft: sichtbare Medientypen.

Beispiel

@media all and (display-mode: fullscreen) {
  body {
    margin: 0;
    border: thick solid black;
  }
}

Diese Funktion entspricht dem Anzeigeelement des Web-App-Manifests. Beide gelten für den Top-Level-Browsing-Kontext und alle untergeordneten Browsing-Kontexte. Die Funktionsabfrage gilt unabhängig davon, ob ein Web-App-Manifest vorhanden ist.

monochrome

Das Merkmal monochrome (schwarz-weiß) beschreibt die Anzahl der Bits, die zur Beschreibung eines schwarz-weiß-Farbtons verwendet werden. Handelt es sich nicht um ein Gerät, das nur Graustufen darstellen kann (sondern auch Farben), ist der Wert 0 (Null) zutreffend.

• 
• 
• 
• 
• 
• 

• abgefragter Wert: eine positive Zahl.
• betrifft: sichtbare Medientypen.
• Merkmalstyp: Wertebereich.

Beispiel

@media (monochrome: 1) { /* nur schwarz und weiß stehen zur Verfügung */ }
@media (min-monochrome: 4) { /* Mindestens 16 Graustufen stehen zur Verfügung */ }
@media (max-monochrome: 8) { /* Höchstens 256 Graustufen stehen zur Verfügung */ }

color-gamut

Das Merkmal color-gamut (Farbbereich) beschreibt den Farbraum, den das Ausgabegerät darstellen kann. CSS kennt die Farbräume sRGB, DCI P3 und ITU Recommendation BT.2020. Diese Räume bilden eine aufsteigende Folge, d.h. p3 Geräte leisten auch srgb und rec2020 Geräte leisten auch p3. Geräte, deren Fähigkeiten für srgb nicht ausreichen, können Sie mit not (color-gamut) abfragen.

• 
• 
• 
• 
• 

• abgefragter Wert: einer der Farbraumnamen srgb, p3 oder rec2020.
• betrifft: sichtbare Medientypen.
• Merkmalstyp: Aufzählung.

Beispiel

@media (monochrome: 1) { /* nur schwarz und weiß stehen zur Verfügung */ }
@media (min-monochrome: 4) { /* Mindestens 16 Graustufen stehen zur Verfügung */ }
@media (max-monochrome: 8) { /* Höchstens 256 Graustufen stehen zur Verfügung */ }

pointer

Das Merkmal pointer (Zeiger) misst die Genauigkeit der verwendeten Zeigegeräts. So kann die sonst oft schwierige Unterscheidung zwischen Touch-Geräten einerseits (Smartphones und Tablets, aber auch Konsolen wie der Wii) und Geräten mit Maus, Touchpad oder Eingabestiften getroffen werden.

• 
• 
• 
• 
• 
• 

Details: caniuse.com

Folgende Einstellungen sind möglich:

• fine: für Geräte mit Maus, Touchpad oder Eingabestift
• coarse: für Geräte mit Touch- oder Gestensteuerung
• none: kein Zeigegerät verfügbar (statt dessen beispielsweise Tastatur oder Sprachsteuerung)

Beispiel

@media (pointer: coarse) {
  input {
    padding 1em;
    font-size: 2em;
  }
}

Bei Touchgeräten werden die Schriftgröße und der Innenabstand des Eingabefelds entsprechend vergrößert.

Da die meisten Geräte mehrere Eingabemöglichkeiten haben, deren Gebrauch aber nicht vorhergesagt werden kann, kann man mit any-pointer herausfinden, ob es die Eingabegeräte überhaupt gibt.

Beachten Sie: Sie können mit pointer und any-pointer nicht 100% auf bestimmte Geräte schließen. Allerdings können Sie in Kombination mit der Displaybreite sehr gut erkennen, ob jemand per Smartphone, Tablet oder Desktoprechner unterwegs ist. Dadurch können Sie Webseiten künftig noch genauer für bestimmte Geräte optimieren.

resolution

Das Merkmal resolution (Auflösung) beschreibt die Auflösung, also die Dichtigkeit der Bildpunkte auf einem Ausgabemedium. Besitzt das verwendete Ausgabemedium keine rechteckigen Bildpunkte (beispielsweise Drucker), so kann das Merkmal nur in Verbindung mit einem Präfix verwendet werden.

• 
• 
• 
• 
• 
• 

Details: caniuse.com

In diesem Fall prüfen Abfragen mit min-resolution die geringstmögliche, Abfragen mit max-resolution die höchstmögliche Dichtigkeit der Bildpunkte des Ausgabemediums ab.

• abgefragter Wert: Eine Auflösung.
• betrifft: Bitmap-Medientypen.
• Die Präfixe min- und max- sind erlaubt.

Beispiel

@media (resolution: 96dpi) { /* Die Auflösung beträgt 96 Bildpunkte pro Zoll */ }
@media (min-resolution: 200dpcm) { /* Die Auflösung beträgt mindestens 200 Punkte pro Zentimeter */ }
@media (max-resolution: 300dpi) { /* Die Auflösung beträgt höchstens 300 Punkte pro Zoll */ }

scan

Das Merkmal scan (Abtasten) beschreibt den Bildaufbau von Ausgabegeräten des Typs tv. Dieser kann progressiv erfolgen, das entspricht etwa dem Bildaufbau auf einem Computerbildschirm, dann trifft der Wert progressive zu, oder mit Hilfe von Zeilenbildung (d. h. einzelne Bildzeilen werden nach und nach dargestellt), dann trifft der Wert interlace zu.

• 
• 
• 
• 
• 
• 

• abgefragter Wert: Eines der Schlüsselwörter progressive oder interlace
• betrifft: Medientyp tv

Beispiel

@media (scan: progressive) { /* Bildschirmlayout */ }

Beachten Sie: Der Internet Explorer erkennt bisher (Stand Juli 2011) die Kurzschreibweise (scan) nicht. Es ist stattdessen erforderlich, die ausführliche Schreibweise zu notieren.

grid

Das Merkmal grid (Raster) beschreibt die Rastereigenschaft von Ausgabemedien. Bei Ausgabegeräten, die Inhalte in einem Raster darstellen, trifft der Wert Eins (1) zu, andernfalls der Wert Null (0).

• 
• 
• 
• 
• 
• 

• abgefragter Wert: Eine Zahl (Null oder Eins).
• betrifft: sichtbare und fühlbare Medientypen

Beispiel

@media (grid: 0) { /* Zahlreiche Schriftformatierungen */ }

Missbilligte Medienmerkmale

device-width

Missbilligt - verwenden Sie width

Das Merkmal device-width (Geräte-Breite) beschreibt die Breite des Ausgabegerätes, z. B. Breite eines Bildschirms in Pixel.

• 
• 
• 
• 
• 
• 

• abgefragter Wert: Eine positive Längenangabe.
• betrifft: sichtbare und fühlbare Medien.
• Merkmalstyp: Wertebereich.

Beispiel

@media (device-width: 800px) { /* Breite entspricht genau 800 Pixel */ }
@media (min-device-width: 800px) { /* Breite beträgt mindestens 800px */ }
@media (max-device-width: 1024px) { /* Breite beträgt höchstens 1024px */ }

Beachten Sie: Auch wenn ein Ausgabegerät bestimmte Abmessungen besitzt, sagt das nichts darüber aus, ob der verfügbare Bereich auch verwendet wird.

Empfehlung: Verwenden Sie lieber das Medienmerkmal min-width, bzw. max-width in Verbindung mit relativen Größen. Mehr Informationen erhalten Sie unter CSS/Tutorials/Einstieg/Media Queries.

device-height

Missbilligt - verwenden Sie height

Das Merkmal device-height (Geräte-Höhe) beschreibt die Höhe des Ausgabebereichs, z. B. Höhe eines Bildschirms in Pixel.

• 
• 
• 
• 
• 
• 

• abgefragter Wert: Eine positive Längenangabe.
• betrifft: sichtbare und fühlbare Medien.
• Merkmalstyp: Wertebereich.

Die Anwendung erfolgt analog zum Merkmal device-width.

device-aspect-ratio

Missbilligt - verwenden Sie aspect-ratio

Das Merkmal device-aspect-ratio (Geräte-Seitenverhältnis) beschreibt das Verhältnis des Merkmals device-width zum Merkmal device-height.

• 
• 
• 
• 
• 
• 

• abgefragter Wert: Ein ratio-Wert (Verhältnis zweier Zahlen) oder eine positive Fließkommazahl.
• betrifft: Bitmap-Medientypen.
• Merkmalstyp: Wertebereich.

Die Anwendung erfolgt analog zum Merkmal aspect-ratio.

device-pixel-ratio

Missbilligt - diese Eigenschaft gab es nur mit Herstellerpräfixen, standardisiert wurde resolution mit der Einheit dppx

Das Merkmal device-pixel-ratio (Geräte-Pixel-Verhältnis) beschreibt die Anzahl der tatsächlichen Pixel des Ausgabegeräts pro CSS-Pixel.. Der Name dieses Merkmals steht in Bezug zu der devicePixelRatio-Eigenschaft des window-Objekts, wurde aber nicht beibehalten.

• 
• 
• 
• 
• 

Details: caniuse.com

light-level

Das Merkmal light-level (Lichtstärke) war bis Juli 2020 in der Level 5 Spezifikation der Media Queries enthalten und wurde dann mit dem Hinweis gestrichen, dass es redundant zu prefers-contrast und prefers-color-scheme sei.

← Medientypen

Media Queries
(Übersicht)

Benutzereinstellungen →