Controllo del macro e micro layout in una nuova era del responsive web design.
Responsive design oggi
Oggi, quando utilizzi il termine "responsive design", molto probabilmente pensi all'utilizzo delle query supporti per modificare il layout quando redimensioni un design dalle dimensioni per dispositivi mobili a quelle per tablet e desktop.
Tuttavia, a breve, questa percezione del design responsive potrebbe essere considerata obsoleta come l'utilizzo delle tabelle per il layout della pagina.
Le query sui media basate sul viewport offrono alcuni strumenti potenti, ma non sono molto raffinate. Non sono in grado di rispondere alle esigenze degli utenti e di inserire stili responsive nei componenti stessi.
Puoi utilizzare le informazioni globali del viewport per applicare stili ai componenti, ma questi non possiedono ancora i propri stili e questo non funziona quando i nostri sistemi di progettazione sono basati su componenti e non su pagine.
La buona notizia è che l'ecosistema sta cambiando e sta cambiando piuttosto rapidamente. Il CSS è in continua evoluzione e una nuova era del design responsive è all'orizzonte.
Questo accade ogni 10 anni circa. 10 anni fa, intorno al 2010-2012, abbiamo assistito a un enorme cambiamento con il mobile e il responsive design e con l'emergere di CSS3.
Di conseguenza, ancora una volta, l'ecosistema è pronto per alcune modifiche piuttosto importanti al CSS. Gli ingegneri di Chrome e della piattaforma web sviluppano prototipi, specifiche e stanno iniziando l'implementazione per la prossima era del design responsive.
Questi aggiornamenti includono funzionalità multimediali basate sulle preferenze degli utenti, query dei contenitori e query multimediali per nuovi tipi di schermi, come quelli pieghevoli.
Adattabile all'utente
Le nuove funzionalità multimediali per le preferenze utente ti consentono di personalizzare le esperienze web in base alle preferenze e alle esigenze specifiche dell'utente. Ciò significa che le funzionalità dei contenuti multimediali delle preferenze ti consentono di adattare le tue esperienze utente a quelle dei tuoi utenti.
Queste funzionalità multimediali per le preferenze degli utenti includono:
prefers-reduced-motionprefers-contrastprefers-reduced-transparencyprefers-color-schemeinverted-colors- E altro ancora
Le funzionalità di preferenza rilevano le preferenze impostate dall'utente nel suo sistema operativo e contribuiscono a creare un'esperienza web più solida e personalizzata, soprattutto per chi ha esigenze di accessibilità.
prefers-reduced-motion
Gli utenti che hanno impostato le preferenze del sistema operativo per la motilità ridotta richiedono meno animazioni quando usano il computer in generale. Pertanto, è probabile che non apprezzino una schermata introduttiva appariscente, un'animazione di capovolgimento delle schede, un caricamento intricato o altre animazioni appariscenti mentre navigano sul web.
Con prefers-reduced-motion puoi progettare le tue pagine tenendo conto dell'animazione ridotta e creare un'esperienza con animazione migliorata per chi non ha impostato questa preferenza.
Questa scheda contiene informazioni su entrambi i lati. L'esperienza di base con movimento ridotto è una transizione sfumata per mostrare queste informazioni, mentre l'esperienza con movimento migliorato è una rotazione della scheda.
Prefers-reduced-motion non deve significare "nessun movimento", poiché il movimento è fondamentale per trasmettere informazioni online. Fornisci invece un'esperienza di base solida che guidi gli utenti senza movimenti non necessari e migliorala progressivamente per gli utenti senza queste preferenze o necessità di accessibilità.
prefers-color-scheme
Un'altra funzionalità dei contenuti multimediali delle preferenze è
prefers-color-scheme. Questa funzionalità ti consente di personalizzare l'interfaccia utente in base al tema preferito dall'utente. Nel loro sistema operativo, che si tratti di un computer o di un dispositivo mobile, gli utenti possono impostare una preferenza per i temi chiaro, scuro o automatico, che cambiano a seconda dell'ora del giorno.
Se configuri la pagina utilizzando le proprietà personalizzate CSS, scambiare i valori di colore è un gioco da ragazzi. Puoi aggiornare rapidamente i valori del tema a colori, ad esempio backgroundColor e textOnPrimary, per adattarli in modo dinamico al nuovo tema all'interno della query sui media.
Per testare più facilmente alcune di queste query sulle preferenze, puoi utilizzare DevTools per l'emulazione anziché aprire ogni volta le preferenze di sistema.
Progettare per il tema scuro
Quando progetti per un tema scuro, non si tratta solo di invertire i colori di sfondo e del testo o di avere barre di scorrimento scure. Esistono alcune considerazioni che potresti non conoscere. Ad esempio, potresti dover desaturare i colori su uno sfondo scuro per ridurre la vibrazione visiva.
Anziché utilizzare le ombre per creare profondità e mettere in evidenza un elemento, potresti scegliere di usare la luce nel colore di sfondo dell'elemento per metterlo in evidenza. Questo accade perché le ombre non saranno altrettanto efficaci su uno sfondo scuro.
I temi scuri non solo offrono un'esperienza utente più personalizzata, ma possono anche migliorare notevolmente la durata della batteria negli schermi AMOLED. Sono gli schermi che vediamo negli smartphone di fascia alta più recenti e stanno diventando sempre più popolari sui dispositivi mobili.
Un studio del 2018 su Android sui temi scuri ha mostrato un risparmio di consumo energetico fino al 60%, a seconda della luminosità dello schermo e dell'interfaccia utente complessiva. La statistica del 60% è stata ottenuta confrontando la schermata di riproduzione di YouTube con un video in pausa con la luminosità dello schermo al 100% utilizzando il tema scuro per l'interfaccia utente dell'app rispetto a un tema chiaro.
Devi sempre offrire un'esperienza con tema scuro ai tuoi utenti, se possibile.
Adattabile al contenitore
Una delle aree emergenti più interessanti in CSS è costituita dalle query sui contenitori, spesso chiamate anche query sugli elementi. È difficile sottovalutare l'impatto che il passaggio dal responsive design basato su pagine a quello basato su contenitori avrà sull'evoluzione dell'ecosistema del design.
Di seguito è riportato un esempio delle potenti funzionalità offerte dalle query sui contenitori. Puoi manipolare uno qualsiasi degli stili dell'elemento della scheda, tra cui l'elenco dei link, le dimensioni dei caratteri e il layout generale in base al contenitore principale:
Questo esempio mostra due componenti identici con due dimensioni del contenitore diverse, entrambi che occupano spazio in un layout creato utilizzando CSS Grid. Ogni componente si adatta allo spazio assegnato e adotta lo stile di conseguenza.
Questa flessibilità non è possibile solo con le query sui contenuti multimediali.
Le query contenitore offrono un approccio molto più dinamico al design responsive. Ciò significa che se inserisci questo componente della scheda in una barra laterale o in una sezione hero o in una griglia all'interno del corpo principale di una pagina, il componente stesso possiede le sue informazioni e dimensioni responsive in base al contenitore, non al viewport
Questa operazione richiede la regola at @container. Il funzionamento è simile a una query media con @media, ma @container esegue query sul contenitore principale per recuperare le informazioni anziché sul viewport e sull'user agent.
.card {
container-type: inline-size;
}
@container (max-width: 850px) {
.links {
display: none;
}
.time {
font-size: 1.25rem;
}
/* ... */
}
Innanzitutto, imposta il contenimento sull'elemento principale. Quindi, scrivi una query @container per applicare uno stile a uno degli elementi all'interno del contenitore in base alle sue dimensioni, utilizzando min-width o max-width.
Il codice riportato sopra utilizza max-width e imposta i link su display:none, oltre a diminuire la dimensione del carattere del tempo quando il contenitore è largo meno di 850px.
Schede di query dei contenitori
In questo sito web di una pianta dimostrativa, tutte le schede di prodotto, inclusa quella nell'hero, la barra laterale degli articoli visualizzati di recente e la griglia di prodotti, sono lo stesso componente esatto, con lo stesso markup.
Per creare l'intero layout non vengono utilizzate nessuna query sui media, ma solo query sul contenitore. In questo modo, ogni scheda di prodotto può passare al layout corretto per riempire lo spazio a disposizione. La griglia, ad esempio, utilizza un layout delle colonne minmax per consentire agli elementi di adattarsi allo spazio a disposizione e riorganizzare la griglia quando lo spazio è troppo compresso (ovvero ha raggiunto le dimensioni minime).
.product {
container-type: inline-size;
}
@container (min-width: 350px) {
.card-container {
padding: 0.5rem 0 0;
display: flex;
}
.card-container button {
/* ... */
}
}
Quando nella griglia è presente uno spazio di almeno 350px, il layout della scheda diventa orizzontale perché viene impostato su display: flex, che ha un valore flex-direction predefinito di "row".
Con meno spazio, le schede di prodotto vengono impilate. Ogni scheda di prodotto si applica uno stile, cosa impossibile solo con gli stili globali.
Combinare query contenitore con query sui contenuti multimediali
Le query dei contenitori hanno molti casi d'uso, uno dei quali è un componente del calendario. Puoi utilizzare le query del contenitore per riorganizzare gli eventi nel calendario e altri segmenti in base alla larghezza disponibile del contenitore principale.
Questo contenitore demo esegue query per modificare il layout e lo stile della data e del giorno della settimana del calendario, nonché per regolare i margini e le dimensioni dei caratteri degli eventi pianificati in modo che si adattino meglio allo spazio.
Poi, utilizza una query sui media per spostare l'intero layout per dimensioni dello schermo più piccole. Questo esempio mostra quanto sia efficace combinare le query sui media (modificando gli stili globali o macro) con le query sui contenitori (modificando gli elementi secondari del contenitore e i relativi micro stili).
Ora possiamo pensare a layout macro e micro all'interno dello stesso componente dell'interfaccia utente per consentire decisioni di design molto ben definite.
Utilizzo delle query sui container oggi
Ora è possibile giocare con queste demo dietro un flag in Chrome Canary. Vai a
about://flags in Canary e attiva il flag #enable-container-queries.
In questo modo verrà attivato il supporto dei valori @container, inline-size e block-size per la proprietà contain e l'implementazione della griglia LayoutNG.
Il flag attiva anche le funzionalità corrispondenti di Chrome DevTools. Scopri come ispezionare e eseguire il debug delle query dei contenitori in DevTools.
Stili basati su ambito
Per creare query sui contenitori, utilizza gli stili con ambito con @scope per limitare la copertura dei selettori.
Gli stili basati sugli ambiti consentono di applicare stili specifici ai componenti per evitare collisioni dei nomi, un'operazione che molti framework e plug-in come i moduli CSS ci consentono già di eseguire all'interno dei framework. Gli stili basati su ambito ti consentono di scrivere stile incapsulati in modo nativo per i componenti con CSS leggibile senza dover modificare il markup.
/* @scope (<root>#) [to (<boundary>#)]? { … } */
@scope (.tabs) to (.panel) {
:scope { /* targeting the scope root */ }
.light-theme :scope .tab { /* contextual styles */ }
}
L'ambito consente di creare selettori a forma di ciambella, in cui puoi specificare un limite superiore e inferiore. I selettori contenuti nella regola @scope vengono abbinati tra questi limiti.
Un esempio di questo è un riquadro di schede in cui vuoi che le schede ricevano gli stili basati sugli ambiti, ma che il riquadro all'interno di queste schede non sia interessato da questi stili.
Adattabile al fattore di forma
Il prossimo argomento della nostra conversazione sulla nuova era del design responsive è un cambio nei fattori di forma e le crescenti possibilità di ciò che dovremo progettare come community web (ad esempio schermo che cambia forma o virtuale realtà).
Gli schermi pieghevoli o flessibili e la progettazione per l'espansione dello schermo sono un esempio di come oggi possiamo osservare un cambiamento del fattore di forma. La funzionalità di espansione dello schermo è un'altra specifica in fase di sviluppo per soddisfare queste nuove esigenze e questi nuovi fattori di forma.
Una query media sperimentale per l'intera schermata potrebbe aiutarci. Al momento si comporta nel seguente modo: @media
(spanning: <type of fold>). La demo configura un layout a griglia con due colonne:
una ha una larghezza di --sidebar-width, che è 5rem per impostazione predefinita, mentre l'altra è
1fr. Quando il layout viene visualizzato su un doppio schermo con un singolo pliegue verticale, il valore di --sidebar-width viene aggiornato con il valore dell'ambiente del pliegue a sinistra.
:root {
--sidebar-width: 5rem;
}
@media (spanning: single-fold-vertical) {
--sidebar-width: env(fold-left);
}
main {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
}
In questo modo viene attivato un layout in cui la barra laterale, in questo caso la navigazione, riempie lo spazio di una delle pieghe, mentre l'interfaccia utente dell'app riempie l'altra. In questo modo si evita una "piega" nell'interfaccia utente.
Puoi testare gli schermi pieghevoli nell'emulatore di Chrome DevTools per facilitare il debug e creare un prototipo dello schermo che si estende direttamente nel browser.
Conclusione
Esplorare il design dell'interfaccia utente oltre uno schermo piatto è un altro motivo per cui le query dei contenitori e gli stili basati sugli ambiti sono così importanti. Ti offrono l'opportunità di isolare gli stili dei componenti dal layout della pagina e dagli stili globali e dagli stili utente, consentendo un design responsive più resiliente. Ciò significa che ora puoi progettare macro layout utilizzando query sui media basate sulle pagine, incluse le sfumature che si estendono sullo schermo. Allo stesso tempo, utilizza micro layout con query dei contenitori sui componenti e aggiungi query sui contenuti multimediali in base alle preferenze degli utenti per personalizzare le loro esperienze in base alle loro preferenze e necessità uniche.
Questa è la nuova versione adattabile.
Combina il macro layout con il micro layout e, in aggiunta, prende in considerazione la personalizzazione e il fattore di forma dell'utente.
Ognuna di queste modifiche da sola costituirebbe un cambiamento considerevole nel modo in cui progettiamo per il web. Ma, se combinati, rappresentano un cambiamento davvero significativo nel modo in cui concettualizziamo il responsive design. È arrivato il momento di pensare al design responsive oltre le dimensioni del viewport e di iniziare a prendere in considerazione tutti questi nuovi assi per esperienze migliori basate su componenti e personalizzate.
La nuova era del responsive design è arrivata e puoi già iniziare a esplorarla.
web.dev/learnCSS
Per il momento, se vuoi migliorare le tue competenze CSS e magari ripassare alcune nozioni di base, il mio team sta lanciando un nuovo corso e un nuovo riferimento CSS totalmente senza costi su web.dev. Puoi accedervi tramite web.dev/learnCSS.
Spero che questa panoramica della prossima era del design responsive e di alcune delle primitive che la accompagneranno ti sia piaciuta. Spero inoltre che tu sia emozionato quanto me per ciò che questo significa per il futuro del web design.
Ci offre un'enorme opportunità come community di UI per adottare stili basati su componenti, nuovi fattori di forma e creare esperienze dinamiche per gli utenti.