SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.

CSS/Media Queries/Medienmerkmale

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

Wichtig: font-size-Einstellungen im Autorenstylesheet haben auf @media-Abfragen keine Auswirkung. Wenn Sie auf der font-basierende Maßeinheiten wie em verwenden, zieht der Browser die Initialangaben für den Font heran, so wie sie vom Benutzer in den Browsereinstellungen gesetzt wurden.

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 */ }
Beachte: 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.
Auch eine Abfrage der physischen Bildschirmabmessungen (in mm oder cm) ist nicht möglich, da diese Daten nicht an den Browser weitergegeben werden. Ein Pixelwert würde ebenfalls in die Irre führen, da Pixel auf hochauflösenden Bildschirmen aus mehreren Gerätepixeln bestehen können.
Fazit: Vertraue der Angabe in em, dem relativen Maß der verwendeten Schriftgröße.

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 Bruchs, entsprechend wird das Stylesheet nur verarbeitet, wenn das Seitenverhältnis 1,33 oder geringer ist (z.B. 2/3 oder 1/3).

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 */ }


Beachte:
  • (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.
  • Safari erkennt 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 */ }
Beachte: Einzig der Opera Browser gibt an, eine Farbtabelle zu verwenden.
Beachte: Safari und Chrome verstehen die Präfixe min- und max- dieses Merkmals nicht.

display-mode

Das Merkmal display-mode testet den Anzeigemodus einer Anwendung. Du kannst 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, aber auch CIE-LAB und weitere wie P3. 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 mit not (color-gamut) abgefragt werden.

Browserunterstützung
caniuse.com
  • abgefragter Wert: einer der Farbraumnamen srgb, p3 oder rec2020.
  • betrifft: sichtbare Medientypen.
  • Merkmalstyp: Aufzählung.
P3-Farbraum und Fallback für ältere Browser 
.warnung {
  color: hsl(26.06 99% 51%);
}

@media (color-gamut: p3) {
  .warnung {
    color: oklch(70.9% 0.195 47.025);
  }
}

Hauptartikel: Farbe/Farbmodelle

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.[1]

Browserunterstützung
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.

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

resolution

Browserunterstützung
caniuse.com

Das Merkmal resolution (Auflösung) beschreibt die tatsächliche Auflösung, also die Dichtigkeit der Bildpunkte auf dem physischen Ausgabemedium. Ob dieser Wert im Browser bekannt und korrekt ist, hängt vom verwendeten Betriebssystem, den Gerätetreibern und der tatsächlichen Hardware ab. Mehr Informationen zu dieser Problematik findest du im Artikel zu CSS Maßangaben.

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

Sonderfälle:

  • wenn die Bildpunkte des Ausgabemediums nicht quadratisch sind (bspw. Nadeldrucker), wird die vertikale Auflösung abgefragt. Die Spezifikation weist noch darauf hin, dass der Browser auch so tun kann, als seien die Pixel quadratisch, wenn die Auflösung in x- und y-Richtung nur „wenig“ voneinander abweicht. Was „wenig“ ist, wird jedoch nicht spezifiziert.
  • ist das Ausgabegerät ein Vektorgerät (z. B. ein Plotter oder ein Vectrex, dem jemand CSS beigebracht hat), wird die Auflösung infinite verwendet. Jede Abfrage auf min-resolution ist für ein solches Gerät erfolgreich.


Beispiel 
@media (resolution: 96dpi) {
   /* Die Auflösung beträgt genau 96 Bildpunkte pro Zoll - wahr für alle Nicht-Retina Bildschirme */
}

@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 */
}

@media (min-resolution: 2dppx) {
   /* Ein CSS Pixel entspricht mindestens 2 Gerätepixeln (Drucker oder Retina-Display) */
}

scan

Das Merkmal scan (Abtasten) beschreibt den Bildaufbau von Ausgabegeräten des Typs tv. Klassische Fernsehgeräte setzen ein Bild aus zwei Halbbildern zusammen, von denen eins die geraden und das andere die ungeraden Bildzeilen enthält. Dadurch werden die 25 Bilder pro Sekunde, die ein Fernsehsender überträgt, in 50 Halbbilder aufgeteilt, was einen Monitor mit kürzerer Nachleuchtdauer der Bildpunkte und damit schnellere Schwenks ohne Schlierenbildung ermöglicht. Die beiden Halbbilder sind ineinander verschränkt (engl. interlace).

Computermonitore haben eine höhere Bildwiederholrate und können dadurch, ohne sonderlich zu flimmern, Vollbilder darstellen. Der Aufbau jedes Bildes erfolgt fortlaufend (engl. progressive) von oben nach unten.

Das Medienfeature heißt scan (abtasten) und nicht show, oder so ähnlich, weil der Begriff von den Fernsehkameras kommt. Diese tasten ihren Bildsensor progressiv oder interlaced ab und übertragen dementsprechend das Bild.

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

Nachteilig am interlaced-Modus ist, dass feine horizontale Muster zum Flimmern neigen, wenn sie nur eine Bildzeile einnehmen. Das kann zum Beispiel bei serifenbetonten Schriftarten vorkommen. Mit einer Feature-Abfrage auf scan:interlaced könnte ein serifenärmerer Font ausgewählt werden. Der Bedarf an diesem Feature scheint jedoch gering, es wurde zwar mit Media Queries Level 5 hinzugefügt, bisher (2023) aber von keinem Browser implementiert und bei Mozilla nicht einmal erwähnt.

Beispiel 
@media (scan: interlace) {
   :root {
      font-family: sans-serif;
    }
}

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 - verwende width

Das Merkmal device-width (Geräte-Breite) beschrieb 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 */ }
Beachte: Auch wenn ein Ausgabegerät bestimmte Abmessungen besitzt, sagt das nichts darüber aus, ob der verfügbare Bereich auch verwendet wird.
Empfehlung: Verwende lieber das Medienmerkmal min-width, bzw. max-width in Verbindung mit relativen Größen. Mehr Informationen erhalten Sie unter CSS/Tutorials/Boxmodell/Größenangaben.

device-height

Missbilligt - verwende height

Das Merkmal device-height (Geräte-Höhe) beschrieb 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 - verwende aspect-ratio

Das Merkmal device-aspect-ratio (Geräte-Seitenverhältnis) beschrieb 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.[2]. Der Name dieses Merkmals steht in Bezug zu der devicePixelRatio-Eigenschaft des window-Objekts, wurde aber nicht beibehalten[3].

Browserunterstützung
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.


Quellen

  1. ↑ W3C: pointer
  2. ↑ W3C: How to unprefix -webkit-device-pixel-ratio
  3. ↑ quirksmode.org: More about devicePixelRatio
Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Media_Queries/Medienmerkmale&oldid=102616“