Otimize e faça ajustes para usuários que preferem uma interface opaca.
No Chrome 118, o novo recurso de consulta de mídia
prefers-reduced-transparency
em Consultas de mídia CSS 5 está
disponível. Interfaces não opacas podem causar dores de cabeça ou ser um problema visual para
vários tipos de deficiências visuais. É por isso que Windows, macOS e iOS têm preferências do sistema
que podem reduzir ou remover a transparência da interface.
Com essa nova consulta de mídia no navegador, o CSS pode adaptar a interface para os usuários que especificam o desejo de 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 contém um valor de opacidade em 50%,
que é usado com HSL para criar um plano de fundo azul semitransparente. A consulta de mídia
aninhada verifica se há uma preferência do usuário por
transparência reduzida e, quando verdadeira, ajusta a variável de opacidade para 95%, um
valor de opacidade quase opaco.
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. Você pode pensar nessas consultas de mídia como uma cadeira em um carro que ajusta automaticamente a posição para o usuário. Quando um usuário acessa seu site, ele se ajusta automaticamente sem que ele peça. Muito legal.
Casos de uso para reduzir a transparência
As próximas seções serão dedicadas a mostrar momentos e oportunidades para reduzir a transparência de maneiras significativas.
Legendas semitransparentes em imagens
É bastante comum sobrepor uma imagem ou miniatura de vídeo com uma legenda ou resumo semitransparente. O exemplo a seguir ilustra uma maneira de processar uma preferência por transparência reduzida. A sobreposição será totalmente removida, e o mesmo conteúdo de legenda será mostrado abaixo da imagem, em vez de sobreposto.
Modais, notificações e pop-ups transparentes
Outra maneira pela qual os elementos da interface sobrepõem o conteúdo, o que muitas vezes significa que há elementos de opacidade presentes, é usando modais, notificações e pop-ups. Nesses casos, aumentar a opacidade pode respeitar a preferência do usuário e ainda permitir uma quantidade sutil de cor por trás da sobreposição.
.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 por trás da legenda é um reflexo da imagem do produto. Isso tem algumas vantagens: a imagem não é cortada, e a preferência clara ou escura pode indicar um pouco mais 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 sobreposta a um vídeo em loop ou a uma imagem animada. O exemplo a seguir tem uma sobreposição de gradiente colorido semitransparente e uma imagem de plano de fundo com animação infinita. Embora isso possa atrair muitos olhos, 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. Dentro da consulta de mídia de movimento reduzido, só será possível aplicar a animação infinita se o usuário tiver "sem preferência" para movimentos reduzidos, sinalizando ao código que ele pode ter movimento.
Além disso, com a consulta de mídia de transparência reduzida, é possível diminuir a opacidade para que a cor da sobreposição seja de quase 100%. Agora, a mensagem pode ser lida facilmente sem uma distração de movimento ou contraste problemático.
Ao reunir tudo, você pode implantar um visual criativo de interface e, ao mesmo tempo, garantir que o público-alvo possa 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%)
);
}
}
Perspectivas aditivas e subtrativas nas preferências do usuário
O exemplo anterior não verificou essas preferências do usuário para a preferência reduzida, em vez disso, ele verifica se não há nenhuma preferência.
@media (prefers-reduced-transparency: no-preference) {
…
}
Os desenvolvedores e designers geralmente "substituem" a experiência do usuário com base nessas preferências, em uma mentalidade subjetiva. Isso se manifesta nas consultas de mídia como uma verificação de "redução", quando algo da interface é removido. O exemplo mostra uma mentalidade aditiva, em que movimento e transparência são adicionados se o usuário concordar.
Essa abordagem ajuda você a pensar em uma experiência de referência saudável que seja robusta por si só. Em seguida, se concordar com o usuário, acrescente à experiência.
Ferramentas de desenvolvedor
O Chrome DevTools pode emular essa preferência por transparência reduzida (e muito mais) na guia Renderização. No vídeo a seguir, confira como ativar as consultas de mídia "prefers-color-scheme" e "prefer-color-scheme" para mostrar as variantes de transparência clara, escura, transparente e reduzida do cartão de vidro fosco.