Ottimizza e apporta modifiche per gli utenti che preferiscono un'interfaccia utente opaca.
A partire da Chrome 118 è disponibile la nuova funzionalità relativa alle query multimediali prefers-reduced-transparency di CSS Media Queries 5. Le interfacce non opache possono causare mal di testa o essere un problema visivo per vari tipi di difetti alla vista. Ecco perché Windows, macOS e iOS dispongono di preferenze di sistema che possono ridurre o rimuovere la trasparenza dall'interfaccia utente.
Con questa nuova query multimediale nel browser, CSS può adattare l'interfaccia per gli utenti specificando un 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 50%, che viene poi utilizzato con HSL per creare uno sfondo blu semitrasparente. La query supporti nidificati verifica la presenza di una trasparenza ridotta per una preferenza dell'utente e, se true, regola la variabile di opacità su 95%, un valore di opacità quasi opaco.
Questa query supporti si adatta bene alle altre query supporti preferite, che consentono a designer e sviluppatori di essere creativi e allo stesso tempo di adattarsi agli utenti. Queste query multimediali sono paragonabili a una sedia in un'auto che regola automaticamente la posizione dell'utente; quando un utente visita il tuo sito web, si adatta automaticamente in base a queste query. Fantastico.
Casi d'uso per ridurre la trasparenza
Le prossime sezioni saranno dedicate a mostrare momenti e opportunità per ridurre la trasparenza in modi significativi.
Didascalie 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. L'overlay è stato completamente rimosso e gli stessi contenuti dei sottotitoli codificati vengono visualizzati sotto l'immagine anziché sovrapposti.
Mod, notifiche e popover trasparenti
Un altro modo in cui gli elementi dell'interfaccia utente si sovrappongono ai contenuti, il che spesso comporta la presenza di elementi di opacità, è con le modalità, le notifiche e i popover. In questi casi, aumentando l'opacità, potrai rispettare le preferenze dell'utente, consentendo al tempo stesso di far apparire 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 satinato adattivo
Un altro popolare stile di overlay di immagini è il vetro smerigliato. Nel seguente esempio, l'immagine dietro la didascalia è un riflesso speculare dell'immagine prodotto. Questo presenta un paio di vantaggi: l'immagine non viene ritagliata e, alla fine, la preferenza tra chiaro e scuro può essere leggermente più evidente.
.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 che si sovrappone a un video in loop o a un'immagine animata. L'esempio seguente presenta un overlay sfumato semitrasparente colorato e un'immagine di sfondo con animazione all'infinito. Anche se potrebbe attirare molti occhi, può creare problemi a molti, a causa del basso contrasto con la trasparenza e il movimento che non possono essere controllati.
Questo problema può essere risolto con due query supporti 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 "Nessuna preferenza" per il movimento ridotto, segnalando al codice che può consentire all'utente di avere movimento.
Inoltre, con la query supporti a trasparenza ridotta, puoi diminuire l'opacità in modo che il colore dell'overlay sia quasi del 100%. Ora il messaggio può essere letto facilmente senza distrazione o contrasto.
Combinando il tutto, potrai implementare un'interfaccia utente creativa e assicurarti, al contempo, che il pubblico di destinazione possa leggerla e leggere 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 aggiuntive e sottrattive sulle preferenze dell'utente
L'esempio precedente non ha verificato queste preferenze dell'utente per la loro preferenza ridotta, ma non controlla se non sono presenti preferenze.
@media (prefers-reduced-transparency: no-preference) {
…
}
Sviluppatori e designer spesso "riservano" l'esperienza utente in base a queste preferenze, in una mentalità sottrattiva. Questo si manifesta nelle query supporti come un controllo di "riduzione", dopodiché qualcosa dall'interfaccia utente viene rimosso. 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 base salutare che sia sicura da sola. Dopodiché, se l'utente è d'accordo, aggiungili all'esperienza.
Strumenti per sviluppatori
Chrome DevTools può emulare questa preferenza per una trasparenza ridotta (e altro ancora) nella scheda Rendering. Nel seguente video, scopri come attivare/disattivare le query supporti prefers-color-scheme e prefers-reduced-transparency, per mostrare le varianti chiare, scure, trasparenti e di trasparenza ridotta della scheda in vetro satinato.