Case study sulle query container

Swetha Gopalakrishnan

Saurabh Rajpal

Query container offrono un approccio altamente dinamico e flessibile alle la progettazione. Le query container utilizzano la regola at @container. Funziona in modo simile a una query multimediale con @media, ma @container esegue query su un elemento padre per le informazioni sugli stili anziché l'area visibile e lo user agent.

Le query container fanno parte di Baseline Newly Available.

Rispondendo alle dimensioni del container, le query container consentono ai componenti di adattarsi alla loro posizione in un'interfaccia. Ad esempio, un componente di una scheda può adattare dimensioni e stili in base al contenitore in cui si trova, ad esempio una barra laterale, o una griglia nel corpo principale di una pagina.

Come mostrato nell'illustrazione seguente, puoi combinare query multimediali per layout, query contenitore per layout micro, con contenuti multimediali basati sulle preferenze degli utenti query per creare un potente sistema di progettazione reattiva. Letto ulteriori informazioni sulle query container e nuovo design reattivo.

Questo articolo fa parte di una serie che illustra in che modo le aziende di e-commerce migliorato i propri siti web con nuove funzionalità CSS e UI. Questa volta ci addentreremo sul modo in cui alcune aziende hanno usato e traggono vantaggio dalle query sui container.

redBus

redBus gestisce e pubblica un codice diverso per le versioni desktop e mobile. Dopo l'implementazione delle query container Cose da fare e pagine cargo, sono riusciti a unificare questo codice in un unico codebase per questi siti. In questo modo sono stati adattabili e salvati tempi di sviluppo. L'esempio seguente lo dimostra utilizzando la pagina di carico:

Codice

Nell'esempio seguente, .bpdpCardWrapper è il contenitore principale, denominato bpdpSection.

Se il contenitore bpdpSection ha una larghezza minima di 744 px, il valore font-size e line-height per i componenti selezionati da .bpdpCardContainer e .subTxt, .bpdpAddress è aggiornato.

//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

Tokopedia

Le pagine dei dettagli dei prodotti di Tokopedia contengono varie schede per il negozio e informazioni sul prodotto. In precedenza, il layout di questa pagina era suddiviso in tre e talvolta il nome del prodotto a sinistra era tagliato per dimensioni dello schermo (vedi il seguente video "Prima").

Per risolvere questo problema di layout, hanno adottato in modo semplice e veloce le query container. Dopo questa implementazione, sono stati in grado di avere un layout flessibile in cui il nome del prodotto era sempre completamente visibile (guarda il seguente video "Dopo").

Prima

Dopo

Codice

Il seguente codice esegue query sulla dimensione del contenitore principale denominato infowrapper. Se la larghezza massima di infowrapper è 360 px, i componenti secondari I valori width, margin, e padding sono stati modificati.

L'impostazione di container-type su inline-size esegue query sulla dimensione della direzione in linea dell'elemento principale. Nelle lingue latine, come l'inglese, questa sarà la larghezza principale, poiché il testo fluisce 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 container

Tokopedia ha individuato il proprio caso d'uso cercando i puntini di sospensione di testo sul proprio sito. Questo indicava contenitori troppo piccoli che causavano il taglio dei contenuti e disattivare la funzionalità per l'utente.

Un altro buon caso d'uso per le query sui contenitori per i siti di e-commerce è esaminare per i componenti riutilizzati. Ad esempio, potrebbe essere mostrato il pulsante Aggiungi al carrello in modo diverso in base al contenitore principale (ad esempio, solo l'icona se si trova la scheda del prodotto e l'icona con il testo se si tratta di un invito all'azione principale nella pagina). La potrebbe essere un buon candidato per le query sui container.

Puoi scegliere di apportare miglioramenti incrementali al sito. Ad esempio, potrebbero iniziare con casi d'uso più piccoli, come l'esempio di ellisse di Tokopedia, e a implementare le query container. Poi trova progressivamente altri casi migliorare il CSS.

Risorse:

• Le query del container vengono eseguite in browser stabili
• Query del container - Progettazione nel browser
• Demo di query sul container
• Demo: schede di query contenitore
• Video: Novità della UI 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 parlano di come l'e-commerce le aziende hanno tratto vantaggio dall'utilizzo di nuove funzionalità CSS e UI come le funzionalità di scorrimento animazioni, popover, query container e il selettore has().

• Perché le funzionalità dell'interfaccia utente web sono importanti per il tuo sito di e-commerce?
• Case study sulle animazioni basate sullo scorrimento
• Visualizza i case study sulle transizioni
• Case study Popover
• Case study sul selettore :has()