@container-regler og bruddpunkter
Skriv @container-regler som bruker stiler når containeren når bestemte dimensjoner.
@container-regler og bruddpunkter er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Syntaks for @container-regelen
@container er at-regelen som bruker stiler når en container oppfyller bestemte størrelsesbetingelser. Syntaksen tilsvarer media queries:
<div class="wrapper"><div class="box">Styled once container ≥ 400px wide</div></div>
Navngitte container queries
Rett inn mot en bestemt navngitt container:
<div class="sidebar">
<div class="nav-item">Dashboard</div>
<div class="nav-item">Settings</div>
</div>
Container queries med max-width
Bruk max-width for å bruke stiler på mindre containere:
<div class="wrapper"><div class="card">Compact card at narrow widths</div></div>
Container-spørringer med intervaller
Moderne syntaks for container-spørringer støtter intervaller:
<div class="wrapper"><div class="card"><span>Icon</span><span>Label</span></div></div>
Adaptiv kortkomponent
En kortkomponent som tilpasser seg basert på bredden på containeren:
<div class="card-wrapper">
<div class="card">
<div class="card__image"></div>
<div class="card__body">Adaptive card content</div>
</div>
</div>
Nestede container-spørringer
Container-spørringer kan nøstes. Den indre spørringen refererer som standard til den nærmeste overordnede containeren.
<div class="outer">
<div class="inner">
<div class="content">Nested container-aware content</div>
</div>
</div>
Bruddpunkter for container-spørringer
I motsetning til bruddpunkter for viewport bør bruddpunkter for containere velges ut fra når komponentens layout må endres, ikke ut fra vilkårlige enhetsstørrelser. Ta utgangspunkt i komponentens minste og største innholdsbredde.
Typografi i containere
Juster typografien for små containere:
<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-spørring for rutenettlayout
Endre komponentens interne rutenett ved bruddpunkter for containere:
<div class="widget">
<div class="widget-grid">
<div>Tile 1</div>
<div>Tile 2</div>
</div>
</div>
Stilspørringer (utover størrelse)
Container-spørringer støtter også stilspørringer som kontrollerer beregnede verdier for egendefinerte egenskaper. Dette gjør det mulig å lage komponentvarianter som styres av CSS-variabler, uten ekstra klasser:
<div class="wrapper"><div class="card">Featured card styled via style query</div></div>
Hurtigsjekk
Hva er målet for @container (min-width: 500px)?
Oppsummering
@container-regler bruker stiler på elementer inne i en container når containeren oppfyller bestemte størrelsesbetingelser. Bruk navngitte containere for å målrette mot bestemte overordnede elementer. Bruddpunkter for containere bør baseres på innholdsbehov, ikke enhetsstørrelser. Stilspørringer utvider container-spørringer slik at de kan kontrollere CSS-variabelverdier, noe som muliggjør kraftige deklarative komponentvarianter.
Lær deg CSS med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «@container-regler og bruddpunkter» gratis?
Ja – hele teksten i «@container-regler og bruddpunkter» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «@container-regler og bruddpunkter»?
Skriv @container-regler som bruker stiler når containeren når bestemte dimensjoner. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med CSS Academy?
Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «@container-regler og bruddpunkter»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?
Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- container-type og container-name
- @container-regler og bruddpunkter
- Enheter for containerspørringer: cqw og cqh
- Containerspørringer kontra mediespørringer