Controllare il layout macro e micro in una nuova era del responsive web design.
Responsive design oggi
Oggi, quando si utilizza il termine "responsive design", è molto probabile che si pensi all'utilizzo delle query supporti per modificare il layout quando si ridimensiona un design dalle dimensioni per dispositivi mobili a quelle per tablet e desktop.
Ma presto questa percezione del responsive design potrebbe essere considerata obsoleta quanto l'utilizzo di tabelle per il layout di pagina.
Le query supporti basate sull'area visibile offrono alcuni strumenti potenti, ma mancano di molta precisione. Non sono in grado di rispondere alle esigenze degli utenti e di inserire stili adattabili nei componenti stessi.
Puoi utilizzare le informazioni globali sulla viewport per applicare uno stile ai componenti, ma questi non sono ancora proprietari dei loro stili e questo 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 lo sta facendo molto rapidamente. Il CSS si sta evolvendo e una nuova era del responsive design è alle porte.
Questo accade circa ogni 10 anni. Dieci anni fa, intorno al 2010-2012, abbiamo assistito a un enorme cambiamento con il mobile e il responsive design e l'emergere di CSS3.
Quindi, ancora una volta, l'ecosistema è pronto per alcuni cambiamenti piuttosto importanti per i CSS. Gli ingegneri di Chrome e di tutta la piattaforma web stanno creando prototipi, specifiche e implementazioni per la prossima era del responsive design.
Questi aggiornamenti includono funzionalità multimediali basate sulle preferenze dell'utente, query container e query supporti per nuovi tipi di schermi, come quelli pieghevoli.
Reattività alle richieste dell'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 caratteristiche dei contenuti multimediali di preferenza ti consentono di adattare le tue esperienze utente alle esperienze degli utenti.
Queste caratteristiche dei contenuti multimediali basate sulle preferenze dell'utente includono:
prefers-reduced-motionprefers-contrastprefers-reduced-transparencyprefers-color-schemeinverted-colors- E altro ancora
Le funzionalità di preferenza rilevano le preferenze impostate da un utente nel proprio sistema operativo e contribuiscono a creare un'esperienza web più solida e personalizzata, in particolare per gli utenti con esigenze di accessibilità.
prefers-reduced-motion
Gli utenti che hanno impostato le preferenze del sistema operativo per il movimento ridotto richiedono meno animazioni quando utilizzano il computer in generale. Pertanto, è probabile che non apprezzino una schermata introduttiva appariscente, un'animazione di rotazione delle schede, 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 chi non ha impostato questa preferenza.
Questa tessera contiene informazioni su entrambi i lati. L'esperienza di base con movimento ridotto è una dissolvenza incrociata per mostrare queste informazioni, mentre l'esperienza con movimento avanzato è un capovolgimento della scheda.
Prefers-reduced-motion non dovrebbe significare "nessun movimento", poiché il movimento è fondamentale per trasmettere informazioni online. Invece, fornisci un'esperienza di base solida che guidi gli utenti senza movimenti non necessari e applica il potenziamento progressivo a tale esperienza per gli utenti che non hanno queste esigenze o preferenze di accessibilità.
prefers-color-scheme
Un'altra caratteristica multimediale di preferenza è
prefers-color-scheme. Questa funzionalità ti consente di personalizzare la UI in base al tema preferito dall'utente. Nel loro 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 dei colori è semplice. Puoi aggiornare rapidamente i valori del tema cromatico, come backgroundColor e textOnPrimary, per adattarli dinamicamente al nuovo tema all'interno della query supporti.
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.
Progettazione per il tema scuro
Quando si progetta per un tema scuro, non si tratta solo di invertire i colori dello sfondo e del testo o di utilizzare barre di scorrimento scure. Ci sono alcune considerazioni che potresti non aver fatto. 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 risalto un elemento, puoi utilizzare la luce nel colore di sfondo dell'elemento per metterlo in risalto. Questo perché le ombre non sono 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. Questi sono gli schermi che vediamo nei nuovi smartphone di fascia alta e stanno diventando sempre più popolari sui dispositivi mobili.
Uno studio di Android del 2018 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'UI dell'app rispetto a un tema chiaro.
Se possibile, dovresti sempre offrire agli utenti un'esperienza con il tema scuro.
Adattabile al contenitore
Una delle aree emergenti più interessanti dei CSS sono le query container, spesso chiamate anche query elemento. È difficile sottovalutare l'impatto che il passaggio dal responsive design basato su pagina a quello basato su container avrà sull'evoluzione dell'ecosistema del design.
Ecco un esempio delle potenti funzionalità offerte dalle query dei container. Puoi manipolare qualsiasi stile dell'elemento della scheda, inclusi l'elenco di link, le dimensioni dei caratteri e il layout generale in base al contenitore principale:
Questo esempio mostra due componenti identici con due dimensioni di container diverse, che occupano entrambi spazio in un layout creato utilizzando CSS Grid. Ogni componente si adatta allo spazio unico assegnato e si adatta di conseguenza.
Questo livello di flessibilità non è possibile solo con le query supporti.
Le query container forniscono un approccio molto più dinamico al responsive design. Ciò significa che se inserisci questo componente scheda in una barra laterale o in una sezione hero o all'interno di una griglia nel corpo principale di una pagina, il componente stesso possiede le sue informazioni adattive e le sue dimensioni in base al container, non all'area visibile.
Ciò richiede la regola @ @container. Funziona in modo simile a una query supporti con @media, ma @container esegue una query sul contenitore principale per ottenere informazioni anziché sulla viewport 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 qualsiasi elemento 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 container è largo meno di 850px.
Schede di query del container
In questo sito web di esempio di piante, ciascuna delle schede dei prodotti, inclusa quella nell'hero, la barra laterale degli articoli visualizzati di recente e la griglia dei prodotti, sono tutte esattamente lo stesso componente, con lo stesso markup.
Per creare l'intero layout non vengono utilizzate query supporti, ma solo query container. In questo modo, ogni scheda di prodotto può passare al layout appropriato per riempire lo spazio. Ad esempio, la griglia utilizza un layout di colonna minmax per consentire agli elementi di fluire nel loro spazio e di riorganizzare la griglia quando lo spazio è troppo compresso (ovvero quando 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 almeno 350px di spazio, il layout della scheda diventa orizzontale impostandolo su display: flex, che ha una direzione flessibile predefinita di "row".
Se lo spazio è ridotto, le schede dei prodotti vengono impilate. Ogni scheda prodotto ha uno stile proprio, cosa che sarebbe impossibile con i soli stili globali.
Combinazione di query contenitore con query supporti
Le query container hanno molti casi d'uso, uno dei quali è un componente calendario. Puoi utilizzare le query container per modificare il layout degli eventi nel calendario e di altri segmenti in base alla larghezza disponibile del relativo elemento 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 pianificati per adattarli meglio allo spazio.
Poi, utilizza una query supporti per spostare l'intero layout per schermi di dimensioni inferiori. Questo esempio mostra quanto sia efficace combinare le query supporti (regolando gli stili globali o macro) con le query container (regolando gli elementi secondari del container e i relativi microstili).
Ora possiamo pensare ai layout macro e micro all'interno dello stesso componente della UI per consentire alcune decisioni di progettazione davvero interessanti.
Utilizzo delle query container oggi
Queste demo sono ora disponibili per essere utilizzate con 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 di LayoutNG Grid.
Il flag attiva anche le funzionalità di Chrome DevTools corrispondenti. Scopri come esaminare ed eseguire il debug delle query container in DevTools.
Stili con ambito
Per sfruttare le query container, utilizza gli stili con ambito con @scope per limitare la portata dei selettori.
Gli stili con ambito consentono di applicare uno stile specifico ai 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 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 */ }
}
La definizione dell'ambito 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 tra questi limiti.
Un esempio potrebbe essere un pannello di schede, in cui vuoi che le schede ricevano gli stili con ambito, ma il pannello all'interno di queste schede non deve essere interessato da questi stili con ambito.
Adattabile al fattore di forma
Il prossimo argomento della nostra conversazione sulla nuova era del responsive design è un cambiamento dei fattori di forma e le crescenti possibilità di ciò per cui dovremo progettare come community web (ad esempio schermi che cambiano forma o realtà virtuale).
Gli schermi pieghevoli o flessibili e la progettazione per l'estensione dello schermo sono un esempio di come oggi possiamo assistere a un cambiamento del fattore di forma. Inoltre, la suddivisione dello schermo è un'altra specifica su cui si sta lavorando per coprire questi nuovi fattori di forma ed esigenze.
In questo caso, potrebbe essere utile una query supporti sperimentale per lo spanning dello schermo. 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 per impostazione predefinita è 5rem, 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, viene abilitato un layout in cui la barra laterale, in questo caso la navigazione, riempie lo spazio di una delle pieghe, mentre la UI dell'app riempie l'altra. In questo modo si evita una "piega" nella UI.
Puoi testare gli schermi pieghevoli nell'emulatore di Chrome DevTools per facilitare il debug e la prototipazione della suddivisione dello schermo direttamente nel browser.
Conclusione
Esplorare la progettazione UI oltre uno schermo piatto è un altro motivo per cui le query container e gli stili con ambito sono così importanti. Ti consentono di isolare gli stili dei componenti dal layout di pagina, dagli stili globali e dagli stili utente, consentendo un responsive design più resiliente. Ciò significa che ora puoi progettare layout macro utilizzando query supporti basate su pagine, incluse le sfumature di estensione dello schermo. Allo stesso tempo, utilizza micro layout con query contenitore sui componenti e aggiungi query supporti basate sulle preferenze dell'utente per personalizzare le esperienze utente in base alle sue preferenze ed esigenze uniche.
Questo è il nuovo responsive.
Combina il layout macro con il layout micro e, oltre a tutto questo, tiene conto della personalizzazione dell'utente e del fattore di forma.
Ognuna di queste modifiche da sola costituirebbe un cambiamento considerevole nel modo in cui progettiamo per il web. Tuttavia, nel loro insieme, rappresentano un cambiamento davvero importante nel modo in cui concettualizziamo il responsive design. È il momento di pensare al responsive design oltre le dimensioni dell'area visibile 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.
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 completamente senza costi e un riferimento su web.dev. Puoi accedervi tramite web.dev/learnCSS.
Spero che questa panoramica sulla prossima era del responsive design e su alcune delle primitive che la accompagneranno vi sia piaciuta e spero anche che siate entusiasti quanto me di ciò che questo significa per il futuro del web design.
Questo apre un'enorme opportunità per noi come community di UI di adottare stili basati su componenti, nuovi fattori di forma e creare esperienze adattabili agli utenti.