Container query e media query a confronto
Capisca quando utilizzare le container query anziché le media query del viewport nella progettazione basata sui componenti.
Container query e media query a confronto è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
La differenza fondamentale
Le media query rispondono alle dimensioni del viewport. Le container query rispondono alle dimensioni del contenitore padre. Questa distinzione determina quale strumento usare per ciascun problema.
Media query: quando usarle
Usi le media query per:
- Modifiche al layout globale della pagina (una o due colonne)
- Mostrare o nascondere sezioni ampie della pagina (il drawer di navigazione sui dispositivi mobili)
- Ridimensionare la scala tipografica di base a livello di pagina
- Stili di stampa
- Query sulle preferenze dell'utente (modalità scura, movimento ridotto)
Container query: quando usarle
Usi le container query per:
- Modifiche al layout a livello di componente (card orizzontale o verticale)
- Componenti inseriti in contenitori sconosciuti (sidebar, area principale, sidebar all'interno dell'area principale)
- Componenti riutilizzabili di un design system
- Widget incorporati in pagine di terze parti
L'argomento della portabilità
Una card con stili definiti tramite media query funziona a un breakpoint su una pagina larga 1200px. Se la card viene spostata in una sidebar, potrebbe aver bisogno di breakpoint diversi. Con le container query, la stessa card funziona senza modifiche: si adatta allo spazio disponibile.
Uso combinato
Le applicazioni reali usano entrambi gli strumenti. Le media query definiscono il layout generale (la sidebar compare a larghezze desktop); le container query definiscono il comportamento dei componenti all'interno di quel layout.
<div class="layout">
<div class="sidebar"><div class="card">Sidebar card</div></div>
<div class="main-content"><div class="card">Main card</div></div>
</div>
Specificità delle container query
A differenza delle media query, che non aggiungono specificità, le container query aggiungono specificità legata al contesto. Una regola all'interno di @container (min-width: 400px) ha la stessa specificità della stessa regola al suo esterno, ma si applica solo all'interno del contesto di quel contenitore.
Supporto dei browser
Le container query sono supportate da tutti i browser moderni dal 2023 (Chrome 105+, Firefox 110+, Safari 16+). Oggi si possono usare senza problemi nei nuovi progetti, senza fallback per i browser moderni supportati.
Progressive enhancement con @supports
Per i progetti che richiedono il supporto di browser meno recenti, usi @supports per verificare il supporto delle container query:
<div class="card-wrapper"><div class="card">Progressively enhanced card</div></div>
Confronto delle prestazioni
Le container query hanno caratteristiche prestazionali specifiche: ogni elemento con container-type crea un confine di contenimento del layout. Questo impedisce che le variazioni delle dimensioni interne influenzino l'esterno, offrendo di fatto un vantaggio in termini di prestazioni. Le variazioni delle media query possono attivare ricalcoli globali del layout.
Debug delle container query
Chrome DevTools mostra un badge "cq" accanto agli elementi contenitore nel pannello Elements. Faccia clic sul badge per visualizzare i confini del contenitore e verificare le condizioni delle container query con l'inspector del layout di DevTools.
Verifica rapida
Un componente card di un design system deve passare da un layout impilato a uno affiancato in base alla larghezza disponibile, indipendentemente dal contesto. Quale approccio è migliore?
Riepilogo
Le media query rispondono al viewport globale; le container query rispondono alle dimensioni di un contenitore padre. Usi le media query per le decisioni sul layout globale e per le query sulle preferenze dell'utente. Usi le container query per i componenti riutilizzabili che devono adattarsi al contesto. Combini entrambi gli strumenti: media query per il layout generale della pagina, container query per l'adattamento dei componenti all'interno di quel layout.
Domande Frequenti
La lezione «Container query e media query a confronto» è gratuita?
Sì — il testo completo di «Container query e media query a confronto» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Container query e media query a confronto»?
Capisca quando utilizzare le container query anziché le media query del viewport nella progettazione basata sui componenti. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Container query e media query a confronto»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- container-type e container-name
- Regole @container e breakpoint
- Unità delle container query: cqw cqh
- Container query e media query a confronto