Case study sulle query container

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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.

Supporto dei browser

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Origine

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.

Immagine che mostra l'interazione tra diversi tipi di stili.
web.dev: la nuova risposta reattiva.

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

Prima (più codebase) Dopo (base di codice singolo)
Infrastruttura Infrastruttura separata (costo elevato). Stessa infrastruttura (costo ridotto).
Design UI separata ma di scarsa coerenza. Difficile da risolvere, ma possibile.
Prestazioni Facile da gestire in quanto il sistema è separato, ma duplica lo sforzo di migliorare il rendimento. Questo è specifico per pagina e funzionalità, ma il punteggio PageSpeedInsights di redBus è superiore a 80.
Sviluppo Separare i team di sviluppatori. Riduzione del tempo del 30% -40%.

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

Prima di implementare le query sui container, le parole "ISKU 10 in 1 Obeng satu..." in alto a sinistra sono tagliate per schermi di dimensioni inferiori.

Dopo

L'implementazione delle query container regola il layout mantenendo il testo all'interno dell'area visibile.

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:

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().