Эмулировать медиа-функции CSS

Sofia Emelianova

Эмулируйте различные функции мультимедиа CSS с помощью этой ссылки на параметры эмуляции на вкладке «Визуализация» .

Эмуляция медиа-функции CSS prefers-color-scheme

Медиа-функция CSS prefers-color-scheme указывает, предпочитает ли пользователь светлую или темную цветовую схему.

Чтобы эмулировать это условие:

1. На странице предпочтений цветовой схемы откройте вкладку «Рендеринг» .

2. В разделе «Эмуляция мультимедиа CSS» prefers-color-scheme выберите в раскрывающемся списке один из следующих вариантов:

   • Нет эмуляции
   • prefers-color-scheme:light
   • prefers-color-scheme:dark

3. Обновить страницу. Например:

Эмулировать тип носителя CSS (включить предварительный просмотр печати)

Запрос на печать управляет тем, как ваша страница будет выглядеть при печати.

Чтобы перевести страницу в режим предварительного просмотра:

1. Откройте вкладку «Рендеринг» и в разделе «Эмулировать тип носителя CSS» выберите «Печать» .

   

2. Отсюда вы можете просматривать и изменять CSS, как и любую другую веб-страницу. См . раздел «Начало работы с просмотром и изменением CSS» .

Эмуляция CSS-медиа функции forced-colors

Медиа-функция CSS forced-colors указывает, включил ли пользовательский агент режим принудительного цвета. Примером принудительного режима цветов является Windows High Contrast.

Чтобы эмулировать это условие:

1. Откройте вкладку «Рендеринг» .

2. В разделе «Эмуляция медиа-функции CSS forced-colors выберите в раскрывающемся списке один из следующих вариантов:

   • Нет эмуляции
   • forced-colors:active
   • forced-colors:none

С forced-colors:active эмуляция:

Эмуляция медиа-функции CSS prefers-contrast

Медиа-функция CSS prefers-contrast указывает, запросил ли пользователь представить веб-контент с более высоким, низким или конкретным значением контрастности.

Чтобы эмулировать это условие:

1. Откройте вкладку «Рендеринг» .

2. В разделе «Эмуляция мультимедиа CSS» prefers-contrast выберите один из следующих вариантов из раскрывающегося списка:

   • Нет эмуляции
   • prefers-contrast:more
   • prefers-contrast:less
   • prefers-contrast:custom

Эмуляция медиа-функции CSS prefers-reduced-motion

Медиа-функция CSS prefers-reduced-motion указывает, запросил ли пользователь минимизировать количество движения на странице.

Чтобы эмулировать это условие:

1. Откройте вкладку «Рендеринг» в этой демонстрации и попробуйте прокрутить, чтобы увидеть различные анимации.
2. В разделе «Эмуляция мультимедиа CSS prefers-reduced-motion выберите prefers-reduced-motion:reduce .
3. Попробуйте прокрутить еще раз.

Эмуляция медиа-функции CSS prefers-reduced-transparency

Функция мультимедиа CSS prefers-reduced-transparency указывает, запросил ли пользователь уменьшить эффекты прозрачного или полупрозрачного слоя, используемые на устройстве.

Функция prefers-reduced-transparency доступна в Chrome 118 и позволяет адаптировать веб-контент в соответствии с выбранными пользователем предпочтениями для снижения прозрачности в ОС, например параметром «Уменьшить прозрачность» в macOS.

Чтобы эмулировать это условие:

1. Откройте вкладку «Рендеринг» .
2. В разделе «Эмуляция медиа-файлов CSS prefers-reduced-transparency выберите prefers-reduced-transparency: reduce .
3. Проверьте, правильно ли отображается ваша страница.

Эмулировать color-gamut функций CSS

Медиа-функция CSS color-gamut указывает, какой диапазон цветов поддерживают пользовательский агент и устройство вывода.

Чтобы эмулировать это условие:

1. Откройте вкладку «Рендеринг» .

2. В разделе «Эмулировать color-gamut функции CSS» выберите в раскрывающемся списке один из следующих вариантов:

   • Нет эмуляции
   • color-gamut:srgb — приблизительно sRGB- гамма или более
   • color-gamut:p3 — приблизительно гамма, указанная в цветовом пространстве дисплея P3 или более.
   • color-gamut:rec2020 — приблизительно цветовая гамма, указанная в Rec. 2020 или более