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 Renderização.

  2. Em Emulate CSS Media feature prefers-color-scheme (Emular recurso de mídia CSS), selecione uma das seguintes opções na lista suspensa:

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

  3. Atualize a página. Exemplo:

Emulado prefers-color-scheme:escuro

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 a entrar no modo de visualização de impressão:

  1. Abra a guia Rendering e, em Emulate CSS media type (Emular tipo de mídia CSS), 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 Introdução à visualização e alteração de CSS.

Emular o recurso de mídia CSS forced-colors

O recurso de mídia CSS forced-colors indica se o user agent ativou um modo de cores forçadas. Um exemplo de um modo de cores forçadas é o alto contraste do Windows.

Para emular essa condição:

  1. Abra a guia Renderização.

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

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

Com forced-colors:active emulado:

cores-forçadas:ativo

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 maior, menor ou específico.

Para emular essa condição:

  1. Abra a guia Renderização.

  2. Em Emulate CSS Media feature prefers-contrast (Emular recurso de mídia CSS), selecione uma das seguintes opções na 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 CSS prefers-reduced-motion indica se o usuário pediu para minimizar a quantidade de movimento em uma página.

Para emular essa condição:

  1. Abra a guia Rendering nesta demonstração e tente rolar para ver várias animações.
  2. Em Emulate CSS Media feature prefers-reduced-motion (Emular recurso de mídia CSS), selecione prefers-reduced-motion:reduce.
  3. Tente rolar a tela novamente.

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

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

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

Para emular essa condição:

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

Emular o recurso de mídia CSS color-gamut

O recurso de mídia CSS color-gamut indica para quais intervalos de cores o user agent e o dispositivo de saída são compatíveis.

Para emular essa condição:

  1. Abra a guia Renderização.

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

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