Le query container iniziano ad arrivare nei browser stabili mentre il polyfill riceve un importante aggiornamento

Una Kravets

Gerald Monaco

Le query sui container sono disponibili.

Grandi notizie: una delle funzionalità per sviluppatori più richieste ha iniziato a essere implementata nei browser web. A partire da Chromium 105 e Safari 16, ora puoi creare query container basate sulle dimensioni e utilizzare valori unità di query container in questi browser. Per semplificare ancora di più l'utilizzo delle query container basate sulle dimensioni e delle unità cq, il team Aurora di Chrome ha lavorato duramente per aggiornare Container Query Polyfill per supportare più browser e casi d'uso, in modo che tu possa utilizzare questa potente funzionalità oggi stesso.

Nota: le query contenitore fanno parte della specifica css-contain-3. Questa specifica copre i nuovi valori delle unità e i tipi di contenitori di dimensioni e stili, anche se i browser vengono inizialmente lanciati solo con il supporto del contenimento delle dimensioni. Per questo motivo, in questo articolo ci concentreremo sul contenimento delle dimensioni.

Che cosa sono le query dei contenitori?

Le query contenitore sono una funzionalità CSS che consente di scrivere logiche di stile che hanno come target le caratteristiche di un elemento principale per definire i relativi elementi secondari. Puoi creare un responsive design davvero basato su componenti eseguendo una query sulla dimensione di un elemento padre. Si tratta di informazioni molto più granulari e utili rispetto ad altre, come le query supporti, che forniscono solo informazioni sulle dimensioni relative all'area visibile.

Con le query dei contenitori, puoi scrivere componenti riutilizzabili che possono essere visualizzati in modo diverso a seconda della posizione nella pagina. In questo modo, sono molto più resilienti e reattivi su pagine e modelli.

Utilizzo delle query container

Supponiamo che tu abbia del codice HTML:

<!-- card parent -->
<div class=”card-parent”>
  <div class=”card>
     <!-- card contents -->
      …
  </div>
</div>

Per utilizzare una query contenitore, devi prima impostare il contenimento per l'elemento principale che vuoi monitorare. Per farlo, imposta la proprietà container-type o utilizza l'abbreviazione container per impostare contemporaneamente il tipo di contenitore e il nome del container.

.card-parent {
  /* query the inline-direction size of this parent */
  container-type: inline-size;
}

Ora puoi utilizzare la regola @container per impostare gli stili in base all'elemento principale più prossimo. Per un design come quello nell'immagine qui sopra, in cui una scheda può passare da una colonna a due colonne, scrivi qualcosa del tipo:

@container (min-width: 300px) {
  .card {
    /* styles to apply when the card container (.card-parent in this case) is >= 300px */
    /* I.e. shift from 1-column to 2-column layout: */
    grid-template-columns: 1fr 1fr;
  }
}

Per maggiore chiarezza ed efficacia, assegna un nome al contenitore dell'elemento principale:

.card-parent {
  container-type: inline-size;
  /* set name here, or write this in one line using the container shorthand */
  container-name: card-container;
}

Quindi riscrivi il codice precedente come:

@container card-container (min-width: 300px) {
  .card {
    grid-template-columns: 1fr 1fr;
  }
}

Unità di query container

Per rendere le query sui contenitori ancora più utili, puoi utilizzare anche i valori delle unità basati sui contenitori. La tabella seguente mostra i possibili valori delle unità di misura dei contenitori e la loro corrispondenza alle dimensioni di un contenitore:

unità	rispetto a
cqw	1% della larghezza di un container di query
cqh	1% dell'altezza di un container di query
cqi	1% della dimensione in linea di un container di query
cqb	1% della dimensione del blocco di un container di query
cqmin	Il valore più piccolo di cqi o cqb
cqmax	Il valore maggiore di cqi o cqb

Un esempio di come utilizzare le unità basate su contenitori è la tipografia adattabile. Le unità basate sull'area visibile (come vh, vb, vw e vi) possono essere utilizzate per assegnare le dimensioni a qualsiasi elemento sullo schermo.

.card h2 {
  font-size: 15cqi;
}

Questo codice imposta la dimensione del carattere sul 15% delle dimensioni in linea del contenitore, il che significa che aumenterà man mano che le dimensioni in linea (larghezza) aumentano o diminuiranno man mano che diminuiscono. Per andare oltre, utilizza la funzione clamp() per impostare un limite minimo e massimo per le dimensioni dell'elemento tipografico e ridimensionarlo in modo reattivo in base alle dimensioni del contenitore:

.card h2 {
  font-size: clamp(1.5rem, 15cqi, 3rem);
}

Ora l'intestazione non supererà mai 3rem o meno di .5rem, ma occuperà il 15% delle dimensioni in linea del container in qualunque punto intermedio.

Questa demo fa un ulteriore passo avanti e aggiorna le schede più larghe in modo che abbiano una gamma di dimensioni più ridotta, poiché vengono visualizzate in una visualizzazione a due colonne.

Il polyfill per le query dei contenitori

Poiché le query dei contenitori sono una funzionalità così potente, vogliamo che tu possa sentirti a tuo agio nell'incorporarle nei tuoi progetti e sappiamo che il supporto del browser è un aspetto fondamentale. Per questo motivo, stiamo lavorando per apportare miglioramenti al Container Query Polyfill. Questo polyfill ha il supporto generale in:

• Firefox 69 e versioni successive
• Chrome 79 e versioni successive
• Edge 79 e versioni successive
• Safari 13.4 o versioni successive

