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. Puoi considerare queste query sui media come una sedia in un'auto che regola automaticamente la posizione in base all'utente. Quando un utente visita il tuo sito web, si regola automaticamente in base alle sue esigenze senza che debba chiedere nulla. Bello.

Casi d'uso per la riduzione della trasparenza

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

Sottotitoli semitrasparenti sulle 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, l'aumento dell'opacità può rispettare la preferenza dell'utente, consentendo al contempo di far trasparire una minima quantità di colore da dietro l'overlay.

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

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

Vetro ghiacciato adattivo

Un altro stile di overlay di immagini molto diffuso è il vetro smerigliato. 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 sui contenuti multimediali con movimento ridotto puoi applicare l'animazione infinita solo se l'utente ha "no-preference" per il movimento ridotto, indicando al codice che è consentito per questo utente.

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 a un contrasto problematico.

Mettendo tutto insieme, puoi implementare un look dell'interfaccia utente della creatività, garantendo 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 se queste preferenze dell'utente erano ridotte, ma se non erano presenti.

@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 sui contenuti multimediali come un controllo per "riduci", a quel punto viene rimosso qualcosa dall'interfaccia utente. L'esempio mostra una mentalità additiva, in cui vengono aggiunti movimento e trasparenza 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 video seguente scopri come attivare/disattivare le query sui media prefers-color-scheme e prefers-reduced-transparency per mostrare le varianti chiara, scura, trasparente e con trasparenza ridotta della scheda in vetro satinato.