Trasparenza prefers-reduced-transparency CSS

Ottimizza e modifica l'interfaccia utente per gli utenti che preferiscono un'interfaccia opaca.

Adam Argyle

Da Chrome 118 è disponibile la nuova funzionalità di query sui contenuti multimediali prefers-reduced-transparency di CSS Media Queries 5. Le interfacce non opache possono causare mal di testa o essere difficili da vedere per vari tipi di deficit visivi. Ecco perché Windows, macOS e iOS hanno preferenze di sistema che possono ridurre o rimuovere la trasparenza dall'interfaccia utente.

Con questa nuova query sui media nel browser, il CSS può adattare l'interfaccia agli utenti che specificano la volontà di ridurre la trasparenza:

.example {
  --opacity: .5;

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

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

Nell'esempio di codice precedente, una variabile CSS contiene un valore di opacità pari a 50% che viene poi utilizzato con HSL per creare uno sfondo blu semitrasparente. La query sui contenuti multimediali nidificata verifica se è presente una preferenza dell'utente per una trasparenza ridotta e, se è così, regola la variabile di opacità su 95%, un valore di opacità quasi opaco.

Questa query sui contenuti multimediali si adatta bene alle altre query sui contenuti multimediali delle preferenze, che consentono a designer e sviluppatori di essere creativi e al contempo di adattarsi agli utenti. Immagina queste query multimediali come una sedia in un'auto che regola automaticamente la posizione in base all'utente; quando un utente visita il tuo sito web, si adatta automaticamente senza che questo li chieda. Bello.

Casi d'uso per la riduzione della trasparenza

Le prossime sezioni saranno dedicate a mostrare i momenti e le opportunità per ridurre la trasparenza in modo significativo.

Didascalie semitrasparenti nelle immagini

È abbastanza comune sovrapporre una miniatura di un'immagine o di un video con una didascalia o un riepilogo semitrasparente. L'esempio seguente illustra un modo per gestire una preferenza per una trasparenza ridotta. La sovrapposizione viene completamente rimossa e gli stessi contenuti della didascalia vengono visualizzati sotto l'immagine anziché sovrapposti.

Modali, notifiche e popup trasparenti

Un altro modo in cui gli elementi dell'interfaccia utente sovrappongono i contenuti, il che spesso significa che sono presenti elementi di opacità, è con finestre modali, notifiche e popup. In questi casi, aumentando l'opacità puoi rispettare la preferenza dell'utente e far risaltare una leggera quantità di colore dietro l'overlay.

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

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

Vetro smerigliato adattivo

Un altro popolare stile di sovrapposizione di immagini è il vetro satinato. Nell'esempio seguente, l'immagine dietro la didascalia è un riflesso speculare dell'immagine del prodotto. Questo ha alcuni vantaggi: l'immagine non viene ritagliata e la preferenza per le tonalità luminose o scure può essere percepita un po' di più nel risultato finale.

.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%;
  }
}

Hero header

Un elemento comune della home page è un messaggio in grassetto sovrapposto a un video o a un'immagine animata in loop. L'esempio seguente ha un overlay con sfumatura semitrasparente colorata e un'immagine di sfondo con animazione infinita. Sebbene questo possa attirare molti sguardi, creerà anche problemi per molti, a causa del basso contrasto con trasparenza e movimento che non possono essere controllati.

Il problema può essere risolto con due query sui contenuti multimediali CSS: prefers-reduced-motion e prefers-reduced-transparency. All'interno della query multimediale con animazione ridotta puoi applicare l'animazione infinita solo se l'utente ha "nessuna preferenza" per il movimento ridotto, segnalando al codice che l'utente può eseguire il movimento.

Inoltre, con la query sui contenuti multimediali con trasparenza ridotta, puoi diminuire l'opacità in modo che il colore dell'overlay sia quasi al 100%. Ora il messaggio può essere letto facilmente senza distrazioni dovute al movimento o contrasti problematici.

Mettendo tutto insieme, puoi implementare un look dell'interfaccia utente della creatività, assicurandoti al contempo che il pubblico di destinazione possa leggerla e comprendere il messaggio.

.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%)
    );
  }
}

Prospettive additive e sottrattive sulle preferenze degli utenti

L'esempio precedente non controllava queste preferenze dell'utente per la preferenza ridotta, ma controllava l'assenza di preferenze.

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

Spesso gli sviluppatori e i designer "rinunciano" all'esperienza utente in base a queste preferenze, in una mentalità sottrattiva. Questo si manifesta nelle query supporti come controllo di "riduce", dopodiché qualcosa viene rimosso dall'interfaccia utente. L'esempio mostra una mentalità additiva, in cui il movimento e la trasparenza vengono aggiunti se l'utente è d'accordo.

Questo approccio ti aiuta a pensare a un'esperienza di riferimento sana e solida. Se l'utente è d'accordo, aggiungi l'esperienza.

DevTools

Chrome DevTools può emulare questa preferenza per la trasparenza ridotta (e altro ancora) nella scheda Rendering. Nel seguente video, scopri come attivare e disattivare le query multimediali prefers-color e prefers-riduce-trasparenza per mostrare le varianti chiare, scure, trasparenti e con trasparenza ridotta della scheda in vetro satinato.