CSS/Media Queries/Benutzereinstellungen

Aus SELFHTML-Wiki
< CSS‎ | Media Queries(Weitergeleitet von Prefers-reduced-motion)
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
20min
Schwierigkeitsgrad
leicht
Vorausgesetztes Wissen
Einstieg in CSS
Media Queries


Bis jetzt ging es in den Media Queries vorwiegend um die Geräteeigenschaften, die über Merkmalsabfragen abgerufen wurden, um dem Browser die Entscheidung für die passenden CSS-Formatierung zu ermöglichen. In Media Queries Level 5 wird dies um Medienmerkmale erweitert, die die bereits im Betriebssystem getroffenen Benutzereinstellungen auslesen.[1]

NeueResponsivitaet.png

So wie Nutzer eine Standardschriftgröße auswählen können, dass alle Seiten in der für den Nutzer optimalen Größe angezeigt werden, können hier unter dem Stichwort erleichterte Bedienung Festlegungen zu Dark-Mode, Kontrast oder dem Verzicht auf plötzliche und irritierende Bewegung getroffen werden.

Gute Webseiten akzeptieren diesen Nutzerwunsch und berücksichtigen ihn bei der Webseitengestaltung.

Benutzereinstellung[Bearbeiten]

prefers-color-scheme[Bearbeiten]

Das Merkmal prefers-color-scheme (bevorzugtes Farbschema) wird verwendet, um zu erkennen, ob der Benutzer ein helles oder dunkles Farbthema angefordert hat. [2] [3] [4]

  • Chrome
  • Edge
  • Firefox
  • Leer
  • Opera
  • Safari

Details: caniuse.com

Der Benutzer kann diese Präferenz über eine Betriebssystemeinstellung (z. B. heller oder dunkler Modus (Dark Mode)) oder eine User-Agent-Einstellung angeben.


Beispiel
@media (prefers-color-scheme: dark) {
  /* dunkles Farbschema für die Nacht */
  body {
    color: white;
    background: black;
  }

  a {
    color: skyblue;
  }
}

@media (prefers-color-scheme: light) {
  /* helles Farbschema für den Tag */
}

Siehe auch:

prefers-contrast[Bearbeiten]

Das Medienmerkmal prefers-contrast wird verwendet, um zu erkennen, ob der Benutzer angefordert hat, dass der Webinhalt mit einem höheren (oder niedrigeren) Kontrast dargestellt wird.

  • Leer
  • Leer
  • Leer
  • Leer
  • Leer

Details: caniuse.com

Die abfragbaren Wert sind

  • no-preference - keine Voreinstellung
  • less - der Benutzer wünscht geringeren Kontrast
  • more - der Benutzer wünscht stärkeren Kontrast
  • custom - der Benutzer hat ein bestimmtes Farbschema ausgewählt, das sich aber nicht als geringerer oder stärkerer Kontrast ausdrücken lässt.

forced-colors[Bearbeiten]

Das Medienmerkmal forced-colors ermittelt, ob der Browser feste Farben erzwingt.

  • Chrome
  • Edge
  • Firefox
  • Leer
  • Leer

Details: caniuse.com

Die abfragbaren Wert sind none und active.

prefers-reduced-motion[Bearbeiten]

Das Merkmal prefers-reduced-motion (bevorzugt weniger Bewegung) erkennt, ob der Nutzer eine Seite mit allen Animationen und Bewegungen sehen oder eine ruhigere Darstellung wünscht.[5]

  • Chrome
  • Edge
  • Firefox
  • Leer
  • Opera
  • Safari

Details: caniuse.com

Der Benutzer kann diese Präferenz über eine Einstellung im Betriebssystem oder im User-Agent angeben.

  • unter Windows 10: Einstellungen → Erleichterte Bedienung → Anzeige → Animationen in Windows anzeigen
  • in Android: Einstellungen → Bedienungshilfen → Animationen entfernen
  • Apple iPad: „Einstellungen“ → „Bedienungshilfen“ → „Bewegung“
  • Apple: Systemeinstellungen → Bedienungshilfen → Anzeige → Bewegung reduzieren
  • In Firefox about:config: Füge eine Binär-Präferenz ("Number") namens ui.prefersReducedMotion hinzu und setze deren Wert auf 1. Änderung an dieser Präferenz werden sofort übernommen.

Als abgefragten Wert können Sie eines der Schlüsselwörter reduce oder no-preference verwenden.

Beispiel
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01s !important;
    transition-duration: .01s !important;
  }
}

Dieses Beispiel von der Webseite heise.de setzt das scroll-behavior auf auto, damit ein Scrollen unterbunden wird. Animationen und Transitionen erhalten eine Dauer von 0.01s - sie werden dadurch nicht mehr sichtbar, sind aber noch vorhanden für den Fall dass ein JavaScript auf dieses Event wartet, um nach der Animation irgendeine Aktion abzuschließen oder auszulösen.[6]

Siehe auch:

prefers-reduced-transparency[Bearbeiten]

Dieses Medienmerkmal wird zur Zeit noch von keinem Browser implementiert. Es soll die Abfrage ermöglichen, ob Benutzer weniger Transparenzeffekte (reduce) wünschen oder nicht (no-preference).

inverted-colors[Bearbeiten]

Das Medienmerkmal inverted-colors kann verwendet werden, um zu testen, ob der User Agent oder das zugrunde liegende Betriebssystem Farben invertiert.

  • Leer
  • Leer
  • Leer
  • Leer
  • Safari

Details: caniuse.com

Sie können die Werte none (normale Farben) und inverted (invertierte Farben) abfragen.

prefers-reduced-data[Bearbeiten]

Dieses Medienmerkmal wird zur Zeit noch von keinem Browser implementiert. Es ist auch nicht sicher, ob es auf diese Weise umgesetzt wird. Die Idee ist, dass Benutzer angeben können, dass sie eine „datensparende“ Version der Seite sehen möchten. Als Folge könnte eine Webseite große Hintergrundbilder weglassen oder eine stärker komprimierte Version zeigen.

Es besteht allerdings der Einwand, dass Webseiten auf diese Weise auf das Einkommen des Benutzers rückschließen könnten und Datenschutzaspekte betrachtet werden müssen.



Weblinks[Bearbeiten]

  1. W3C: User Preference Media Features (Media Queries Level 5) W3C Working Draft, 31 July 2020
  2. csswg: Detecting the desire for light or dark color schemes: the prefers-color-scheme feature
  3. MDN: prefers-color-scheme
  4. css-tricks: A Complete Guide to Dark Mode on the Web
  5. css-tricks: An Introduction to the Reduced Motion Media Query
  6. heise.de: a11y: Reduced Motion - "Ich roll' dann mal aus" 02.04.2019 Hilko Holweg