Hoje, estamos anunciando a descontinuação do CSS -ms-high-contrast consulta de mídia e -ms-high-contrast-adjust propriedade, em favor do padrão cores forçadas recurso que implementamos em navegadores baseados em Chromium em 2020.
Os temas de contraste são um recurso de acessibilidade muito importante do Home windows, que torna o texto mais visível e fácil de ler. No passado, o Web Explorer e o Microsoft Edge com o mecanismo EdgeHTML possibilitavam que os websites respeitassem a configuração do tema de contraste do usuário usando o -ms-high-contrast e -ms-high-contrast-adjust Recursos CSS. Em 2020, demos um passo além e trabalhamos com o Chromium para padronizar o suporte a temas de contraste na net, para que funcione não apenas no Edge, mas também em qualquer mecanismo que implemente suporte ao recurso. Renomeamos o recurso para cores forçadas. Hoje, o suporte a cores forçadas é compatível com navegadores baseados em Chromium e também no Firefox.
Para saber mais sobre o recurso de cores forçadas, confira os seguintes hyperlinks:
Descontinuando os recursos CSS herdados com prefixo ms
Quando lançamos o recurso de cores forçadas no Edge baseado em Chromium pela primeira vez, também queríamos que os websites que usavam os recursos CSS legados do Web Explorer e do Microsoft Edge com o mecanismo EdgeHTML continuassem funcionando. Assim, mantivemos o apoio ao -ms-high-contrast consulta de mídia e o -ms-high-contrast-adjust propriedade.
Hoje estamos anunciando nosso processo de descontinuação desses recursos CSS. Proceed lendo para saber o que esperar e como migrar para as novas propriedades.
Período de depreciação
Para reduzir problemas de interoperabilidade e obter suggestions, planejamos descontinuar lentamente o legado -ms-high-contrast consulta de mídia e -ms-high-contrast-adjust propriedade no Microsoft Edge.
Estamos planejando desabilitar completamente a implementação legada do Edge 138, mas esse plano pode mudar dependendo do suggestions que recebermos durante esse teste de descontinuação.
Testando a depreciação antecipadamente
Estamos apresentando uma maneira de você verificar se seus novos estilos de cores forçadas funcionam corretamente antes de desabilitarmos completamente a implementação herdada de alto contraste. Para verificar seus estilos, você pode desabilitar a implementação herdada localmente no Microsoft Edge:
- Abra uma nova janela ou guia.
- Vá para
edge://flags/#edge-deprecate-ms-high-contrastnessa guia. - Habilite o Descontinuar '-ms-high-contrast' e '-ms-high-contrast-adjust' sinalizador e reinicie o Microsoft Edge.
Aviso do DevTools
Como parte do processo de descontinuação, o Microsoft Edge também exibirá um aviso no DevTools Console ferramenta para qualquer website que use as propriedades herdadas em suas folhas de estilo, começando com o Edge versão 126.
Testes de origem
Por fim, para que você possa eliminar gradualmente a implementação herdada e manter seu website funcionando bem após sua descontinuação, estamos iniciando uma avaliação de origem no Edge 132. Consulte Avaliações de origem do Microsoft Edge para obter mais detalhes.
No período que antecede a descontinuação, o Microsoft Edge entrará em contato com testadores de acessibilidade e websites com uso conhecido das propriedades herdadas para evitar quebras quando a descontinuação ocorrer.
Como atualizar seus estilos para o novo padrão de cores forçadas
Se o seu website usa o legado -ms-high-contrast consulta de mídia e -ms-high-contrast-adjust propriedade para modificar seus estilos quando o Home windows estiver definido para um tema de contraste, recomendamos que você adote o novo padrão de modo de cores forçadas antes que as propriedades herdadas sejam descontinuadas.
A tabela abaixo mostra como as propriedades legadas podem ser transferidas para as novas normas:
| Com Web Explorer e Microsoft Edge com mecanismo EdgeHTML | Com o Microsoft Edge e outros navegadores que suportam cores forçadas |
|---|---|
@media (-ms-high-contrast: energetic) {} |
@media (forced-colors: energetic) {} |
@media (-ms-high-contrast: black-on-white) {} |
@media (forced-colors: energetic) and (prefers-color-scheme: mild) {}
Observação: isso não é exatamente igual à consulta de mídia em preto e branco herdada, que correspondia apenas a temas de contraste padrão específicos. A nova implementação observará a luminosidade da cor de fundo do usuário para determinar se |
@media (-ms-high-contrast: white-on-black) {} |
@media (forced-colors: energetic) and (prefers-color-scheme: darkish) {}
Mesma nota da linha anterior. |
-ms-high-contrast-adjust: none; |
forced-color-adjust: none; |
Observe que existem algumas diferenças importantes que você precisará considerar ao migrar seus estilos de tema de contraste para o novo padrão de modo de cores forçadas. Isso inclui alterações na cascata de estilos, palavras-chave de cores do sistema e design de controles de formulário nativos. Para obter mais detalhes, consulte Estilo para Home windows de alto contraste com novos padrões para cores forçadas.
Como testar o modo de cores forçadas em seu website
Para verificar como o seu website é renderizado ao usar um tema de contraste, você pode alterar as configurações do Home windows para usar um tema de contraste ou emulá-lo por meio do DevTools.
Para alterar as configurações do Home windows:
- No Home windows 10: vá para Configurações > Facilidade de acesso > Alto contrastee clique em Ative o alto contraste.
- No Home windows 11: vá para Configurações > Acessibilidade > Temas de contrasteselecione um tema na lista Temas de contraste menu suspenso e clique em Aplicar.
Se quiser testar seu website em outros sistemas operacionais, como macOS ou Linux, ou se não quiser alterar o tema do Home windows, você também pode emular o modo de cores forçadas usando Microsoft Edge DevTools:
- Abra o DevTools pressionando F12 ou Ctrl+Shift+I.
- Abra o Renderização ferramenta clicando Mais ferramentas (+) > Renderização.
- Function para baixo até Emular recurso de mídia CSS com cores forçadas.
- Selecione cores forçadas: ativas para emular o modo de cores forçadas. Ou selecione cores forçadas: nenhuma para parar de emular cores forçadas.
- Você também pode escolher um tema específico de cores forçadas usando o Emular recurso de mídia CSS prefere esquema de cores menu suspenso e definindo seu valor para prefere esquema de cores: claro ou prefere esquema de cores: escuro.
Ao usar o recurso de emulação no DevTools, você pode visualizar a aparência do seu website para usuários de diferentes temas de contraste e ajustar seus estilos de acordo.
Compatibilidade com versões anteriores
Se você precisar oferecer suporte a temas de contraste para Web Explorer e Microsoft Edge com o mecanismo EdgeHTML, bem como versões mais recentes do Microsoft Edge baseadas no Chromium, recomendamos o uso de uma combinação das propriedades herdadas e padrão para máxima compatibilidade.
Por exemplo, se seus estilos forem assim:
Atualize esses estilos com as seguintes regras:
Deixe-nos saber como as coisas vão
Se você encontrar algum problema durante o teste, envie-nos comentários de uma destas duas maneiras:
- Para nos enviar comentários diretamente do Microsoft Edge: acesse Configurações e muito mais (…) > Ajuda e comentários > Enviar comentários.
- Ou, para relatar um problema diretamente com a implementação do Chromium do novo padrão de modo de cores forçadas, crie um novo problema usando o rastreador de bugs do Chromium.
