Le query sui container
offrono un approccio altamente dinamico e flessibile al
design responsive. Le query sui container utilizzano la regola @container. Funzionano in modo simile a una media query con @media, ma invece @container esegue una query su un container principale per ottenere informazioni sullo stile anziché sull'area visibile e sullo user agent.
Rispondendo alle dimensioni del container, le query sui container consentono ai componenti di adattarsi alla loro posizione in un'interfaccia. Ad esempio, un componente scheda può adattare le sue dimensioni e i suoi stili in base al container in cui è inserito, che si tratti di una barra laterale, una sezione hero o una griglia all'interno del corpo principale di una pagina.
Come mostrato nella seguente illustrazione, puoi combinare le media query per i layout macro, le query sui container per i layout micro e le media query basate sulle preferenze dell'utente per creare un potente sistema di responsive design. Scopri di più sulle query sui container e sul nuovo responsive design.
Questo articolo fa parte di una serie che illustra in che modo le aziende di e-commerce hanno migliorato i propri siti web utilizzando nuove funzionalità CSS e UI. Questa volta, approfondiamo in che modo alcune aziende hanno utilizzato le query sui container e ne hanno tratto vantaggio.
redBus
redBus gestisce e pubblica codice diverso per le versioni mobile e desktop. Dopo aver implementato le query sui container nelle pagine Cose da fare e Merci, è stato possibile unificare questo codice in un'unica codebase per questi siti. In questo modo, sono diventati responsive e hanno risparmiato tempo di sviluppo. L'esempio seguente illustra questo aspetto utilizzando la pagina Merci:
Codice
Nell'esempio seguente, .bpdpCardWrapper è il container principale, denominato bpdpSection.
Se il container bpdpSection ha una larghezza minima di 744 px, vengono aggiornati font-size e line-height per i componenti selezionati da .bpdpCardContainer e .subTxt, .bpdpAddress.
//Code for Container Queries
.bpdpCardWrapper {
container-type: inline-size;
container-name: bpdpSection;
}
@container bpdpSection (min-width: 744px){
.bpdpCardContainer{
font-size: 1rem;
line-height: 1.5rem;
}
.subTxt, .bpdpAddress{
font-size: 0.875rem;
line-height: 1.25rem;
}
}
Impatto
| Prima (più codebase) | Dopo (singola codebase) | |
|---|---|---|
| Infrastruttura | Infrastruttura separata (costo elevato). | Stessa infrastruttura (costo ridotto). |
| Design | UI separata, ma scarsa coerenza. | Difficile da risolvere, ma possibile. |
| Rendimento | Facile da gestire perché il sistema è separato, ma duplica l'impegno per migliorare il rendimento. | Questa pagina e funzionalità sono specifiche, ma il punteggio PageSpeedInsights di redBus è superiore a 80. |
| Sviluppo | Team di sviluppatori separati. | Riduzione del tempo del 30-40%. |
Tokopedia
Le pagine dei dettagli del prodotto (PDP) di Tokopedia contengono più schede per le informazioni sul negozio e sul prodotto. In precedenza, il layout di questa pagina era suddiviso in tre colonne e a volte il nome del prodotto a sinistra veniva troncato per le dimensioni dello schermo più piccole (vedi il video "Prima" di seguito).
Per risolvere questo problema di layout, hanno adottato facilmente e rapidamente le query sui container. Dopo questa implementazione, sono stati in grado di avere un layout flessibile in cui il nome del prodotto era sempre completamente visibile (vedi il video "Dopo" di seguito).
Prima
Dopo
Codice
Il seguente codice esegue una query sulle dimensioni del container principale denominato infowrapper.
Se la larghezza massima di infowrapper è 360 px, vengono regolati
width, margin, e padding dei componenti secondari.
L'impostazione di container-type su inline-size esegue una query sulle dimensioni della direzione in linea del genitore. Nelle lingue latine come l'inglese, questa sarebbe la larghezza del container principale, poiché il testo scorre in linea da sinistra a destra.
export const styCredibilityContainer = css`
container-name: infowrapper;
container-type: inline-size;
`;
export const styBtnShopFollow = css`
margin-left: auto;
width: 98px;
@container infowrapper (max-width: 360px) {
width: 100%;
margin-top: 2px;
margin-bottom: 8px;
padding-left: 60px;
}
`;
export const styBottomRow = css`
margin-top: 4px;
padding-left: 60px;
display: flex;
align-items: center;
@container infowrapper (max-width: 360px) {
padding-left: 0px;
}
> div {
text-align: left;
margin-top: 0 !important;
}
`;
Aspetti da considerare quando si utilizzano le query sui container
Tokopedia ha trovato il suo caso d'uso cercando l'ellissi di testo sul suo sito. Ciò indicava i container che potrebbero essere troppo piccoli, causando il troncamento dei contenuti per l'utente.
Un altro buon caso d'uso per le query sui container per i siti di e-commerce è quello di cercare i componenti riutilizzati. Ad esempio, il pulsante Aggiungi al carrello potrebbe essere visualizzato in modo diverso in base al container principale (ad esempio, solo l'icona se si trova nella scheda del prodotto e l'icona con il testo se si tratta di una call to action principale nella pagina). Il pulsante potrebbe essere un buon candidato per le query sui container.
Puoi scegliere di apportare miglioramenti incrementali al tuo sito. Ad esempio, potresti iniziare con casi d'uso più piccoli, come l'esempio di ellissi di Tokopedia, e implementare le query sui container. Poi, trova progressivamente altri casi e migliora il CSS.
Risorse:
- Container queries land in stable browsers
- Container queries-Designing in the Browser
- Container query demos
- Demo: container query cards
- Video: What's new in Web UI - I/O 2023
- Do you want to report a bug or request a new feature? We want to hear from you.
Esplora gli altri articoli di questa serie che parlano di come le aziende di e-commerce hanno tratto vantaggio dall'utilizzo di nuove funzionalità CSS e UI come animazioni basate sullo scorrimento, popover, query sui container e il selettore has().