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.

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 dei contenitori basate sulle dimensioni e utilizzare i valori delle unità di query dei contenitori in questi browser. Per semplificare ulteriormente l'utilizzo delle query dei contenitori e delle unità cq in base alle dimensioni, il team di Aurora di Chrome si è impegnato ad aggiornare il polyfill delle query dei contenitori per supportare più browser e casi d'uso, in modo che tu possa utilizzare questa potente funzionalità in tutta sicurezza.

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 design responsive basato su componenti effettivi eseguendo una query sulle dimensioni di un elemento principale. 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. Ciò li rende molto più resilienti e reattivi su pagine e modelli.

Utilizzo delle query dei contenitori

Supponiamo 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 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 al gruppo principale più vicino. Per un design come l'immagine sopra, in cui una scheda potrebbe passare da una colonna a due colonne, scrivi qualcosa di simile a:

@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 del contenitore

Per rendere ancora più utili le query container, puoi utilizzare anche valori delle unità basate su container. La tabella seguente mostra i possibili valori delle unità di misura dei contenitori e la loro corrispondenza 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 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 fare un ulteriore passo avanti, utilizza la funzione clamp() per assegnare alla tipografia un limite di dimensioni minime e massime e imposta le dimensioni 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 è supportato in generale in:

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

Ha una dimensione inferiore a 9 KB quando è compresso e utilizza ResizeObserver con MutationObserver per supportare la sintassi completa della query @container attualmente disponibile nei browser stabili:

• Query discrete (width: 300px e min-width: 300px).
• Query sull'intervallo (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.

Per un'esperienza utente ottimale, ti consigliamo di utilizzare inizialmente il polyfill solo per i contenuti sotto la piega e di usare le query @supports per sostituirlo temporaneamente con un indicatore di caricamento finché il polyfill non è pronto per la visualizzazione:

@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 contenitori, questo indicatore di caricamento non verrà mai visualizzato.

Nuove funzionalità di Polyfill

Il polyfill aggiornato supporta:

• Regole @container nidificate.
• È supportato l'annidamento 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 di 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 del contenitore espansa:
  • 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 runtime).

Limitazioni e avvisi di Polyfill

Se utilizzi il polyfill per le query del contenitore, tieni presente che alcune funzionalità non sono disponibili:

• Shadow DOM 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 cross-origin e i fogli di stile negli iframe (a meno che non venga caricato manualmente un polyfill) 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 adoperando.

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 affidarti a questa funzionalità per la prima verniciatura.
• Genera ResizeObserver Loop Errors. Anche il polyfill originale lo fa, ma vale la pena segnalarlo. 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 passaggi poiché alcune funzionalità, come le API JavaScript, non sono sottoposte a polyfilling, pertanto il tasso di passaggi è intenzionalmente più vicino al 70%.
• La :where() soluzione alternativa è necessaria per il 2,23% degli utenti di browser precedenti a:
  • Safari 14
  • Chromium 88
  • Edge 88
  • Samsung Internet 15
  • Firefox 78