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.
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
emin-width: 300px
). - Query intervallo (
200px < width < 400px
ewidth < 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.
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.
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
eem
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)
).
- Sintassi dell'intervallo (ad esempio
- Pseudoelementi come
::before
e::after
. - I browser senza
:is(...)
/:where(...)
sono supportati tramite una soluzione alternativa facoltativa - Query sulle funzionalità
orientation
easpect-ratio
. - Filtrare correttamente le query in base alle funzionalità (ad esempio, eseguire query su
height
sucontainer: 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).
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
ecqh
) 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
estyle
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 uncontainer-type: inline-size
probabilmente cambierà dopo aver valutato una query, maResizeObserver
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