Le query sui container offrono un approccio altamente dinamico e flessibile al design reattivo. Le query relative al container utilizzano la regola at @container. Questo metodo funziona in modo simile a una query multimediale con @media, ma @container esegue una query su un contenitore principale per ottenere informazioni sullo stile anziché sull'area visibile e sullo user agent.
query container fanno parte di Base di riferimento Newly Available.
In base alle dimensioni del container, le query relative al container consentono ai componenti di adattarsi alla loro posizione in un'interfaccia. Ad esempio, il componente di una scheda può adattare dimensioni e stili a seconda del contenitore in cui è posizionato, come una barra laterale, una sezione hero o una griglia nel corpo principale di una pagina.
Come mostrato nell'illustrazione seguente, puoi combinare query supporti per layout macro, query container per layout micro, con query supporti basate sulle preferenze dell'utente, per creare un potente sistema di progettazione adattabile. Leggi ulteriori informazioni sulle query dei container e sul nuovo design adattabile.
Questo articolo fa parte di una serie che illustra in che modo le aziende di e-commerce hanno migliorato i loro siti web utilizzando le nuove funzionalità CSS e dell'interfaccia utente. Questa volta vedremo in che modo alcune aziende hanno utilizzato le query relative ai container e ne hanno usufruito.
redBus
redBus gestisce e pubblica diversi codici per le sue versioni desktop e mobile. Dopo aver implementato le query sui container nelle pagine Cose da fare e Cargo, l'azienda è riuscita a unificare questo codice in un unico codebase per questi siti. In questo modo sono state reattive e hanno consentito di risparmiare tempo di sviluppo. L'esempio seguente lo dimostra utilizzando la pagina cargo:
Codice
Nell'esempio seguente, .bpdpCardWrapper è il contenitore principale,
denominato bpdpSection.
Se il contenitore 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 (singolo 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 lo sforzo per migliorare le prestazioni. | Questa è una pagina e una funzionalità specifiche, ma il punteggio PageSpeedInsights di redBus è superiore a 80. |
| Sviluppo | Separare i team di sviluppatori. | 30% - 40% di riduzione nel tempo. |
Tokopedia
Le pagine dei dettagli del prodotto 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 talvolta il nome del prodotto a sinistra veniva tagliato per schermi di dimensioni inferiori (vedi il seguente video "Prima").
Per risolvere questo problema di layout, l'azienda ha adottato in modo facile e veloce le query container. Dopo questa implementazione, l'azienda è riuscita ad avere un layout flessibile in cui il nome del prodotto era sempre completamente visibile (vedi il seguente video "Dopo".
Prima
Dopo
Codice
Il codice seguente esegue una query sulle dimensioni del contenitore principale denominato infowrapper.
Se la larghezza massima di infowrapper è 360 px, i componenti secondari width, margin, e padding vengono modificati.
L'impostazione di container-type su inline-size esegue una query sulla dimensione delle indicazioni in linea dell'elemento padre. Nelle lingue latine come l'inglese questa corrisponde alla larghezza del contenitore principale, dal momento che 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 query container
Tokopedia ha trovato il proprio caso d'uso cercando i puntini di sospensione di testo sul sito. Questo indicava container che potrebbero essere troppo piccoli, causando l'interruzione dei contenuti per l'utente.
Un altro buon caso d'uso per le query relative ai contenitori per i siti di e-commerce è quello di prestare attenzione ai componenti riutilizzati. Ad esempio, il pulsante Aggiungi al carrello potrebbe essere visualizzato in modo diverso in base al contenitore principale (ad es. solo l'icona se è presente nella scheda del prodotto e l'icona con testo se è un invito all'azione principale nella pagina). Il pulsante potrebbe essere un buon candidato per le query del container.
Puoi scegliere di apportare miglioramenti incrementali al sito. Ad esempio, puoi iniziare con casi d'uso più piccoli come l'esempio dell'ellisse di Tokopedia e implementare le query dei container in questa pagina. Poi, trova progressivamente più richieste e migliora il CSS.
Risorse:
- Le query sui container vengono inviate a browser stabili
- Query container - Progettazione nel browser
- Demo delle query del container
- Demo: schede delle query relative al container
- Video: Novità dell'interfaccia utente web - I/O 2023
- Vuoi segnalare un bug o richiedere una nuova funzionalità? Vogliamo conoscere la tua opinione.
Esplora gli altri articoli di questa serie che illustrano i vantaggi per le aziende di e-commerce dall'utilizzo di nuove funzionalità CSS e UI, come animazioni con scorrimento, popover, query relative al contenitore e il selettore has().