Emular recursos de mídia CSS

Sofia Emelianova
Sofia Emelianova
GitHub

Emule vários recursos de mídia CSS com esta referência de opções de emulação na guia Rendering.

Emular o recurso de mídia CSS prefers-color-scheme

O recurso de mídia CSS prefers-color-scheme indica se o usuário prefere um esquema de cores claras ou escuras.

Para emular essa condição:

  1. Na página prefers-color-scheme, abra a guia Rendering.

  2. Em Emulate recurso de mídia CSS prefers-color-scheme, selecione uma das seguintes opções da lista suspensa:

    • Sem emulação
    • prefers-color-scheme:light
    • prefers-color-scheme:dark

  3. Atualize a página. Exemplo:

Emulado prefers-color-scheme:dark

Emular tipo de mídia CSS (ativar visualização de impressão)

A consulta de mídia de impressão controla a aparência da página quando ela é impressa.

Para forçar a página no modo de visualização de impressão:

  1. Abra a guia Renderização e, em Emulate CSS media type, selecione print.

    Modo de visualização de impressão

  2. Aqui, é possível visualizar e alterar o CSS, como qualquer outra página da Web. Consulte Começar a visualizar e alterar o CSS.

Emular o recurso de mídia CSS forced-colors

O recurso de mídia forced-colors do CSS indica se o agente do usuário ativou um modo de cores forçado. Um exemplo de modo de cores forçado é o modo de alto contraste do Windows.

Para emular essa condição:

  1. Abra a guia Renderização.

  2. Em Emular recurso de mídia CSS forced-colors, selecione uma das seguintes opções na lista suspensa:

    • Sem emulação
    • forced-colors:active
    • forced-colors:none

Com forced-colors:active emulado:

forced-colors:active

Emular o recurso de mídia CSS prefers-contrast

O recurso de mídia CSS prefers-contrast indica se o usuário solicitou que o conteúdo da Web fosse apresentado com um valor de contraste mais alto, mais baixo ou específico.

Para emular essa condição:

  1. Abra a guia Renderização.

  2. Em Emulate recurso de mídia CSS prefers-contrast, selecione uma das seguintes opções da lista suspensa:

    • Sem emulação
    • prefers-contrast:more
    • prefers-contrast:less
    • prefers-contrast:custom

Emular o recurso de mídia CSS prefers-reduced-motion

O recurso de mídia de CSS prefers-reduced-motion indica se o usuário solicitou a minimização da quantidade de movimento em uma página.

Para emular essa condição:

  1. Abra a guia Rendering nesta demonstração e role a tela para conferir as várias animações.
  2. Em Emulate recurso de mídia CSS prefers-reduced-motion, selecione prefers-reduced-motion:reduce.
  3. Tente rolar de novo.

Emular o recurso de mídia CSS prefers-reduced-transparency

O recurso de mídia CSS prefers-reduced-transparency indica se o usuário pediu a redução dos efeitos de camada transparente ou translúcida usados no dispositivo.

O recurso prefers-reduced-transparency está disponível no Chrome 118 e permite adaptar o conteúdo da Web à preferência selecionada pelo usuário para reduzir a transparência no SO, como a configuração Reduzir transparência no macOS.

Para emular essa condição:

  1. Abra a guia Renderização.
  2. Em Emular recurso de mídia CSS prefers-reduced-transparency, selecione prefers-reduced-transparency: reduce.
  3. Verifique se a página aparece corretamente.

Emular o recurso de mídia CSS color-gamut

O recurso de mídia CSS color-gamut indica o intervalo de cores do user agent e do suporte do dispositivo de saída.

Para emular essa condição:

  1. Abra a guia Renderização.

  2. Em Emular recurso de mídia CSS color-gamut, selecione uma das seguintes opções na lista suspensa:

    • Sem emulação
    • color-gamut:srgb: aproximadamente gama sRGB ou mais
    • color-gamut:p3: aproximadamente a gama especificada no espaço de cores Display P3 ou mais.
    • color-gamut:rec2020: aproximadamente a gama especificada em Rec. 2020 ou mais