container-type og container-name
Definér containerforespørgsler med container-type, og giv dem navne med container-name.
container-type og container-name er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad er container queries?
Container queries lader CSS anvende typografier baseret på størrelsen af en overordnet container i stedet for visningsområdet. Det muliggør et responsivt design, der virkelig er komponentbaseret, så en komponent kan tilpasse sig, uanset hvor den placeres.
Problemet, container queries løser
Med media queries kan en kortkomponent i en sidebjælke på 300px ikke vide, at den er lille — den ved kun, at visningsområdet er bredt. Container queries lader komponenten reagere på størrelsen af sin egen container, ikke på det globale visningsområde.
container-type
For at forespørge på en container skal du først erklære den som en forespørgselscontainer ved hjælp af container-type:
<div class="card-wrapper">This wrapper can now be queried for its own width via @container.</div>
Værdier for container-type
Tilgængelige værdier:
inline-size— aktiverer forespørgsler på containerens inline-dimension, altså bredden ved vandret skrivningsize— aktiverer forespørgsler på både inline- og block-dimensionen, altså bredde og højdenormal— standardværdien; ingen størrelsesforespørgsler, men forespørgsler efter stil er stadig mulige
container-name
Giv en container et navn, så du kan referere til den i forespørgsler. Det er nødvendigt, når der findes indlejrede containere, og du vil forespørge på en bestemt overordnet container:
<div class="sidebar">Named container: "sidebar"</div>
Forkortelsen container
Forkortelsen container angiver både navn og type:
<div class="card-grid">Container named "card-grid", type inline-size.</div>
Hvorfor bruge unavngivne containere
Du kan stadig forespørge på en unavngiven container — reglen @container rammer som standard den nærmeste overordnede container. Navne er kun nødvendige, når du vil springe til en bestemt overordnet container.
Overvejelser om ydeevne
Alle elementer med container-type får deres egen layoutindkapsling. Det betyder, at størrelsesændringer inde i containeren ikke påvirker de overordnede elementer — en fordel for ydeevnen. Browseren behøver ikke genberegne hele siden, når containeren ændres.
Forholdet til contain-egenskaben
Indstilling af container-type: inline-size indstiller implicit contain: inline-size layout style på elementet. Det forhindrer, at containerens størrelse påvirker dens eget layout — hvilket er nødvendigt, for at størrelsesforespørgsler kan fungere.
Opsætning af et praktisk eksempel
En komplet opsætning af container queries:
<div class="article-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
Container queries sammenlignet med media queries
Brug containere til: tilpasning på komponentniveau, genanvendelige komponenter i forskellige layoutkontekster og kort eller widgets på ukendte placeringer. Brug media queries til: globale layoutændringer, skalering af typografi og visning eller skjul af store sektioner.
Hurtigt tjek
Hvilken egenskabsværdi gør et element forespørgselsbart for sin bredde ved hjælp af @container-regler?
Opsummering
container-type: inline-size definerer et element som en forespørgselscontainer for dets bredde. Brug container-name til at navngive containere, så du kan målrette bestemte containere. Forkortelsen container angiver begge dele. Container queries løser problemet med komponenter i ukendte kontekster, som media queries baseret på visningsområdet ikke kan håndtere.
Lær CSS med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “container-type og container-name” gratis?
Ja — hele teksten til “container-type og container-name” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “container-type og container-name”?
Definér containerforespørgsler med container-type, og giv dem navne med container-name. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på CSS Academy?
Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “container-type og container-name”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne CSS Academy-lektion?
Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- container-type og container-name
- @container-regler og brudpunkter
- Enheder til containerforespørgsler: cqw cqh
- Containerforespørgsler kontra media queries