CSS-Medienfunktionen emulieren

Sofia Emelianova

Auf dem Tab Rendering finden Sie eine Referenz zu den Emulationsoptionen, mit denen Sie verschiedene CSS-Medienfunktionen emulieren können.

CSS-Medienfunktion prefers-color-scheme emulieren

Die prefers-color-scheme CSS-Medienfunktion gibt an, ob der Nutzer ein helles oder dunkles Farbschema bevorzugt.

So emulieren Sie diese Bedingung:

1. Öffnen Sie auf der Seite prefers-color-scheme den Tab Rendering.

2. Wählen Sie unter CSS-Medienfunktion emulieren prefers-color-scheme eine der folgenden Optionen aus dem Drop-down-Menü aus:

   • Keine Emulation
   • prefers-color-scheme:light
   • prefers-color-scheme:dark

3. refresh Aktualisieren Sie die Seite. Beispiel:

CSS-Medientyp emulieren (Druckvorschau aktivieren)

Mit der Anfrage zu Druckmedien wird gesteuert, wie die Seite gedruckt aussieht.

So erzwingen Sie die Druckvorschau für eine Seite:

1. Öffnen Sie den Tab Rendering und wählen Sie unter CSS-Medientyp emulieren die Option Drucken aus.

   

2. Von hier aus können Sie Ihr CSS wie jede andere Webseite anzeigen und ändern. Weitere Informationen finden Sie unter Erste Schritte mit dem Ansehen und Ändern von CSS.

CSS-Medienfunktion forced-colors emulieren

Die CSS-Medienfunktion forced-colors gibt an, ob der User-Agent einen Modus mit erzwungenen Farben aktiviert hat. Ein Beispiel für einen erzwungenen Farbmodus ist Windows-Hoher Kontrast.

So emulieren Sie diese Bedingung:

1. Öffnen Sie den Tab Rendering.

2. Wählen Sie unter CSS-Medienfunktion emulieren forced-colors eine der folgenden Optionen aus dem Drop-down-Menü aus:

   • Keine Emulation
   • forced-colors:active
   • forced-colors:none

Bei emuliertem forced-colors:active:

CSS-Medienfunktion prefers-contrast emulieren

Die prefers-contrast-CSS-Medienfunktion gibt an, ob der Nutzer die Webinhalte mit einem höheren, niedrigeren oder bestimmten Kontrastwert angefordert hat.

So emulieren Sie diese Bedingung:

1. Öffnen Sie den Tab Rendering.

2. Wählen Sie unter CSS-Medienfunktion prefers-contrast emulieren aus der Drop-down-Liste eine der folgenden Optionen aus:

   • Keine Emulation
   • prefers-contrast:more
   • prefers-contrast:less
   • prefers-contrast:custom

CSS-Medienfunktion prefers-reduced-motion emulieren

Die CSS-Medienfunktion prefers-reduced-motion gibt an, ob der Nutzer die Minimierung der Bewegungselemente auf einer Seite angefordert hat.

So emulieren Sie diese Bedingung:

1. Öffnen Sie in dieser Demo den Tab Rendering und scrollen Sie, um verschiedene Animationen zu sehen.
2. Wählen Sie unter CSS-Medienfunktion prefers-reduced-motion emulieren die Option prefers-reduced-motion:reduce aus.
3. Versuchen Sie noch einmal zu scrollen.

CSS-Medienfunktion prefers-reduced-transparency emulieren

Mit der CSS-Medienfunktion prefers-reduced-transparency wird angegeben, ob der Nutzer angefordert hat, die auf dem Gerät verwendeten transparenten oder durchscheinenden Layer-Effekte zu reduzieren.

Die Funktion „prefers-reduced-transparency“ ist ab Chrome 118 verfügbar und ermöglicht es Ihnen, Webinhalte an die vom Nutzer ausgewählten Einstellungen anzupassen, um die Transparenz im Betriebssystem zu reduzieren, z. B. mit der Einstellung Transparenz reduzieren unter macOS.

So emulieren Sie diese Bedingung:

1. Öffnen Sie den Tab Rendering.
2. Wählen Sie unter CSS-Medienfunktion emulieren prefers-reduced-transparency die Option prefers-reduced-transparency: reduce aus.
3. Prüfen Sie, ob Ihre Seite richtig angezeigt wird.

CSS-Medienfunktion color-gamut emulieren

Die CSS-Medienfunktion color-gamut gibt an, welchen Farbbereich der User-Agent und das Ausgabegerät unterstützen.

So emulieren Sie diese Bedingung:

1. Öffnen Sie den Tab Rendering.

2. Wählen Sie unter CSS-Medienfunktion color-gamut emulieren aus der Drop-down-Liste eine der folgenden Optionen aus:

   • Keine Emulation
   • color-gamut:srgb: ungefähr sRGB-Gamut oder mehr
   • color-gamut:p3 – ungefähr der im Display-P3-Farbraum angegebene Farbumfang oder mehr
   • color-gamut:rec2020 – ungefähr der in Rec. 2020 angegebene Farbraum oder mehr