Emulate CSS media features Stay organized with collections Save and categorize content based on your preferences.

[Sofia Emelianova]

Sofia Emelianova

GitHub

Emulate various CSS media features with this reference of emulation options on the Rendering tab.

Emulate CSS media feature prefers-color-scheme

The prefers-color-scheme CSS media feature indicates if the user prefers light or dark color scheme.

To emulate this condition:

1. On the prefers-color-scheme page, open the Rendering tab.

2. Under the Emulate CSS media feature prefers-color-scheme, select one of the following from the drop-down list:

   • No emulation
   • prefers-color-scheme:light
   • prefers-color-scheme:dark

3. refresh Reload the page. For example:

[Emulated prefers-color-scheme:dark]

Emulate CSS media type (Enable print preview)

The print media query controls how your page looks when printed.

To force your page into print preview mode:

1. Open the Rendering tab and under Emulate CSS media type select print.

   [Print preview mode]

2. From here, you can view and change your CSS, like any other web page. See Get Started With Viewing And Changing CSS.

Emulate CSS media feature forced-colors

The forced-colors CSS media feature indicates if the user agent enabled a forced colors mode. An example of a forced colors mode is Windows High Contrast.

To emulate this condition:

1. Open the Rendering tab.

2. Under the Emulate CSS media feature forced-colors, select one of the following from the drop-down list:

   • No emulation
   • forced-colors:active
   • forced-colors:none

With forced-colors:active emulated:

[forced-colors:active]

Emulate CSS media feature prefers-contrast

The prefers-contrast CSS media feature indicates if the user requested the web content to present with a higher, lower, or specific contrast value.

To emulate this condition:

1. Open the Rendering tab.

2. Under the Emulate CSS media feature prefers-contrast, select one of the following from the drop-down list:

   • No emulation
   • prefers-contrast:more
   • prefers-contrast:less
   • prefers-contrast:custom

Emulate CSS media feature prefers-reduced-motion

The prefers-reduced-motion CSS media feature indicates if the user has requested to minimize the amount of motion on a page.

To emulate this condition:

1. Open the Rendering tab on this demo and try scrolling to see various animations.
2. Under the Emulate CSS media feature prefers-reduced-motion, select prefers-reduced-motion:reduce.
3. Try scrolling again.

Emulate CSS media feature prefers-reduced-transparency

The prefers-reduced-transparency CSS media feature indicates if the user requested to reduce the transparent or translucent layer effects used on the device.

The prefers-reduced-transparency feature is available from Chrome 118 and lets you adapt web content to user-selected preference for reduced transparency in the OS, such as the Reduce transparency setting on macOS.

To emulate this condition:

1. Open the Rendering tab.
2. Under the Emulate CSS media feature prefers-reduced-transparency, select prefers-reduced-transparency: reduce.
3. Check if your page displays correctly.

Emulate CSS media feature color-gamut

The color-gamut CSS media feature indicates which range of colors the user agent and the output device support.

To emulate this condition:

1. Open the Rendering tab.

2. Under the Emulate CSS media feature color-gamut, select one of the following from the drop-down list:

   • No emulation
   • color-gamut:srgbapproximately sRGB gamut or more
   • color-gamut:p3approximately the gamut specified in Display P3 Color Space or more
   • color-gamut:rec2020approximately the gamut specified in Rec. 2020 or more