Este documento faz parte do Guia de cores CSS de alta definição.
Existem duas estratégias principais para atualizar as cores do seu projeto da Web para oferecer compatibilidade com telas amplas:
Degradação suave: use os novos espaços de cor e deixe o navegador e o sistema operacional descobrirem qual cor será exibida com base nos recursos de exibição.
Aprimoramento progressivo: use
@supportse@mediapara avaliar os recursos do navegador do usuário e, se as condições forem atendidas, fornecer uma ampla gama de cores.
Se um navegador não entender a cor do display-p3, faça o seguinte:
color: red;
color: color(display-p3 1 0 0);
Se um navegador entender a cor do display-p3:
color: red;
color: color(display-p3 1 0 0);
Cada uma tem vantagens e desvantagens. Aqui está uma lista rápida de prós e contras:
Degradação suave
- Vantagens
- O trajeto mais simples.
- A gama do navegador é mapeada ou fixa para sRGB se não for uma tela de gama ampla. Portanto, a responsabilidade é do navegador.
- Desvantagens
- O navegador pode limitar a gama ou exibir o mapa de uma cor que você não gosta.
- O navegador pode não entender a solicitação de cor e falhar totalmente. No entanto, isso pode ser atenuado especificando a cor duas vezes, permitindo que a cascata retorne a cor anterior que ela entende.
Aprimoramento progressivo
- Vantagens
- Mais controle com fidelidade de cores 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 separadas de cores.
Verificar o suporte à gama e ao espaço de cores
O navegador permite verificar o suporte para a ampla gama de recursos e a compatibilidade com a sintaxe de cores de CSS e JavaScript. A gama exata de cores que o usuário tem não é disponibilizada. Uma resposta generalizada é fornecida para que a privacidade do usuário seja mantida. No entanto, a compatibilidade exata com o espaço de cor é disponibilizada, já que não é específica dos recursos do hardware do usuário, como a gama.
Consultas de suporte para gama de cores
Os exemplos de código a seguir verificam o intervalo de cores do usuário visitante na tela.
Verificar do CSS
A consulta de suporte menos específica é a
consulta de mídia
dynamic-range:
@media (dynamic-range: high) {
/* safe to use HD colors */
}
É possível solicitar suporte aproximado ou mais com a
consulta de mídia
color-gamut:
@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á outras duas consultas de mídia para verificar o suporte:
Verificar a partir do JavaScript
Em JavaScript, a função
window.matchMedia()
pode ser chamada e transmitir uma consulta de mídia para avaliação.
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 compatibilidade de espaço de cores
Os exemplos de código a seguir verificam o navegador do usuário visitante e a seleção de espaços de cor para trabalhar.
Verificar do CSS
O suporte a espaço de cores individual pode ser consultado usando uma
consulta @supports:
@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 a partir do JavaScript
Em JavaScript, a função
CSS.supports()
pode ser chamada e transmitir um par de propriedades e valores para que o
navegador entenda.
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
Reunir o hardware e as verificações de análise
Enquanto espera cada navegador implementar esses novos recursos de cores, é bom verificar a capacidade de hardware e de análise de cores. Muitas vezes, isso é o que uso ao melhorar 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 cores com o Chrome DevTools
O Chrome DevTools foi atualizado e está equipado com novas ferramentas para ajudar os desenvolvedores a criar, converter e depurar cores em alta definição.
Seletor de cores atualizado
O seletor de cores agora oferece suporte a todos os novos espaços de cor. Permitir que os autores interajam com os valores do canal como fariam.
Limites de gama
Uma linha de limite de gama também foi adicionada, desenhando uma linha entre as gamas srgb e display-p3. Deixando claro em qual gama a cor selecionada está.
Isso ajuda os autores a diferenciar visualmente as cores em alta definição das cores não HD.
É especialmente útil ao trabalhar com a função color() e os novos
espaços de cor, porque eles são capazes de produzir cores não HD e HD. Se
você quiser verificar em qual gama sua cor está, abra o seletor de cores e confira.
Converter cores
O DevTools foi capaz de converter cores entre formatos com suporte, como hsl,
hwb, rgb e hex há muitos anos. shift + click em uma amostra de cor quadrada no
painel "Estilos" para realizar essa conversão. As novas ferramentas de cores não apenas
percorrem conversões, elas geram uma caixa de diálogo em que os autores podem ver e escolher a
conversão que quiserem.
Ao converter, é importante saber se ela foi cortada para caber no espaço. O DevTools agora tem um ícone de aviso para a cor convertida que alerta você sobre esse recorte.
Conheça mais recursos de depuração de CSS no DevTools.
Próximas etapas
Mais vitalidade, manipulações e interpolações consistentes e, no geral, proporcionam uma experiência mais colorida aos usuários.
Leia mais recursos de cores no guia.