Utilizzare i CSS Container Queries con JavaScript

Introduzione alle CSS Container Queries

Le CSS Container Queries rappresentano una delle innovazioni più importanti del mondo frontend negli ultimi anni. Con esse è possibile creare layout che reagiscono non solo alla dimensione della viewport (come avviene con le media queries), ma anche al contenitore che racchiude l’elemento. Questo permette di costruire componenti realmente modulari e riutilizzabili.

Se vuoi partire dalle basi, ti consiglio l’articolo dedicato Sfruttare il Container Query per Layout Responsive, che introduce i concetti fondamentali.

Vantaggi dell’uso con JavaScript

Integrare le container queries con JavaScript significa poter gestire stati dinamici e logiche di applicazione avanzate. Ad esempio, possiamo:

• Applicare stili condizionali in funzione della dimensione di un contenitore.
• Agganciare listener per reagire ai cambiamenti e attivare componenti JS.
• Creare microinterazioni più fluide, unendo logica JS e responsive design (vedi Microinterazioni di Design con CSS e JavaScript).

Esempi pratici di utilizzo

1. Creare un layout adattivo per una card

Nell’esempio seguente, usiamo una container query per cambiare il layout interno di una card. Poi, con JavaScript, possiamo aggiungere logiche dinamiche.

.card {
  container-type: inline-size;
  container-name: card;
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 8px;
}

@container card (min-width: 400px) {
  .card__content {
    display: flex;
    gap: 1rem;
  }
}

<div class="card">
  <img src="product.jpg" alt="Prodotto" class="card__image">
  <div class="card__content">
    <h2>Titolo</h2>
    <p>Descrizione breve...</p>
  </div>
</div>

2. Usare JavaScript per reagire ai cambiamenti

Il ResizeObserver in JavaScript ci permette di monitorare le dimensioni di un contenitore e reagire alle variazioni, estendendo ciò che facciamo con le container queries CSS.

const card = document.querySelector('.card');

const ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    if (entry.contentRect.width >= 400) {
      card.classList.add('is-wide');
    } else {
      card.classList.remove('is-wide');
    }
  }
});

ro.observe(card);

In questo modo possiamo ad esempio cambiare logiche JS quando il contenitore supera una certa soglia.

3. Interazioni combinate: CSS + JS

Uniamo CSS container queries e JS per gestire interazioni complesse, come animazioni o variazioni di tema.

.card.is-wide {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  transition: background 0.3s ease;
}

// Cambiare contenuto dinamicamente in base alla larghezza
ro.observe(card);

ro.disconnect = () => console.log("Osservazione interrotta");

Best practices per integrazioni efficaci

Alcuni suggerimenti:

1. Usa nomi di container chiari per migliorare la leggibilità: ad esempio container-name: sidebar;.
2. Combina container queries con CSS Custom Properties per Temi Dinamici e rendi i componenti flessibili.
3. Sfrutta l’osservazione via JS solo quando necessario: le CSS container queries fanno già gran parte del lavoro.
4. Testa le interazioni anche in scenari reali con contenitori nidificati (utile con CSS Subgrid).

Considerazioni sulla compatibilità

Le container queries sono supportate nelle versioni moderne dei browser principali (Chrome, Safari, Firefox, Edge). Tuttavia, non sono disponibili in versioni legacy. È quindi opportuno valutare fallback e consultare le tabelle di compatibilità aggiornate.

In contesti professionali, potresti integrare tecniche di progressive enhancement, simili a quanto accade con le funzioni min(), max(), clamp().

Risorse utili e strumenti

• Container Queries: best practice responsive
• Sviluppare un Design Responsivo con CSS Container Queries
• Costruire Layout Dinamici con CSS Grid
• MDN – CSS Container Queries

Conclusione

Le CSS Container Queries combinate con JavaScript aprono la strada a componenti veramente adattivi e modulari, capaci di reagire al contesto in cui sono inseriti. Che si tratti di microinterazioni, layout complessi o personalizzazioni di tema, le container queries sono ormai uno strumento imprescindibile nello stack di uno sviluppatore frontend moderno.