Esta página foi traduzida pela API Cloud Translation.

O CSS prefere-reduzir-transparência

Otimize e faça ajustes para usuários que preferem uma interface opaca.

Adam Argyle

No Chrome 118, o novo recurso de consulta de mídia prefers-reduced-transparency das Consultas de mídia CSS 5 disponíveis. Interfaces não opacas podem causar dor de cabeça ou ser um problema visual para vários tipos de deficiência visual. É por isso que Windows, macOS e iOS têm preferências do sistema que pode reduzir ou remover a transparência da interface.

Compatibilidade com navegadores

Origem

Com essa nova consulta de mídia no navegador, o CSS pode adaptar a interface para os usuários que querem reduzir a transparência:

.example {
  --opacity: .5;

  background: hsl(200 100% 50% / var(--opacity));

  @media (prefers-reduced-transparency: reduce) {
    --opacity: .95;
  }
}

No exemplo de código anterior, uma variável CSS tem um valor de opacidade em 50%. que é usado com HSL para criar um fundo azul semitransparente. A uma consulta de mídia nested verifica se há uma preferência do usuário por transparência reduzida e, quando verdadeiro, ajusta a variável de opacidade para 95%, uma valor de opacidade quase opaca.

Essa consulta de mídia se encaixa bem com as outras consultas de mídia de preferência, que permitem que designers e desenvolvedores sejam criativos e façam ajustes para os usuários. Pense nessas consultas de mídia como uma cadeira em um carro que automaticamente ajusta a posição para o usuário; quando um usuário acessa seu site, ele se ajusta a elas automaticamente, sem que elas peçam. Muito legal.

Casos de uso para reduzir a transparência

As próximas seções serão dedicadas a mostrar momentos e oportunidades para reduzindo a transparência de maneiras significativas.

Legendas semitransparentes em imagens

É bastante comum sobrepor uma imagem ou miniatura de vídeo com legenda ou resumo semitransparente. O exemplo a seguir ilustra uma maneira para lidar com uma preferência por transparência reduzida. A sobreposição é totalmente removido, e o mesmo conteúdo de legenda é exibido abaixo da imagem em vez de sobrepostas.

Modos, notificações e pop-ups transparentes

Outra maneira como os elementos da interface se sobrepõem ao conteúdo, o que geralmente significa que elementos de opacidade estão presentes, é com modais, notificações e pop-overs. Nesses casos, aumentar a opacidade pode respeitar a preferência do usuário e, ao mesmo tempo, permitir uma uma quantidade sutil de cor por trás da sobreposição para aparecer.

.card {
  background: hsl(none none 100% / 20%);

  @media (prefers-reduced-transparency: reduce) {
    background: hsl(none none 0% / 80%);
  }
}

Vidro fosco adaptável

Outro estilo popular de sobreposição de imagem é o vidro fosco. No exemplo a seguir, a imagem atrás da legenda é um reflexo da imagem do produto. Isso tem algumas vantagens: a imagem não é cortada e as partes claras ou escuras preferência pode ter um impacto maior no resultado final.

.adaptive-glass {
  --glass-lightness: 100%;
  --glass-alpha: 50%;

  background: hsl(0 0% var(--glass-lightness) / var(--glass-alpha));
  backdrop-filter: blur(40px);

  @media (prefers-color-scheme: dark) {
    --glass-lightness: 0%;
  }

  @media (prefers-reduced-transparency: reduce) {
    --glass-alpha: 85%;
  }
}

Cabeçalho hero

Um elemento comum da página inicial tem uma mensagem em negrito sobrepondo um vídeo em loop ou imagem animada. O exemplo a seguir tem um gradiente colorido semitransparente e uma imagem de plano de fundo com uma animação infinita. Embora isso possa atrair para muitos olhos, isso também criará problemas para muitos, devido ao baixo contraste com transparência e movimento que não podem ser controlados.

Isso pode ser corrigido com duas consultas de mídia CSS: prefers-reduced-motion. e prefers-reduced-transparency. Na consulta de mídia com movimento reduzido, é possível aplicar a animação infinita somente se o usuário tiver "não preferência" para reduzido movimento, sinalizando ao código que o usuário pode fazer movimento.

Além disso, com a consulta de mídia de transparência reduzida, é possível diminuir o opacidade, para que a cor da sobreposição seja de quase 100%. Agora a mensagem pode ser lida facilmente sem distração de movimento ou contraste problemático.

Reúna tudo isso e você pode implantar um visual criativo de interface do usuário, ao mesmo tempo que garante o público-alvo pode ler e receber a mensagem.

.Hero img {
  @media (prefers-reduced-motion: no-preference) {
    animation: zoom 30s ease infinite;
  }
}

.Hero .overlay {
  background: hsl(none none 0% / 95%);

  @media (prefers-reduced-transparency: no-preference) {
    background: linear-gradient(
      to top right in oklab,
      oklch(40% 0.3 340 / 70%),
      oklch(40% 0.4 200 / 70%)
    );
  }
}

(link em inglês)

Perspectivas aditivas versus subtrativas sobre preferências do usuário

O exemplo anterior não verificou essas preferências de usuário quanto à redução preferência, em vez disso, verifica se não há preferência.

@media (prefers-reduced-transparency: no-preference) {
  …
}

Desenvolvedores e designers muitas vezes são "substitutos" a experiência do usuário com base preferências, em uma mentalidade de subtração. Isso aparece nas consultas de mídia como marque “reduzir”, quando algo da interface é removido. A exemplo mostra uma mentalidade aditiva, em que movimento e transparência são adicionados se o usuário concorda com isso.

Essa abordagem ajuda a pensar em uma experiência de linha de base saudável que seja e resistente por si só. Então, se o usuário concordar, adicione algo à experiência.

Ferramentas de desenvolvedor

O Chrome DevTools pode emular essa preferência para ter transparência reduzida (e mais) na guia "Renderização". No vídeo a seguir confira como alternar as preferências-color-scheme e prefers-reduced-transparency consultas de mídia para mostrar a transparência clara, escura, transparente e reduzida variantes do cartão de vidro fosco.

https://codepen.io/web-dot-dev/pen/dyaojxr