CSS/Media Queries/Benutzereinstellungen

20min

leicht

• Einstieg in CSS
• Einstieg in 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.

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

prefers-color-scheme

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

Browserunterstützung
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 */
}

Diese Medienabfrage ist auch über das media-Attribut des style-Elements möglich:

Beispiel

<style>
      html {
        background-color: white;
        color-scheme:light dark;
        color: #333;
      }
</style>
<style media="(prefers-color-scheme:dark)">
      html {
        background-color: #333;
        color: white;
      }
</style>

Siehe auch:

• Farbe/Dark Mode

prefers-contrast

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.

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

Beispiel

@media (prefers-contrast: no-preference) {
  html {
    background-color: #eee;
  	color: #333;
  }
}

@media (prefers-contrast: more) {
  html {
    background-color: white;
  	color: #000;
  }
}

forced-colors

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

Browserunterstützung
caniuse.com

Die abfragbaren Wert sind none und active.

erzwungene Systemfarben mit forced-colors

.button {
  border: 0;
  padding: 10px;
  box-shadow: -2px -2px 5px gray, 2px 2px 5px gray;
}

@media (forced-colors: active) {
  .button {
    /* Use a border instead, since box-shadow is forced to 'none' in forced-colors mode */
    border: 2px ButtonText solid;
  }
}

Falls dies so eingestellt ist, werden für folgende Eigenschaften Systemfarben verwendet:

• color
• background-color
• text-decoration-color
• text-emphasis-color
• border-color
• outline-color
• column-rule-color
• -webkit-tap-highlight-color
• SVG fill
• SVG stroke

Folgende Eigenschaften erhalten fest eingestellte Werte:

• box-shadow: 'none'
• text-shadow: 'none'
• background-image: 'none', außer bei festen URL-Angaben
• color-scheme: 'light dark'
• scrollbar-color: 'auto'

prefers-reduced-motion

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.

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

Siehe auch:

• CSS/Tutorials/Animation/Animation Animationen - den Nutzer entscheiden lassen
• Bilder im Internet (Animation oder Standbild)
• Multimedia/Hintergrundvideo

prefers-reduced-transparency

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

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

Browserunterstützung
caniuse.com

Du kannst die Werte none (normale Farben) und inverted (invertierte Farben) abfragen.

prefers-reduced-data

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.

• Medienmerkmale
• Media Queries
  (Übersicht)
• Container Queries