Regole @container e breakpoint
Scriva regole @container che applichino gli stili quando il contenitore raggiunge dimensioni specifiche.
Regole @container e breakpoint è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 2 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.
Sintassi della regola @container
@container è la at-rule che applica gli stili quando un contenitore soddisfa determinate condizioni sulle dimensioni. La sua sintassi rispecchia quella delle media query:
<div class="wrapper"><div class="box">Styled once container ≥ 400px wide</div></div>
Container query con nome
Indirizzare un contenitore specifico con nome:
<div class="sidebar">
<div class="nav-item">Dashboard</div>
<div class="nav-item">Settings</div>
</div>
Container query con max-width
Usi max-width per applicare gli stili ai contenitori più piccoli:
<div class="wrapper"><div class="card">Compact card at narrow widths</div></div>
Container query basate su intervalli
La sintassi moderna delle container query supporta gli intervalli:
<div class="wrapper"><div class="card"><span>Icon</span><span>Label</span></div></div>
Componente card adattivo
Un componente card che si adatta in base alla larghezza del contenitore:
<div class="card-wrapper">
<div class="card">
<div class="card__image"></div>
<div class="card__body">Adaptive card content</div>
</div>
</div>
Container query nidificate
Le container query possono essere nidificate. Per impostazione predefinita, la query interna fa riferimento all'antenato contenitore più vicino.
<div class="outer">
<div class="inner">
<div class="content">Nested container-aware content</div>
</div>
</div>
Breakpoint delle container query
A differenza dei breakpoint del viewport, i breakpoint del contenitore devono essere scelti in base al momento in cui il layout del componente deve cambiare, non in base a dimensioni arbitrarie dei dispositivi. Inizi dalla larghezza minima e massima del contenuto del componente.
Tipografia nei contenitori
Adatti la tipografia ai contenitori piccoli:
<div class="wrapper">
<h3 class="card-title">Adaptive Heading</h3>
<p class="card-text">Body copy that hides on very narrow containers.</p>
</div>
Container query per il layout a griglia
Modifichi la griglia interna di un componente in corrispondenza dei breakpoint del contenitore:
<div class="widget">
<div class="widget-grid">
<div>Tile 1</div>
<div>Tile 2</div>
</div>
</div>
Style query (oltre le dimensioni)
Le container query supportano anche le style query, che verificano i valori calcolati delle proprietà personalizzate. Questo consente di creare varianti dei componenti guidate da variabili CSS senza classi aggiuntive:
<div class="wrapper"><div class="card">Featured card styled via style query</div></div>
Verifica rapida
Qual è l'elemento interessato da @container (min-width: 500px)?
Riepilogo
Le regole @container applicano gli stili agli elementi all'interno di un contenitore quando quest'ultimo soddisfa determinate condizioni dimensionali. Usi contenitori con nome per selezionare antenati specifici. I breakpoint del contenitore devono basarsi sulle esigenze del contenuto, non sulle dimensioni dei dispositivi. Le style query estendono le container query, consentendo di verificare i valori delle variabili CSS e di creare potenti varianti dichiarative dei componenti.
Domande Frequenti
La lezione «Regole @container e breakpoint» è gratuita?
Sì — il testo completo di «Regole @container e breakpoint» è 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 «Regole @container e breakpoint»?
Scriva regole @container che applichino gli stili quando il contenitore raggiunge dimensioni specifiche. 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 2 di 4.
Quanto tempo richiede la lezione «Regole @container e breakpoint»?
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