container-type og container-name
Definer spørringscontainere ved hjelp av container-type, og gi dem navn med container-name.
container-type og container-name er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 1 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.
Hva er container queries?
Container queries lar CSS bruke stiler basert på størrelsen på en overordnet container i stedet for visningsområdet. Dette muliggjør virkelig komponentbasert responsiv design, der en komponent tilpasser seg uansett hvor den plasseres.
Problemet container queries løser
Med media queries kan en kortkomponent i et sidefelt på 300px ikke vite at den er liten – den vet bare at visningsområdet er bredt. Container queries lar komponenten reagere på størrelsen til sin egen container, ikke på det globale visningsområdet.
container-type
For å spørre en container må De først deklarere den som en query-container ved hjelp av container-type:
<div class="card-wrapper">This wrapper can now be queried for its own width via @container.</div>
Verdier for container-type
Tilgjengelige verdier:
inline-size– aktiverer spørringer på containerens inline-dimensjon (bredde ved horisontal skrivemåte)size– aktiverer spørringer på både inline- og blok dimensjonen (bredde og høyde)normal– standardverdien; ingen størrelsesspørringer, men stilspørringer er fortsatt mulig
container-name
Gi en container et navn slik at De kan referere til den i spørringer. Dette er nødvendig når det finnes nestede containere og De vil spørre etter en bestemt overordnet container:
<div class="sidebar">Named container: "sidebar"</div>
Kortformen container
Kortformen container angir både navn og type:
<div class="card-grid">Container named "card-grid", type inline-size.</div>
Hvorfor navnløse containere
En navnløs container kan fortsatt brukes i spørringer – @container-regelen retter seg som standard mot den nærmeste overordnede containeren. Navn er bare nødvendig når De vil hoppe over til en bestemt overordnet container.
Ytelsesvurdering
Alle elementer med container-type får sin egen layoutavgrensning. Det betyr at størrelsesendringer inne i containeren ikke påvirker overordnede elementer – en ytelsesfordel. Nettleseren trenger ikke å beregne hele siden på nytt når containeren endres.
Forholdet til contain-egenskapen
Hvis De angir container-type: inline-size, angis contain: inline-size layout style implisitt på elementet. Dette hindrer at containerens størrelse påvirker dens eget oppsett – noe som kreves for at størrelsesspørringer skal fungere.
Oppsett med praktisk eksempel
Et komplett oppsett for 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 kontra media queries
Bruk containere til: tilpasning på komponentnivå, gjenbrukbare komponenter i ulike layoutkontekster og kort eller widgeter på ukjente plasseringer. Bruk media queries til: globale layoutendringer, skalering av typografi og visning eller skjuling av store deler.
Hurtigsjekk
Hvilken egenskapsverdi gjør et element spørringsbart for bredden ved hjelp av @container-regler?
Oppsummering
container-type: inline-size definerer et element som en query-container for bredden. Bruk container-name til å navngi containere for målrettet utvelgelse. Kortformen container angir begge deler. Container queries løser problemet med komponenter i ukjente kontekster, som media queries for visningsområdet ikke kan håndtere.
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-type og container-name» gratis?
Ja – hele teksten i «container-type og container-name» 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-type og container-name»?
Definer spørringscontainere ved hjelp av container-type, og gi dem navn med container-name. 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 1 av 4.
Hvor lang tid tar leksjonen «container-type og container-name»?
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