A color-adjustpropriedade é descrita pela especificação como “preservação de cores em dispositivos com diferentes recursos”. Você sabe que existem telefones, tablets e outros dispositivos sem telas de qualidade retina? Bem, esta propriedade fornece ao navegador uma dica para tomar decisões sobre como lidar com as cores com base nessa qualidade.
Você pode estar pensando algo como: "Espere, o vermelho não é apenas vermelho?" E, sim, isso é absolutamente verdade. De que adianta otimizar ou ajustar uma cor verdadeira, não importa onde seja exibida?
O ponto é que os navegadores já tendem a fazer essas determinações e ajustar as cores por conta própria, como produzir um vermelho ligeiramente diferente se o agente do usuário for incapaz de renderizar um hexadecimal específico devido à qualidade da tela de algum outro fator. A propriedade está efetivamente dizendo ao navegador: “Ei, gostaria que você usasse esta cor, mas é legal se você não puder e quiser aplicar sua melhor alternativa para a situação”. Ou, ao contrário, pode instruir o navegador a corresponder exatamente à cor a todo e qualquer custo.
Estilos Impressos
Curiosamente, a especificação usa o exemplo de impressão de páginas da Web em toda a definição de color-adjust. No entanto, não há documentação real destinada a impressão. Isso não impediu que o Chrome e o Safari implementassem uma versão prefixada chamada webkit-print-color-adjust, o que é uma forte indicação de que se destina a fins de impressão.
Por que isso importa? A especificação descreve um caso de uso em que manter a faixa de zebra de uma mesa estilizada em uma página impressa pode ajudar na legibilidade:
Por exemplo, um site de mapeamento que oferece instruções impressas pode "listrar" as etapas nas direções, alternando entre fundos brancos e cinza claro. Perder essa faixa de zebra e ter um fundo totalmente branco tornaria as instruções mais difíceis de ler com um olhar rápido quando distraído em um carro.
color-adjustestá definido como economy.
Sintaxe
.my-element ( color-adjust: (economy | exact); )Valores
economy(valor inicial): este valor permite que o navegador faça ajustes na cor e no estilo de um elemento onde ele decidir que precisa, seja para melhorar a legibilidade, substituir uma cor que um dispositivo é incapaz de exibir ou algum outro fator. Observe que este é o valor padrão e, mesmo que a propriedade não seja aplicada, é assim que os navegadores se comportarão.exact: Este valor instrui o navegador a fazer a correspondência de uma cor a todo custo para preservar o estilo declarado. Seria usado para chamar estilos que são “importantes” ou “significativos” para o elemento.
Observe que o uso padrão de economysaber se a propriedade é chamada ou não sugere que ela color-adjustfoi projetada para fornecer um sinal aos navegadores indicando estilos que são importantes o suficiente para serem preservados.
Status de especificação
A color-adjustpropriedade é definida no Módulo de Cores CSS Nível 4, que está no status de primeiro rascunho público no momento em que este documento foi escrito. Isso significa que ainda não foi endossado pelo W3C e pode ser atualizado, alterado ou mesmo eliminado em revisões posteriores. Como tal, esta propriedade não está pronta para produção e é considerada experimental.
Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 19 * | 48 | Não | 79 * | 6 * |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0-14,4 |
Mais Informações
- Primeiro esboço de trabalho público do módulo de cores CSS de nível 4
- Estatísticas de uso do Microsoft Edge
- Documentação MDN
- As possibilidades da propriedade de ajuste de cor