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 è ora disponibile anche 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.

Che cosa sono le query container?

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 contenitore, puoi scrivere componenti riutilizzabili che possono avere un aspetto diverso a seconda di dove si trovano nella pagina. Questo li rende molto più resilienti e adattabili su più 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 renderla più chiara ed esplicita, 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 ancora più utili le query container, puoi utilizzare anche valori delle unità basate su container. La seguente tabella mostra i possibili valori delle unità container e il modo in cui corrispondono alle dimensioni di un contenitore:

Un esempio di utilizzo delle unità basate su container è 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 ridurrà la dimensione del carattere al 15% di quella del container, il che significa che diventerà più grande man mano che la dimensione in linea (larghezza) aumenta, o diminuirà man mano che diminuisce. Per andare ancora più 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 in avanti e aggiorna le schede più larghe in modo da avere un intervallo di dimensioni inferiore, in quanto sono visualizzate in una visualizzazione a due colonne.

Il polyfill della query sul container

Poiché le query dei container sono una funzionalità così potente, vogliamo che tu sia in grado di incorporarla nei tuoi progetti e che tu sappia 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 e versioni successive
• Chrome 79 e versioni successive
• Edge 79 e versioni successive
• Safari 13.4 o versioni successive

Una volta compresso, ha una dimensione inferiore 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).
• Unità di lunghezza relativa del contenitore (cqw, cqh, cqi, cqb, cqmin ecqmax) nelle proprietà e nei fotogrammi chiave.

Utilizzo del polyfill della query 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 distribuire il polyfill in modo condizionale sulla base di User-Agent oppure ospitarlo autonomamente sulla tua origine.

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.

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 modalità di scrittura).
• 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 esempio (200px < width < 400px)).
  • Query di uguaglianza (ad es. (width = 200px)).
• Pseudo elementi 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 caratteristiche (ad esempio, l'esecuzione di 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 runtime).

Limitazioni e avvisi di Polyfill

Se utilizzi il polyfill della query container, tieni presente che mancano alcune funzionalità:

• 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 della stessa origine. 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 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 stiamo elaborando.

Avvisi

• Per evitare conseguenze su FID e CLS, il polyfill non garantisce quando verrà eseguito il primo layout, anche se viene caricato in modo sincrono, con l'eccezione che tenterà di evitare ritardi irragionevoli per 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 aver valutato una query, ma ResizeObserver non ha modo di comunicargli che non ci interessano le modifiche alle dimensioni del blocco.
• Questo polyfill è stato 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
  • Cromo 88
  • Edge 88
  • Internet Samsung 15
  • Firefox 78