Slik bruker du containerspørringer i CSS

I lang tid var medieforespørsler den eneste måten å gjøre UI-design responsive på forskjellige skjermstørrelser. Men selv det hadde sine begrensninger. Et av de største problemene med å bruke mediespørringer var at du bare kunne style et element som svar på endringer i skjermstørrelsen, ikke dets nærmeste beholderelement.

Containerspørringer ble introdusert for å løse dette problemet. De har også økt med populariteten til rammeverk som React og Vue.js som fungerer ved å lage modulære brukergrensesnitt "komponenter". Finn ut hvordan du bruker containerspørringer til å lage responsive elementer i CSS-en din.

Koden som brukes i denne artikkelen er tilgjengelig i denne GitHub-depot og er gratis for deg å bruke under MIT-lisensen.

Hvorfor bør du bruke CSS Container Queries?

For å forstå viktigheten av containerspørringer, la oss bruke et eksempel som gjør det lettere å forstå konseptet. Men først må du klone startkoden fra denne GitHub-depot.

Når du har klonet repoen, kjør koden. Du finner en nettside som ligner på følgende bilde:

Her har du et rutenettoppsett som består av to kolonner: hoveddelen og sidefeltet. Hoveddelen ser ok ut, men sidefeltet (som er mye mindre enn hovedinnholdet) ser litt sammenklemt ut.

Oppsettet er responsivt. Når du krymper nettleseren, kan du se at kortet forvandles til en vertikal kolonne:

Med andre ord, når innholdet begynner å bli uleselig, forvandles layouten til en vertikal kolonne der bildet stables oppå innholdet. Denne effekten kommer som et resultat av mediespørringene, som er den eneste måten du kan bestemme størrelsen på elementer basert på hele størrelsen på skjermen.

I dette tilfellet, når skjermen din er mindre enn 800px, stabler du alt oppå hverandre ved å bruke Flexbox justering. På større skjermer plasserer vi innholdet side ved side:

@media(maks-bredde: 800 piksler) {
.kort {
flex-retning: kolonne;
 }
.card-header { 
bredde: 100%;
 }
}

I lengste tid har medieforespørsler vært en av de viktigste prinsipper for webdesign for å lage responsive layouter med CSS (og det har vært godt nok til det meste). Men du kommer garantert til å støte på scenarier der medieforespørsler bare ikke vil være nok, eller i det minste ikke vil være en praktisk løsning.

Et av disse scenariene er når du har en sidefelt (som vi gjør i eksemplet ovenfor). I disse tilfellene der du har et sidefelt, må du velge sidefeltkortet direkte og prøve å gjøre det mindre:

.sidefelt.kort {
/* Gjør sidefeltkortet mindre */
}
@media(maks-bredde: 800 piksler) {
/* Stil siden når skjermen er smalere enn 800px */
}

Det kan være ganske komplisert hvis du jobber med mange elementer fordi du må velge alle elementene manuelt og endre størrelsen på dem. Du vil ende opp med mer kode og ekstra kompleksitet.

Det er her containerspørringer kan være nyttige. I stedet for å bli tvunget til å bruke visningsporten din som størrelse, kan du bruke et hvilket som helst element på siden din som en beholder. Da kan beholderen ha sine egne bredder som du kan basere mediespørringene dine på.

Hvordan lage en containerspørring

For å opprette en beholderspørring, vil du begynne med å målrette elementet du vil bruke som en beholder (i dette tilfellet hoveddelen og sidefeltet). Inne i blokken må du stille inn container-type til inline-størrelse:

hoved-, .sidefelt {
container-type: inline-størrelse
}

Når du lagrer CSS-filen din, vil ingenting endre seg på siden. Men nå kan du bruke beholderspørringer til å endre størrelse og stil på kortene som er nestet i hoveddelen og sidepaneldelen. I følgende beholderspørring endrer du kortene til vertikale kolonner på skjermer som er 500 piksler brede eller mindre:

@container(maks-bredde: 500 piksler) {
.kort {
flex-retning: kolonne;
 }
.card-header {
bredde: 100%;
 }
}

Dette kommer til å fungere som en vanlig mediespørring. Men i stedet for å måle størrelsen på skjermen din, måler du størrelsen på beholderne (hoved- og sidefeltseksjoner). Så nå når beholderen din er 500px eller mer, bruker du den horisontale visningen. Ellers bruker du vertikal (standard for flexbox).

Fra bildet ovenfor kan du se at sidefeltet har en vertikal form fordi den er mindre enn 500 px. Mens hovedinnholdet beholder sin horisontale layout fordi det er større enn 500 piksler. Hvis du krymper nettleseren ned, vil både sidefeltet og hovedinnholdet bruke den vertikale justeringen når de når 500 piksler eller mindre.

Beholderspørringen er utrolig kraftig fordi den lar deg endre størrelse på ting basert på beholderen i stedet for hele nettleserens bredde. Dette er spesielt nyttig når du arbeider med komponenter (som i React eller Vue).

Med beholderspørringer kan du enkelt endre størrelsen på UI-komponentene dine basert på beholderen deres, slik at du kan lage helt selvstendige komponenter.

Navngi containere

Når du oppretter en @container spørringen, ser den først etter beholderen til elementet du målretter mot i søket. I vårt tilfelle vil dette være hovedbeholderen og sidefeltbeholderen.

Og selv om kortene var inne i en annen beholder, ville den bare ignorere de andre beholderne og kun velge den nærmeste beholderen til seg selv. Dette er en del av en bredere CSS-konsept kjent som CSS-velgere.

I følgende eksempel har vi gjort om body-elementet til en beholder:

kropp {
container-type: inline-størrelse;
}

Nå har vi tre separate beholdere: kropp, hoved- og sideseksjon. Som standard er kortene vi målretter mot i beholdersøket nærmere hoveddelen eller sidefeltet enn hoveddelen. Så den bruker hoved- og sidefeltseksjonene som beholdere for beholderspørringen.

For å overstyre denne oppførselen, må du gjøre to ting. Først må du gi kroppselementet et beholdernavn:

kropp {
container-type: inline-størrelse;
containernavn: kropp;
}

Deretter, når du oppretter beholderspørringen, må du spesifisere beholdernavnet etter @container.

@container kropp (maks-bredde:1000 piksler){
/* CSS-regler som er målrettet mot kroppsbeholderen */
}

Dette er nyttig hvis du vil bruke et spesifikt element som en beholder i stedet for den nærmeste beholderen til elementet du målretter mot. Du kan med andre ord velge hvilken som helst spesifikk beholder og finjustere layouten.

Containerenheter

En annen flott funksjon med containere er at du kan bruke containerenheter. Disse enhetene fungerer akkurat som viewport-enheter (de er alle nøyaktig samme type enheter). Imidlertid bruker containerenheter cqw (for innstilling av bredde) og cqh (for innstilling av høyde). Disse enhetene bestemmer den nøyaktige bredden og høyden på beholderen din.

CSS-beholderspørringer lar deg bruke spesifikke elementer som referansepunkter for mediespørringene dine. Denne teknikken er ganske nyttig for å lage modulære, selvstendige elementer som kan stå uavhengig uavhengig av beholderen de er i. Men containerspørringer bruker de samme prinsippene som mediespørringer, og dette er noe du bør mestre hvis du vil være en topp én prosent CSS-utvikler.