Una volta compresso, ha dimensioni inferiori a 9 kB e utilizza RidimensionaObserver con MutationObserver per supportare la sintassi completa delle query @container attualmente disponibile nei browser stabili:

• Query discrete (width: 300px e min-width: 300px).
• Query su intervalli (200px < width < 400px e width < 400px).
• Le unità di lunghezza relative del contenitore (cqw, cqh, cqi, cqb, cqmin e cqmax) nelle proprietà e nei keyframe.

Utilizzo del polyfill delle query dei contenitori

Per utilizzare il polyfill, aggiungi questo tag script all'intestazione del documento:

<script type="module">
  if (!("container" in document.documentElement.style)) {
    import("https://unpkg.com/container-query-polyfill@^0.2.0");
  }
</script>

Potresti anche utilizzare un servizio per caricare il polyfill in modo condizionale in base a User-Agent o ospitarlo autonomamente nella tua origine.

Nota: tutti i browser supportano le query dei contenitori rilasciate o previste nella roadmap, pertanto ti consigliamo di evitare di raggruppare il polyfill con l'altro codice.

Per una migliore esperienza utente, consigliamo inizialmente di utilizzare il polyfill per i contenuti below the fold e di utilizzare le query @supports per sostituirlo temporaneamente con un indicatore di caricamento finché il polyfill non è pronto per mostrarlo:

@supports not (container-type: inline-size) {
  .container,
  footer {
    display: none;
  }

  .loader {
    display: flex;
  }
}

Questo indicatore di caricamento non verrà mai visualizzato su reti e dispositivi sufficientemente veloci o sui dispositivi che supportano in modo nativo le query dei container.

Nota: tieni presente che questa tecnica scambia efficacemente LCP con meno jank durante il caricamento iniziale, quindi potresti notare regressioni nel primo caso, in particolare sui dispositivi di fascia bassa.

Nuove funzionalità di Polyfill

Il polyfill aggiornato supporta:

• Regole @container nidificate.
• È supportata la nidificazione delle regole @container nelle query @supports e @media e viceversa.
• Un CSS condizionale come @supports (container-type: inline-size) verrà superato dopo il caricamento del polyfill.
• Supporto completo della sintassi CSS (non ci sono più problemi con l'inserimento dei commenti ovunque siano sintatticamente validi).
• Modalità di scrittura verticale (tramite writing-mode).
• Le unità relative dei container (cqw, cqh e così via) sono supportate all'interno di condizioni di query, dichiarazioni di proprietà e fotogrammi chiave dell'animazione. rem e em sono supportati nelle condizioni di query.
• Sintassi della query relativa al contenitore espanso:
  • Sintassi dell'intervallo (ad es. (200px < width < 400px)).
  • Query di uguaglianza (ad es. (width = 200px)).
• Elementi pseudo come ::before e ::after.
• I browser senza :is(...)/:where(...) sono supportati tramite una soluzione alternativa facoltativa
• Le query sulle funzionalità orientation e aspect-ratio.
• Filtrare correttamente le query in base alle funzionalità (ad esempio, la query su height su container: inline-size non è consentita correttamente con una modalità di scrittura orizzontale).
• Mutazione del DOM (ad esempio, elementi <style> e <link> rimossi in fase di esecuzione).

Nota:il polyfill delle query contenitore aggiornato non supporta più la sintassi delle query sulle dimensioni precedenti obsoleta, in cui un utente deve racchiudere le query sulle dimensioni in size() (ad es. size(width >= 200px)).

Limitazioni e avvisi relativi al polyfill

Se utilizzi il polyfill delle query container, devi prestare attenzione ad alcune funzionalità mancanti:

• Shadow DOM non è ancora supportato.
• Le unità relative del container (ad esempio cqw e cqh) non sono supportate nelle condizioni di query @media.
  • Safari: le unità relative al contenitore non sono supportate nei fotogrammi chiave dell'animazione precedenti alla versione 15.4.
• calc(), min(), max() o altre funzioni matematiche non sono ancora supportate nelle condizioni di query.
• Questo polyfill funziona solo con CSS in linea e dello stesso dominio. I fogli di stile multiorigine e i fogli di stile negli iframe (a meno che un polyfill non venga caricato manualmente) non sono supportati.
• Il contenimento layout e style richiede il supporto del browser sottostante:
  • Safari 15.4 e versioni successive
  • Al momento Firefox non supporta il contenimento degli stili, ma ci stiamo elaborando.

Avvisi

• Per evitare di influire su FID e CLS, il polyfill non garantisce quando verrà eseguito il primo layout, anche se viene caricato in modo sincrono, tranne per il fatto che tenterà di evitare ritardi irragionevoli del LCP. In altre parole, non dovresti mai farvi affidamento per la prima visualizzazione.
• Genera ResizeObserver Loop Errors. Anche il polyfill originale esegue questa operazione, ma è un aspetto che vale la pena sottolineare. Questo accade perché la dimensione del blocco di un container-type: inline-size probabilmente cambierà dopo la valutazione di una query, ma ResizeObserver non ha modo di dire che non ci interessano le modifiche delle dimensioni del blocco.
• Questo polyfill viene testato in base ai test della piattaforma web e ha raggiunto il 70% di superamento, poiché alcune funzionalità come le API JavaScript non vengono sottoposte a polyfill, pertanto la percentuale di superamento è intenzionalmente più vicina al 70%.
• La soluzione alternativa :where() è obbligatoria per il 2,23% degli utenti di browser precedenti a:
  • Safari 14
  • Chromium 88
  • Edge 88
  • Samsung Internet 15
  • Firefox 78