CSS-behållarfrågor låter dig tillämpa stilar baserat på komponentens behållarestorlek istället för hela visningsporten.

Under lång tid var mediefrågor det enda sättet att göra UI-designer responsiva på olika skärmstorlekar. Men även det hade sina begränsningar. Ett av de största problemen med att använda mediefrågor var att du bara kunde utforma ett element som svar på ändringar i skärmstorleken, inte dess närmaste containerelement.

Containerfrågor introducerades för att lösa detta problem. De har också ökat med populariteten för ramverk som React och Vue.js som fungerar genom att skapa modulära UI "komponenter". Lär dig hur du använder containerfrågor för att skapa responsiva element i din CSS.

Koden som används i den här artikeln är tillgänglig i denna GitHub-förråd och är gratis för dig att använda under MIT-licensen.

Varför bör du använda CSS Container Queries?

För att förstå vikten av containerfrågor, låt oss använda ett exempel som gör det lättare att förstå konceptet. Men först måste du klona startkoden från detta GitHub-förråd.

instagram viewer

När du lyckats klona repet kör du koden. Du hittar en webbsida som liknar följande bild:

Här har du en rutnätslayout som består av två kolumner: huvudsektionen och sidofältet. Huvudsektionen ser okej ut, men sidofältet (som är mycket mindre än huvudinnehållet) ser lite klämt ut.

Layouten är responsiv. När du krymper webbläsaren kan du se att kortet förvandlas till en vertikal kolumn:

Med andra ord, när innehållet börjar bli oläsligt förvandlas layouten till en vertikal kolumn där bilden staplas ovanpå innehållet. Denna effekt kommer som ett resultat av mediefrågorna, vilket är det enda sättet du kan bestämma storleken på element baserat på hela skärmens storlek.

I det här fallet, närhelst din skärm är mindre än 800px, staplar du allt ovanpå varandra med Flexbox-inriktning. På större skärmar placerar vi innehållet sida vid sida:

@media(maximal bredd: 800 pixlar) {
.kort {
flex-riktning: kolumn;
 }
.card-header { 
bredd: 100%;
 }
}

Under längst tid har mediafrågor varit en av de viktigaste principer för webbdesign för att skapa responsiva layouter med CSS (och det har räckt till det mesta). Men du kommer säkert att stöta på scenarier där mediefrågor helt enkelt inte kommer att räcka, eller åtminstone inte är en bekväm lösning.

Ett av dessa scenarier är när du har en sidofält (som vi gör i exemplet ovan). I dessa fall där du har ett sidofält måste du direkt välja sidofältskortet och försöka göra det mindre:

.sidebar.kort {
/* Gör sidofältskortet mindre */
}
@media(maximal bredd: 800 pixlar) {
/* Style sidan när skärmen är smalare än 800px */
}

Det kan vara ganska komplicerat om du arbetar med många element eftersom du måste manuellt välja alla element och ändra storlek på dem. Du skulle sluta med mer kod och extra komplexitet.

Det är här containerfrågor kan vara användbara. Istället för att tvingas använda din visningsport som din storlek, kan du använda vilket element som helst på din sida som en behållare. Då kan den behållaren ha sina egna bredder som du skulle basera dina mediefrågor på.

Hur man skapar en containerfråga

För att skapa en containerfråga börjar du med att rikta in det element du vill använda som en container (i det här fallet huvudsektionen och sidofältet). Inne i blocket måste du ställa in behållare-typ till inline-storlek:

huvud, .sidebar {
behållare-typ: inline-storlek
}

När du sparar din CSS-fil kommer ingenting att förändras på sidan. Men nu kan du använda behållarfrågor för att ändra storlek och stil på korten kapslade i huvudsektionen och sidofältssektionen. I följande behållarfråga ändrar du korten till vertikala kolumner på skärmar som är 500px breda eller mindre:

@behållare(maximal bredd: 500 pixlar) {
.kort {
flex-riktning: kolumn;
 }
.card-header {
bredd: 100%;
 }
}

Detta kommer att fungera som en normal mediefråga. Men istället för att mäta storleken på din skärm, mäter du storleken på dina behållare (huvud- och sidofältssektioner). Så nu när din behållare är 500px eller mer använder du den horisontella vyn. Annars använder du vertikal (standard för flexbox).

Från bilden ovan kan du se att sidofältet har en vertikal form eftersom det är mindre än 500px. Medan huvudinnehållet behåller sin horisontella layout eftersom det är större än 500px. Om du krymper ner din webbläsare kommer både sidofältet och huvudinnehållet att använda den vertikala justeringen när de når 500px eller mindre.

Behållarfrågan är otroligt kraftfull eftersom den låter dig ändra storlek på saker baserat på behållaren istället för hela webbläsarens bredd. Detta är särskilt användbart när du har att göra med komponenter (som i React eller Vue).

Med behållarfrågor kan du enkelt ändra storlek på dina UI-komponenter baserat på deras behållare, så att du kan skapa helt fristående komponenter.

Namnge behållare

När du skapar en @behållare sökfrågan, letar den först efter behållaren för det element som du riktar in dig på i frågan. I vårt fall skulle detta vara huvudbehållaren och sidofältsbehållaren.

Och även om korten var inuti en annan behållare, skulle den bara ignorera de andra behållarna och bara välja den närmaste behållaren till sig själv. Detta är en del av en bredare CSS-koncept känt som CSS-väljare.

I följande exempel har vi förvandlat body-elementet till en behållare:

kropp {
behållare-typ: inline-storlek;
}

Nu har vi tre separata behållare: kropp, huvud- och sidosektion. Som standard är korten vi riktar in oss på i behållarfrågan närmare huvudsektionen eller sidofältet än kroppen. Så den använder huvud- och sidofältssektionerna som behållare för behållarfrågan.

För att åsidosätta detta beteende måste du göra två saker. Först måste du ge ditt kroppselement ett containernamn:

kropp {
behållare-typ: inline-storlek;
container-namn: kropp;
}

Sedan, när du skapar din behållarfråga, måste du ange behållarens namn efter @behållare.

@behållare kropp (maximal bredd:1000 pixlar){
/* CSS-regler som riktar sig till kroppsbehållaren */
}

Detta är användbart om du vill använda ett specifikt element som en behållare snarare än den närmaste behållaren till elementet du riktar in dig på. Du kan med andra ord välja vilken specifik behållare som helst och finjustera din layout.

Containerenheter

En annan bra funktion med containrar är att du kan använda containerenheter. Dessa enheter fungerar precis som viewport-enheter (de är alla exakt samma typ av enheter). Dock använder containerenheter cqw (för inställning av bredd) och cqh (för inställning av höjd). Dessa enheter bestämmer den exakta bredden och höjden på din container.

CSS-behållarfrågor låter dig använda specifika element som referenspunkter för dina mediefrågor. Denna teknik är ganska praktisk för att skapa modulära, fristående element som kan stå oberoende oavsett behållaren de befinner sig i. Men containerfrågor använder samma principer som mediafrågor, och det här är något du bör behärska om du vill vara en av de bästa CSS-utvecklarna med en procent.