CSS-Medienfunktionen emulieren

Sofia Emelianova

Emulation verschiedener CSS-Medienfunktionen anhand der Emulationsoptionen auf dem Tab Rendering

CSS-Medienfunktion prefers-color-scheme emulieren

Die CSS-Medienfunktion „prefers-color-scheme“ 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 der Drop-down-Liste 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 Druckmedienabfrage wird festgelegt, wie Ihre Seite beim Drucken aussieht.

So erzwingen Sie die Druckvorschau für die Seite:

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

   

2. Hier können Sie Ihr Preisvergleichsportal wie jede andere Webseite ansehen und ändern. Weitere Informationen finden Sie unter Erste Schritte beim Anzeigen und Ändern von CSS.

CSS-Medienfunktion forced-colors emulieren

Die CSS-Medienfunktion forced-colors gibt an, ob der User-Agent einen erzwungenen Farbmodus aktiviert hat. Ein Beispiel für einen erzwungenen Farbmodus ist Windows mit hohem 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 der Drop-down-Liste aus:

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

Wenn forced-colors:active emuliert wird:

CSS-Medienfunktion prefers-contrast emulieren

Die CSS-Medienfunktion „prefers-contrast“ gibt an, ob der Nutzer für Webinhalte einen höheren, niedrigeren oder spezifischen Kontrastwert angefordert hat.

So emulieren Sie diese Bedingung:

1. Öffnen Sie den Tab Rendering.

2. Wählen Sie unter CSS-Medienfunktion emulieren prefers-contrast eine der folgenden Optionen aus der Drop-down-Liste 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 angefordert hat, die Bewegungsmenge auf einer Seite zu minimieren.

So emulieren Sie diese Bedingung:

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

CSS-Medienfunktion prefers-reduced-transparency emulieren

Die CSS-Medienfunktion „prefers-reduced-transparency“ gibt an, ob der Nutzer angefordert hat, die Effekte der transparenten oder durchscheinenden Ebene auf dem Gerät zu reduzieren.

Die Funktion „prefers-reduced-transparency“ ist ab Chrome 118 verfügbar. Damit kannst du Webinhalte an die vom Nutzer gewählten Einstellungen anpassen, um die Transparenz im Betriebssystem zu reduzieren. Ein Beispiel hierfür ist die 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 korrekt angezeigt wird.

CSS-Medienfunktion color-gamut emulieren

Die CSS-Medienfunktion „color-gamut“ gibt an, welche Farbbereiche 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 emulieren color-gamut eine der folgenden Optionen aus der Drop-down-Liste aus:

   • Keine Emulation
   • color-gamut:srgb: mindestens sRGB-Gamut
   • color-gamut:p3: entspricht ungefähr dem unter Farbraum für Display P3 oder mehr angegebenen Umfang
   • color-gamut:rec2020: entspricht ungefähr dem in Rec. 2020 angegebenen Umfang