Medienabfrageunterstützung in CSS und JavaScript erkennen

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Man kann nicht einfach nur @media (prefers-reduced-data: no-preference) verwenden, denn wie Kilian Valkhof sagt

[…] dies wäre falsch, wenn entweder keine Unterstützung vorhanden wäre (da der Browser die Medienabfrage nicht verstehen würde) oder wenn sie unterstützt würde, der Benutzer aber Daten erhalten wollte.

Normalerweise ist @supports das Werkzeug dafür in CSS, aber das funktioniert nicht mit @media-Abfragen. Es stellt sich jedoch heraus, dass es eine Lösung gibt.

@media not all and (prefers-reduced-data), (prefers-reduced-data) {
  /* ... */
}

Dies ist ein etwas komplexes Logikrätsel, das die Syntax von Medienabfragen und die Art und Weise, wie Browser diese Dinge auswerten, beinhaltet. Es ist gut, dass man eine Situation mit fehlender Unterstützung letztendlich in einem Ausdruck behandeln kann.

Direkter Link →