Media Query

Media Queries sind eine CSS-Regel, mit der sich Stildefinitionen an Eigenschaften des Ausgabegeräts, des Browserfensters oder an Systemeinstellungen der Nutzenden knüpfen lassen. Sie sind das Kernstück des responsiven Designs und für barrierefreie Websites essenziell.

Der Punkt, an dem eine Media Query greift und sich das Layout ändert, heißt Breakpoint.

Beispiel:

@media screen and (max-width: 768px) { /* Anpassungen für mobile Geräte */ }

Medientyp und Media Feature

Die Abfrage besteht aus zwei unterschiedlichen Teilen. Der Medientyp steht ohne Klammern und benennt die Ausgabeart: screen für Bildschirme, print für die Druckausgabe. Das Media Feature steht in Klammern und fragt eine konkrete Eigenschaft ab, etwa max-width oder orientation.

Klassische Media Features:

• width und height für die Abmessungen des Anzeigebereichs

• resolution für die Pixeldichte des Displays

• orientation für die Geräteausrichtung, Hoch- oder Querformat

• pointer und any-pointer für die Genauigkeit des Zeigegeräts — damit lassen sich Bedienelemente bei Touch-Bedienung vergrößern

Systemeinstellungen der Nutzenden abfragen:

• prefers-reduced-motion für reduzierte Animation

• prefers-color-scheme für Hell- und Dunkelmodus

• prefers-contrast für erhöhte Kontrasteinstellungen

• prefers-reduced-transparency für reduzierte Transparenz

• forced-colors für den Windows-Kontrastmodus, in dem das System die Farben ersetzt

Diese Gruppe ist der eigentliche Barrierefreiheitsgewinn: Nutzende teilen ihre Bedürfnisse über die Systemeinstellungen bereits mit. Die Website muss sie nur auswerten.