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

София Емельянова
Sofia Emelianova
GitHub

Эмулируйте различные функции мультимедиа 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

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

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

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

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

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

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

принудительные цвета: активный

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

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

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

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

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

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

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

Медиа 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. В разделе «Эмуляция медиа prefers-reduced-transparency файлов CSS» выберите prefers-reduced-transparency: reduce .
  3. Проверьте, правильно ли отображается ваша страница.

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

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

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

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

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

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