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

Una Kravets

Gerald Monaco

Sono arrivate le query container.

Ottime notizie: una delle funzionalità per sviluppatori più richieste è stata introdotta nei browser web. A partire da Chromium 105 e Safari 16, ora puoi creare query contenitore basate sulle dimensioni e utilizzare i valori delle unità di query del contenitore in questi browser. Per semplificare ancora di più l'utilizzo delle query dei 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 sentirti a tuo agio oggi stesso.

Nota: le query sul container fanno parte della specifica CSS-contain-3. Questa specifica riguarda i nuovi valori delle unità e i tipi di contenitori per dimensioni e stile, anche se all'inizio i browser verranno lanciati solo con il supporto del contenitore delle dimensioni. Per questo motivo, in questo articolo ci concentreremo sul contenimento delle dimensioni.

Che cosa sono le query container?

Le query contenitore sono una funzionalità CSS che ti consente di scrivere una logica di stile che ha come target le funzionalità di un elemento principale per definire lo stile dei relativi elementi secondari. Puoi creare un design reattivo basato su componenti veramente facendo una query sulle dimensioni di un elemento padre. Si tratta di informazioni molto più granulari e utili rispetto a quelle relative alle query supporti, che forniscono solo informazioni sulle dimensioni dell'area visibile.

Con le query container, puoi scrivere componenti riutilizzabili che possono avere un aspetto diverso a seconda della posizione nella pagina in cui si trovano. Questo li rende molto più resilienti e reattivi nelle pagine e nei modelli.

Utilizzo delle query container

Supponi di avere 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 sull'elemento principale che vuoi monitorare. A questo scopo, imposta la proprietà container-type o usa l'abbreviazione container per impostare contemporaneamente il tipo e il nome del contenitore.

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

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

@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 fare in modo che sia più chiaro ed esplicito, 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 segue:

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

Unità di query container

Per rendere ancora più utili le query sui container, puoi utilizzare anche i valori delle unità basate su container. La tabella seguente mostra i possibili valori delle unità container e la corrispondenza con le 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% delle dimensioni in linea di un container di query
cqb	1% delle dimensioni del blocco di un container di query
cqmin	Il valore minore di cqi o cqb
cqmax	Il valore maggiore di cqi o cqb

Un esempio di come utilizzare le unità basate su container è la tipografia reattiva. Puoi utilizzare le unità basate sull'area visibile (come vh, vb, vw e vi) per ridimensionare qualsiasi elemento sullo schermo.

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

Questo codice renderà la dimensione del carattere corrispondente al 15% delle dimensioni in linea del contenitore, il che significa che diventerà più grande con l'aumento della dimensione in linea (larghezza) o minore man mano che diminuisce. Per andare oltre, usa la funzione clamp() per definire un limite di dimensione minimo e massimo alla tipografia, nonché per ridimensionarla in base alle dimensioni del contenitore:

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

Ora l'intestazione non supererà mai 3rem o .5rem, ma richiederà il 15% delle dimensioni in linea del container in qualsiasi punto del mezzo.

Questa demo fa un ulteriore passo in avanti e aggiorna le schede più grandi in modo che abbiano un intervallo di dimensioni inferiore, poiché sono presenti nella visualizzazione a due colonne.

Il polyfill della query container

Poiché le query relative ai container sono una funzionalità così potente, vogliamo che tu sia in grado di incorporarle nei tuoi progetti e sappiamo che il supporto dei browser è una parte importante di questo processo. Per questo motivo, stiamo lavorando per apportare miglioramenti a Container Query Polyfill. Questo polyfill è supportato in generale in:

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

La sua dimensione è inferiore a 9 kb quando è compresso e utilizza RefineObservationr con MutationObservationr per supportare la sintassi delle query @container completa, attualmente disponibile nei browser stabili:

• Query discrete (width: 300px e min-width: 300px).
• Query intervallo (200px < width < 400px e width < 400px).
• Unità di lunghezza relativa del contenitore (cqw, cqh, cqi, cqb, cqmin ecqmax) nelle proprietà e nei fotogrammi chiave.

Utilizzo del polyfill della query del container

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 voler utilizzare un servizio per consegnare in modo condizionale il polyfill basato su User-Agent oppure ospitarlo autonomamente sulla tua origine.

Nota: tutti i browser supportano le query dei container rilasciate o sulla relativa roadmap, quindi ti consigliamo di evitare di raggruppare il polyfill con l'altro codice.

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

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

  .loader {
    display: flex;
  }
}

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

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

Nuove funzionalità di Polyfill

Il polyfill aggiornato supporta:

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

Nota:il polyfill aggiornato delle query del container non supporta più una sintassi delle query sulle dimensioni precedenti obsoleta in cui un utente deve eseguire il wrapping delle query sulle dimensioni in size() (ad es. size(width >= 200px)).

Limitazioni e avvisi di polyfill

Se utilizzi il polyfill delle query container, mancano alcune funzionalità:

• Il DOM shadow non è ancora supportato.
• Le unità relative al contenitore (ad es. 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 della stessa origine. I fogli di stile con più origini e i fogli di stile negli iframe (a meno che un polyfill non venga caricato manualmente) non sono supportati.
• Il contenimento di layout e style richiede il supporto del browser sottostante:
  • Safari 15.4 o versioni successive
  • Al momento Firefox non supporta il contenimento degli stili, ma ci sta elaborando.

Avvisi

• Per evitare un impatto su FID e CLS, il polyfill non fornisce alcuna garanzia circa quando verrà eseguito il primo layout, anche se viene caricato in modo sincrono, tranne per il fatto che cercherà di evitare irragionevolmente ritardare l'LCP. In altre parole, non dovresti mai fare affidamento su questo strumento per la prima visualizzazione.
• Genera ResizeObserver Loop Errors. Anche il polyfill originale lo fa, ma vale la pena di distinguerlo. Ciò si verifica perché la dimensione del blocco di un container-type: inline-size probabilmente cambierà dopo aver valutato una query, ma ResizeObserver non ha modo di dire che non ci interessano le modifiche alle dimensioni del blocco.
• Questo polyfill viene testato rispetto ai Web Platform Test e raggiunge il 70% di superamento, poiché alcune funzionalità, come le API JavaScript, non vengono polyfill, quindi la percentuale di superamento è intenzionalmente più vicina al 70%.
• La soluzione alternativa :where() è necessaria per il 2,23% degli utenti dei browser precedenti a:
  • Safari 14
  • Chromium 88
  • Edge 88
  • Internet Samsung 15
  • Firefox 78