Controllare il layout macro e micro in una nuova era del web design responsivo.
Responsive Design Today
Oggi, quando utilizzi il termine "responsive design", molto probabilmente pensi all'utilizzo delle query supporti per modificare il layout quando ridimensioni un design dalle dimensioni di un dispositivo mobile a quelle di un tablet e infine a quelle di un computer.
Ma presto questa percezione del design responsivo potrebbe essere considerata obsoleta come l'utilizzo di tabelle per il layout di pagina.
Le media query basate sulla finestra danno a disposizione alcuni strumenti potenti, ma mancano di raffinatezza. Non sono in grado di rispondere alle esigenze degli utenti e di inserire stili reattivi nei componenti stessi.
Puoi utilizzare le informazioni sulla finestra globale per applicare uno stile ai componenti, ma questi non possiedono ancora i propri stili e ciò non funziona quando i nostri sistemi di progettazione sono basati sui componenti e non sulle 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 responsivo è proprio dietro l'angolo.
Questo fenomeno si verifica circa ogni 10 anni. 10 anni fa, intorno al 2010-2012, abbiamo assistito a un enorme cambiamento con il mobile e il responsive design, nonché all'emergere di CSS3.
Quindi, ancora una volta, l'ecosistema è pronto per alcuni cambiamenti piuttosto importanti che interesseranno i CSS. Gli ingegneri di Chrome e della piattaforma web stanno prototipando, specificando e iniziando l'implementazione per la prossima era del design responsivo.
Questi aggiornamenti includono funzionalità multimediali basate sulle preferenze degli utenti, query sui contenitori e query sui media per nuovi tipi di schermo, come gli schermi pieghevoli.
Reattivo all'utente
Le nuove funzionalità multimediali per le preferenze degli utenti ti consentono di personalizzare le esperienze web in linea con le preferenze e le esigenze specifiche dell'utente. Ciò significa che le funzionalità multimediali delle preferenze ti consentono di adattare le esperienze utente alle esperienze 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à delle preferenze rilevano le preferenze impostate da un utente nel proprio sistema operativo e contribuiscono a creare un'esperienza web più solida e personalizzata, soprattutto per le persone con esigenze di accessibilità.
prefers-reduced-motion
Gli utenti che hanno impostato le preferenze del sistema operativo per movimento ridotto richiedono meno animazioni quando utilizzano il computer in generale. Pertanto, è probabile che non apprezzino una schermata introduttiva appariscente, un'animazione di rotazione della scheda, un caricatore complesso o altre animazioni appariscenti durante l'utilizzo del web.
Con prefers-reduced-motion puoi progettare le tue pagine tenendo conto del movimento ridotto e creare un'esperienza con movimento migliorato per gli utenti che non hanno impostato questa preferenza.
Questa carta contiene informazioni su entrambi i lati. L'esperienza di movimento ridotto di base è una dissolvenza incrociata per mostrare le informazioni, mentre l'esperienza con movimento migliorato è un'inversione 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 inutili e migliora progressivamente l'esperienza per gli utenti senza queste esigenze o preferenze di accessibilità.
prefers-color-scheme
Un'altra funzionalità multimediale delle preferenze è
prefers-color-scheme. Questa funzionalità ti aiuta
a personalizzare la tua UI in base al tema preferito dall'utente. Nel proprio sistema operativo, sia su computer che su 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, lo scambio dei valori di colore è semplice. Puoi aggiornare rapidamente i valori del tema a colori, ad esempio backgroundColor e textOnPrimary, per adattarli dinamicamente al nuovo tema all'interno della media query.
Per semplificare il test di 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 barre di scorrimento scure. Ci sono alcune considerazioni che potresti non aver preso in considerazione. Ad esempio, potresti dover desaturare i colori su uno sfondo scuro per ridurre le vibrazioni visive.
Anziché utilizzare le ombre per creare profondità e portare un elemento in primo piano, potresti voler utilizzare la luce nel colore di sfondo dell'elemento per portarlo in primo piano. perché le ombre non sono efficaci su uno sfondo scuro.
I temi scuri non solo offrono un'esperienza utente più personalizzata, ma possono anche migliorare significativamente la durata della batteria negli schermi AMOLED. Questi sono gli schermi che vediamo nei nuovi smartphone di fascia alta e stanno diventando sempre più popolari sui dispositivi mobili.
Uno studio del 2018 su Androidsui 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 la UI dell'app rispetto a un tema chiaro.
Dovresti sempre offrire un'esperienza con tema scuro ai tuoi utenti ogni volta che è possibile.
Adattabile al contenitore
Uno dei settori emergenti più entusiasmanti dei CSS sono le query sui contenitori, chiamate anche spesso query sugli elementi. È difficile sottovalutare l'impatto che il passaggio dal responsive design basato sulla pagina a quello basato sul contenitore avrà sull'evoluzione dell'ecosistema di progettazione.
Ecco un esempio delle potenti funzionalità fornite dalle query sui contenitori. Puoi manipolare gli stili di qualsiasi elemento della scheda, inclusi 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 occupano spazio in un layout creato utilizzando CSS Grid. Ogni componente si adatta alla sua allocazione di spazio unica e si adatta di conseguenza.
Questo livello di flessibilità non è possibile solo con le media query.
Le query sui contenitori offrono un approccio molto più dinamico al design reattivo. Ciò significa che se inserisci questo componente della scheda in una barra laterale, in una sezione hero o all'interno di una griglia nel corpo principale di una pagina, il componente stesso possiede le proprie informazioni e dimensioni responsive in base al contenitore, non alla finestra.
Ciò richiede la regola @@container. Funziona in modo simile a una query
multimediale con @media, ma @container esegue query sul contenitore principale per
informazioni anziché sulla finestra e sullo 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. Poi scrivi una query @container
per applicare uno stile a uno qualsiasi 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 ridurre le dimensioni del carattere dell'ora quando il contenitore ha una larghezza inferiore a 850px.
Schede delle query sui container
In questo sito web demo dell'impianto, ogni scheda prodotto, inclusa quella nella sezione principale, nella barra laterale degli articoli visualizzati di recente e nella griglia dei prodotti, è lo stesso componente, con lo stesso markup.
Non sono state utilizzate query supporti per creare questo intero layout, ma solo query contenitore. In questo modo, ogni scheda prodotto può passare al layout corretto per riempire il proprio spazio. La griglia, ad esempio, utilizza un layout a colonne minmax per consentire agli elementi di fluire nel loro spazio e riorganizzare la griglia quando lo spazio è troppo compresso (il che significa che ha raggiunto la dimensione minima).
.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 almeno 350px di spazio, il layout delle schede diventa
orizzontale se impostato su display: flex, che ha una direzione flessibile
predefinita di "row".
Con meno spazio, le schede dei prodotti si impilano. Ogni scheda prodotto si adatta allo stile, cosa che sarebbe impossibile con i soli stili globali.
Combinare query sui contenitori e query supporti
Le query sui contenitori hanno molti casi d'uso, uno dei quali è un componente calendario. Puoi utilizzare le query sui contenitori per riorganizzare gli eventi del 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 del carattere degli eventi programmati in modo che si adattino meglio allo spazio.
Poi, utilizza una media query per spostare l'intero layout per le dimensioni dello schermo più piccole. Questo esempio mostra la potenza della combinazione di media query (che modificano gli stili globali o macro) con query sui contenitori (che modificano gli elementi secondari del contenitore e i relativi microstili).
Ora possiamo pensare ai layout macro e micro all'interno dello stesso componente UI per consentire decisioni di progettazione davvero sfumate.
Utilizzo delle query sui contenitori oggi
Queste demo sono ora disponibili per la riproduzione 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 per i 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 ed eseguire il debug delle query sui contenitori in DevTools.
Stili con ambito
Per creare query sui contenitori, utilizza stili con ambito con @scope per limitare la portata dei selettori.
Gli stili con ambito consentono di applicare stili specifici per i componenti per evitare conflitti di denominazione, un'operazione che molti framework e plug-in come i moduli CSS ci consentono già di fare all'interno dei framework. Gli stili con ambito ti consentono di scrivere stili incapsulati in modo nativo per i componenti con CSS leggibili senza la necessità di modificare il markup.
/* @scope (<root>#) [to (<boundary>#)]? { … } */
@scope (.tabs) to (.panel) {
:scope { /* targeting the scope root */ }
.light-theme :scope .tab { /* contextual styles */ }
}
L'ambito ti consente di creare selettori "a forma di ciambella", in cui puoi specificare
un limite superiore e uno inferiore. I selettori contenuti nella regola @scope vengono abbinati
entro questi limiti.
Un esempio è un pannello delle schede, in cui vuoi che le schede ricevano gli stili con ambito, ma che il pannello all'interno di queste schede non sia interessato da questi stili con ambito.
Adattabile al fattore di forma
Il prossimo argomento della nostra conversazione sulla nuova era del design responsivo è un cambiamento nei form factor e le crescenti possibilità di ciò che dovremo progettare come community web (ad esempio schermi che cambiano forma o realtà virtuale).
Gli schermi pieghevoli o flessibili e la progettazione per lo spanning dello schermo sono un esempio di dove possiamo vedere un cambiamento del fattore di forma oggi. Lo spanning dello schermo è un'altra specifica su cui si sta lavorando per coprire questi nuovi fattori di forma ed esigenze.
Una query
multimediale
sperimentale per lo spanning dello schermo potrebbe esserci d'aiuto. Al momento si comporta in questo modo: @media
(spanning: <type of fold>). La demo configura un layout a griglia con due colonne:
una ha una larghezza di --sidebar-width, che è 5 rem per impostazione predefinita, e l'altra è
1fr. Quando il layout viene visualizzato su un doppio schermo con una singola piega verticale, il valore di --sidebar-width viene aggiornato con il valore dell'ambiente della piega 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, il layout prevede che la barra laterale, in questo caso la navigazione, riempia 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 provare gli schermi pieghevoli nell'emulatore Chrome DevTools per eseguire il debug e prototipare lo spanning dello schermo direttamente nel browser.
Conclusione
L'esplorazione della progettazione dell'interfaccia utente oltre uno schermo piatto è un altro motivo per cui le query sui contenitori e gli stili con ambito sono così importanti. Ti offrono l'opportunità di isolare gli stili dei componenti dal layout di pagina e dagli stili globali e dagli stili utente, consentendo una progettazione reattiva più resiliente. Ciò significa che ora puoi progettare macro layout utilizzando query multimediali basate sulla pagina, incluse le sfumature che si estendono su più schermi. Allo stesso tempo, utilizza i micro layout con le query sui contenitori nei componenti e aggiungi query multimediali basate sulle preferenze dell'utente per personalizzare le esperienze utente in base alle loro esigenze e preferenze uniche.
Questo è il nuovo responsive.
Combina il layout macro con il layout micro e, in più, tiene conto della personalizzazione dell'utente e del fattore di forma.
Anche una sola di queste modifiche costituirebbe un cambiamento considerevole nel modo in cui progettiamo per il web. Ma insieme, indicano un cambiamento molto importante nel modo in cui concettualizziamo il responsive design. È il momento di pensare al design reattivo al di là delle dimensioni della finestra e iniziare a considerare 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 in autonomia.
web.dev/learnCSS
Per il momento, se vuoi migliorare le tue competenze CSS e magari rivedere alcune nozioni di base, il mio team sta lanciando un nuovo corso CSS e un nuovo riferimento completamente senza costi su web.dev. Puoi accedervi tramite web.dev/learnCSS.
Spero che questa panoramica sulla prossima era del design responsivo e su alcune delle primitive che verranno introdotte ti sia piaciuta e che tu sia entusiasta come me di ciò che questo significa per il futuro del web design.
Si apre un'enorme opportunità per la nostra community di UI di adottare stili basati su componenti, nuovi fattori di forma e creare esperienze reattive per gli utenti.