Behållarfrågor: Släpp lös kraften i att skriva mediefrågor

Containerfrågor: Responsiv design utanför visningsområdet

Responsiv webbdesign har varit en vanlig praxis i flera år, vilket gör att webbplatser kan anpassa sig och se bra ut på en mängd olika enheter och skärmstorlekar. Det finns dock en ihållande utmaning: att göra enskilda komponenter inom en layout känsliga för deras eget sammanhang snarare än att bara reagera på storleken på webbläsarfönstret. Det är här containerfrågor kommer in i bilden.

Vad är containerfrågor?

Behållarfrågor är en framväxande teknik som gör det möjligt för webbplatsutvecklare att tillämpa stilar och beteenden baserat på sammanhanget för den omgivande behållaren. Till skillnad från traditionella mediefrågor, som är baserade på storleken på webbläsarfönstret, fokuserar behållarfrågor på storleken och egenskaperna hos själva elementets behållare.

Istället för att skriva CSS-regler baserat på fönstrets bredd, kan vi med containerfrågor skriva regler baserat på storleken på containern som omger elementet. Detta öppnar nya möjligheter för responsiv webbdesign, eftersom enskilda komponenter kan anpassa sig till sitt omedelbara sammanhang och fatta beslut utifrån det.

¿Varför är containerfrågor viktiga?

Behållarfrågor erbjuder ett mer exakt sätt att tillämpa stilar och beteenden på webbkomponenter. Genom att förlita oss på containerns sammanhang, snarare än storleken på fönstret, kan vi uppnå mer flexibla och anpassningsbara layouter.

Föreställ dig en listobjektlayout, där varje objekt har en fast bredd, och du vill att det ska staplas vertikalt när bredden på behållaren är mindre än en viss tröskel. Med behållarfrågor kan du enkelt uppnå detta genom att tillämpa en CSS-regel på själva behållaren, istället för att tillämpa den på varje listobjekt separat.

Behållarfrågor möjliggör också mer modulära och återanvändbara konstruktioner. Du kan definiera specifika stilar och beteenden för olika typer av behållare och sedan återanvända dessa stilar på hela din webbplats.

Hur används behållarfrågor?

För närvarande stöds inte containerfrågor i alla webbläsare, men det finns alternativa tillvägagångssätt som utvecklare kan använda för att uppnå liknande funktionalitet.

Ett alternativ är att använda polyfills eller JavaScript-bibliotek som stöder containerfrågor i webbläsare som inte har stöd för dem. Dessa bibliotek tillämpar detekterings- och emuleringstekniker för att möjliggöra containerfrågor i en bredare miljö.

Ett annat alternativ är att använda responsiva designramverk och bibliotek som redan har inbyggt stöd för containerfrågor , till exempel det populära ramverket Medvind CSS.

Hur man använder containerfrågor

För att använda behållarfrågor måste du tala om för webbläsaren vilket HTML-element du vill använda som behållare. Detta görs genom att deklarera ett “innehållande sammanhang”.

En inneslutningskontext berättar för webbläsaren att börja uppmärksamma storleken på en behållare (eller ett element). På så sätt vet webbläsaren när de stilar som anges i din containerfråga ska tillämpas.

För att deklarera en inneslutningskontext använder vi egenskapen container-type med värdet storlek, inline-size eller normal. Se API-referens av containertyp för att förstå vad vart och ett av dessa värden betyder.

Betrakta följande exempel på en uppdateringskortskomponent nedan:

. . .

Vi kan sedan lägga till en inneslutningskontext till behållaren:

.drink-card-container { container-type: inline-size; }

Och nu uppmärksammar webbläsaren storleken på .drink-card-behållaren. Även om vi fortfarande behöver tillämpa specifika stilar baserat på denna behållarstorlek, så behöver vi @container at-rule .

La @container at-rule

@container at-rule låter dig utforma element baserat på storleken på deras behållare. Behållarens tillstånd utvärderas när behållaren ändrar storlek. Dessutom är @container at-rule det som främst definierar en containerfråga. Den har följande form:

@container { }

Den har en syntax som liknar @media-direktivet i mediefrågor.

Om vi ​​går tillbaka till vårt exempel på drinkkort kan vi nu lägga till en @container at-rule som ändrar flexriktningen för vår .drink-card-klass när storleken på behållaren är mindre än eller lika med 450px.

@container (max-width: 450px) { .drink-card-container .drink-card { flex-direction: kolumn; } }

Och det är allt! Det är allt du behöver veta för att komma igång med containerfrågor.

Egenskapen container-name

Nu när du vet hur containerfrågor fungerar, låt oss tänka på det i en större skala: vad händer när vi har flera containrar eller inneslutningskontexter att arbeta med?

Detta introducerar behovet av specificitet när man skriver containerfrågor, vilket är anledningen till att egenskapen container-name finns.

Låt oss ompröva exemplet med vår drinkkortkomponent.