Migrar para a cor CSS HD

Este documento faz parte do guia de cores CSS de alta definição.

Adam Argyle

Há duas estratégias principais para atualizar a cor do seu projeto da Web para oferecer suporte telas de ampla gama:

1. Degradação suave: use os novos espaços de cor e deixe o navegador e sistema operacional a descobrir qual cor exibir com base nos recursos de exibição.

2. Aprimoramento progressivo: use @supports e @media para avaliar o do navegador do usuário e, se as condições forem atendidas, fornecerão gama de cores.

Se um navegador não entender a cor do display-p3:

color: red;
color: color(display-p3 1 0 0);

Se um navegador entender a cor display-p3:

color: red;
color: color(display-p3 1 0 0);

Cada uma delas tem vantagens e desvantagens. Aqui está uma lista rápida de profissionais e contras:

Degradação suave

• Vantagens
  • A rota mais simples.
  • A gama do navegador é mapeada ou fixa para sRGB caso não seja uma tela com ampla gama, portanto, a responsabilidade é do navegador.
• Desvantagens
  • O navegador pode aplicar a fixação ou a gama de cores do mapa para uma cor que você não adora.
  • Talvez o navegador não entenda a solicitação de cor e falhe completamente. No entanto, isso pode ser atenuado especificando a cor duas vezes, deixando a cascata usar a cor anterior que ele entender.

Aprimoramento progressivo

• Vantagens
  • Mais controle com fidelidade de cor gerenciada.
  • Uma estratégia aditiva que não afeta as cores atuais.
• Desvantagens
  • Você precisa gerenciar duas sintaxes de cor separadas.
  • Você precisa gerenciar duas gamas de cores separadas.

Verificar a compatibilidade com a gama e o espaço de cores

O navegador permite verificar a compatibilidade com uma ampla gama de recursos e cores suporte de sintaxe de CSS e JavaScript. A gama exata de cores que o usuário tem não é disponibilizado, uma resposta generalizada é fornecida para que a privacidade do usuário seja mantidos. O suporte exato ao espaço de cores está disponível, já que não específicas para recursos do hardware do usuário, como a gama.

Consultas de suporte da gama de cores

Os exemplos de código a seguir verificam o intervalo de cores do usuário visitante em sua exibição.

Verificação no CSS

A consulta de suporte menos específica dynamic-range consulta de mídia:

Compatibilidade com navegadores

• 98
• 98
• 100
• 13,1

Origem

@media (dynamic-range: high) {
  /* safe to use HD colors */
}

É possível solicitar suporte aproximado, ou mais, com o color-gamut consulta de mídia:

Compatibilidade com navegadores

• 58
• 79,00
• 110
• 10

Origem

@media (color-gamut: srgb) {
  /* safe to use srgb colors */
}

@media (color-gamut: p3) {
  /* safe to use p3 colors */
}

@media (color-gamut: rec2020) {
  /* safe to use rec2020 colors */
}

Há duas consultas de mídia adicionais para verificar a compatibilidade:

1. @media (color)
2. @media (color-index)

Verificar usando JavaScript

Para JavaScript, o parâmetro window.matchMedia() pode ser chamada e transmitir uma consulta de mídia para avaliação.

Compatibilidade com navegadores

• 9
• 12
• 6
• 5,1

Origem

const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;

console.log(hasHighDynamicRange); // true || false

const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;

console.log(hasP3Color); // true || false

O padrão acima pode ser copiado para o restante das consultas de mídia.

Consultas de suporte do espaço de cores

Os exemplos de código a seguir verificam o navegador do usuário visitante e sua seleção de espaços de cor para trabalhar.

Verificação no CSS

O suporte ao espaço de cores individual pode ser consultado usando um Consulta @supports:

Compatibilidade com navegadores

• 28
• 12
• 22
• 9

Origem

@supports (background: rgb(0 0 0)) {
  /* rgb color space supported */
}


@supports (background: color(display-p3 0 0 0)) {
  /* display-p3 color space supported */
}


@supports (background: oklch(0 0 0)) {
  /* oklch color space supported */
}

Verificar usando JavaScript

Para JavaScript, o parâmetro CSS.supports() pode ser chamada e transmitir um par de propriedade e valor para ver se o navegador entende.

CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')

Como juntar as verificações de hardware e análise

Enquanto aguarda a implementação desses novos recursos de cores por cada navegador, trata-se de uma uma boa ideia verificar a capacidade de hardware e de análise de cores. Isto é o que eu geralmente uso ao aumentar progressivamente as cores para alta definição:

:root {
  --neon-red: rgb(100% 0 0);
  --neon-blue: rgb(0 0 100%);
}

/* is the display HD? */
@media (dynamic-range: high) {

  /* does this browser understand display-p3? */
  @supports (color: color(display-p3 0 0 0)) {

    /* safe to use display-p3 colors */
    --neon-red: color(display-p3 1 0 0);
    --neon-blue: color(display-p3 0 0 1);
  }
}

Depurar a cor com o Chrome DevTools

O Chrome DevTools está atualizado e equipado com novas ferramentas para ajudar os desenvolvedores criam, convertem e depuram cores em HD.

Seletor de cores atualizado

O seletor de cores agora oferece suporte a todos os novos espaços de cor. Ao permitir que os autores interagem com os valores do canal da mesma forma que fariam.

Limites da gama

Uma linha de limite de gama também foi adicionada, traçando uma linha entre s rgb gamas display-p3. Deixando claro em qual gama a cor selecionada está.

Isso ajuda os autores a diferenciar visualmente entre cores em alta definição e cores não HD. Ele é especialmente útil ao trabalhar com a função color() e o novo espaços de cor, porque eles são capazes de produzir cores não HD e HD. Se você deseja verificar em qual gama de cores está, abra o seletor de cores e veja!

Converter cores

O DevTools conseguiu converter cores entre formatos com suporte, como hsl, "hwb", "RGB" e "hex" por muitos anos. shift + click em uma amostra de cor quadrada na Estilos para realizar esta conversão. As novas ferramentas de cores não se repetem através das conversões, elas geram um diálogo em que os autores podem ver e escolher a conversão desejada.

Durante a conversão, é importante saber se ela foi cortada para se ajustar ao espaço. O DevTools agora tem um ícone de aviso para a cor convertida que alerta você para este recorte.

Saiba mais sobre o recurso de depuração de CSS no DevTools.

Próximas etapas

Mais vibração, manipulações e interpolações consistentes e, no geral, entregam uma uma experiência mais colorida aos usuários.

Leia mais recursos de cor no guia.