Trasparenza prefers-reduced-transparency CSS

Ottimizza e apporta modifiche per gli utenti che preferiscono un'interfaccia utente opaca.

Adam Argyle

A partire da Chrome 118, la nuova funzionalità di query supporti prefers-reduced-transparency da Query supporti CSS 5 è disponibili. Le interfacce non opache possono causare mal di testa o ostacolare visivamente vari tipi di carenze visive. Ecco perché Windows, macOS e iOS hanno le preferenze di sistema che possono ridurre o rimuovere la trasparenza dall'interfaccia utente.

Con questa nuova query multimediale nel browser, il CSS può adattare l'interfaccia per gli utenti che specifica il desiderio di trasparenza ridotta:

.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à in corrispondenza di 50% che viene poi utilizzato con HSL per creare uno sfondo blu semitrasparente. La La query supporti nidificata verifica una preferenza dell'utente per trasparenza ridotta e, se vera, regola la variabile di opacità su 95%, una un valore di opacità quasi opaco.

Questa query supporti si adatta bene alle altre query supporti di preferenza, che consente a designer e sviluppatori di essere creativi e, al contempo, di adattarsi alle esigenze degli utenti. Immagina queste query multimediali come una sedia in un'auto che automaticamente regola la posizione in base all'utente; quando un utente visita il tuo sito web, si adatta automaticamente a queste impostazioni senza che l'utente lo chieda. Fantastico.

Casi d'uso per la riduzione della trasparenza

Le prossime sezioni saranno dedicate a illustrare momenti e opportunità ridurre la trasparenza in modi significativi.

Didascalie semitrasparenti nelle immagini

È abbastanza comune sovrapporre una miniatura di un'immagine o di un video una didascalia o un riepilogo semitrasparente. L'esempio seguente illustra un modo per gestire una preferenza relativa a una minore trasparenza. L'overlay è interamente rimosso e gli stessi contenuti dei sottotitoli codificati visualizzati sotto l'immagine anziché in overlay.

Modale, notifiche e popover trasparenti

Un altro modo in cui gli elementi dell'interfaccia utente si sovrappongono ai contenuti, spesso con elementi di l'opacità è presente, è con modals, notifiche e popover. In questi casi, l'aumento dell'opacità consente di rispettare la preferenza dell'utente e allo stesso tempo una sottile 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 smerigliato adattivo

Un altro tipico stile di sovrapposizione di immagini è il vetro satinato. Nell'esempio seguente, l'immagine dietro la didascalia è un riflesso speculare dell'immagine prodotto. Questo presenta un paio di vantaggi: l'immagine non viene ritagliata e le aree chiare o scure la preferenza può risultare un po' più elevata 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%;
  }
}

Intestazione hero

Un elemento comune della home page ha un messaggio in grassetto sovrapposto a un video in loop o immagine animata. L'esempio seguente ha un gradiente colorato semitrasparente e un'immagine di sfondo con animazione infinita. Sebbene questo possa attirare per molti occhi, può creare problemi anche a molti, a causa del basso contrasto per una trasparenza e un movimento che non possono essere controllati.

Per risolvere questo problema puoi utilizzare due query multimediali CSS: preferisce-Movimento-ridotto e preferisce-trasparenza ridotta. All'interno della query relativa ai contenuti multimediali con video ridotto puoi applicare l'animazione infinita solo se l'utente ha "nessuna preferenza" per una gamma ridotta movimento, segnalando al codice che l'utente può rilevare il movimento.

Inoltre, con la query multimediale a trasparenza ridotta, puoi diminuire opacità, quindi il colore dell'overlay è quasi al 100%. Ora il messaggio può essere letto facilmente senza distrazioni dal movimento o contrasti problematici.

Metti tutto insieme e potrai implementare un look UI creativo garantendo al contempo il pubblico di destinazione può leggerlo e ricevere 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 dell'utente

L'esempio precedente non controllava le preferenze utente relative alla riduzione preferenza, verifica invece che non ci siano preferenze.

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

Sviluppatori e designer spesso "ricorrono" l'esperienza utente sulla base di questi con una mentalità sottrattiva. Ciò si manifesta nelle query supporti come un controllo di "Reduce", A quel punto qualcosa dall'interfaccia utente viene rimosso. La un esempio mostra una mentalità additiva, in cui il movimento e la trasparenza vengono aggiunti se l'utente se ne va.

Questo approccio ti aiuta a pensare a un'esperienza di base sana che robusto di per sé. Quindi, se l'utente è d'accordo, aggiungila all'esperienza.

Strumenti per sviluppatori

Chrome DevTools può emulare questa preferenza per una trasparenza ridotta (e altri) nella scheda Rendering. Nel seguente video Scopri come attivare/disattivare prefers-color-scheme e prefers-reduced-transparency query supporti per mostrare la trasparenza più chiara, scura, trasparente e ridotta varianti della scheda relativa al vetro satinato.