CSS Academy · Lektion

container-type och container-name

Definiera frågecontainrar med container-type och ge dem namn med container-name.

Lektion 1 av 413 steg

container-type och container-name är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad är container queries?

Med container queries kan CSS tillämpa stilar baserat på storleken på en överordnad container i stället för visningsområdet. Det möjliggör verkligt komponentbaserad responsiv design där en komponent anpassar sig efter var den placeras.

Problemet som container queries löser

Med media queries kan en kortkomponent i ett sidofält på 300px inte veta att den är liten — den vet bara att visningsområdet är brett. Med container queries kan komponenten reagera på storleken på sin egen container i stället för på det globala visningsområdet.

container-type

För att ställa frågor mot en container måste Ni först deklarera den som en query-container med container-type:

<div class="card-wrapper">This wrapper can now be queried for its own width via @container.</div>

Värden för container-type

Tillgängliga värden:

inline-size — aktiverar frågor mot containerns inline-dimension, alltså bredden vid horisontell skrift
size — aktiverar frågor mot både inline- och blockdimensionerna, alltså bredd och höjd
normal — standardvärdet; storleksfrågor är inte aktiverade, men stilfrågor är fortfarande möjliga

container-name

Ge containern ett namn så att Ni kan referera till den i frågor. Detta behövs när det finns nästlade containers och Ni vill ställa frågor mot en specifik förfader:

<div class="sidebar">Named container: "sidebar"</div>

Förkortningen container

Förkortningen container anger både namn och typ:

<div class="card-grid">Container named "card-grid", type inline-size.</div>

Varför namnlösa containers?

En namnlös container kan fortfarande användas i frågor — regeln @container riktas som standard mot den närmaste containerförfadern. Namn behövs bara när Ni vill hoppa till en specifik förfader.

Prestandaövervägande

Varje element med container-type får sin egen layout-inneslutning. Det innebär att storleksändringar inuti containern inte påverkar förfäderna — en prestandafördel. Webbläsaren behöver inte räkna om hela sidan när containern ändras.

Sambandet med contain-egenskapen

Om Ni anger container-type: inline-size anges implicit även contain: inline-size layout style på elementet. Det förhindrar att containerns storlek påverkar dess egen layout — vilket krävs för att storleksfrågor ska fungera.

Konfigurera ett praktiskt exempel

En komplett konfiguration av 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 jämfört med media queries

Använd containers för komponentanpassning, återanvändbara komponenter i olika layoutkontexter samt kort och widgetar på okända platser. Använd media queries för globala layoutändringar, skalning av typografi samt visning och döljning av stora avsnitt.

Snabbkontroll

Vilket egenskapsvärde gör ett element frågebart med avseende på sin bredd med hjälp av @container-regler?

Besvara frågan i den interaktiva lektionen

Sammanfattning

container-type: inline-size definierar ett element som en query-container för dess bredd. Använd container-name för att namnge containers och rikta frågor selektivt. Förkortningen container anger båda värdena. Container queries löser problemet med komponenter i okända kontexter, något som viewport-baserade media queries inte kan hantera.

Gratis att börja

Lär dig CSS med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 40
Lektioner: 159

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”container-type och container-name” gratis?

Ja – hela texten till ”container-type och container-name” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”container-type och container-name”?

Definiera frågecontainrar med container-type och ge dem namn med container-name. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig CSS Academy?

Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”container-type och container-name”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här CSS Academy-lektionen?

Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till CSS Academy