--- title: "CSS Container Queries" url: "https://www.bekk.christmas/post/2021/13/css-container-queries" authors: ["Hans-Christian Fjeldberg-Gustavson"] published: "2021-12-13" updated: "2024-11-07T13:05:28Z" language: "nb-NO" type: "article" tags: ["CSS"] --- # CSS Container Queries Web har alltid vært en plattform hvor innholdet må tilpasse seg forskjellige skjermer og skjermteknologier. _Media queries_ har gjort det mulig for oss å tilpasse designet vårt til denne hverdagen, men i en hverdag hvor vi skriver flere og flere komponenter strekker ikke media queries alltid til. Møt _**CSS**_ _**container queries**_, et nytt standard-forslag som endelig skal la oss kode komponenter uavhengig av resten av designet! ## Kort fortalt CSS Container Queries lar komponenter tilpasse seg plassen de faktisk har tilgjengelig, i stedet for å styres av hele viewporten slik media queries gjør. Det gjør det enklere å bygge komponenter som kan brukes i ulike kontekster uten å vite om de ligger øverst på siden, i en artikkel eller i en aside. - **Passer for:** Frontendutviklere som jobber med responsive komponenter - **Fint å kunne fra før:** Kjennskap til CSS og media queries _Generert med KI_ _Responsive web design_ ble først definert som designtankegang helt tilbake i 2010 av Ethan Marcotte, og har blitt et påkrevd verktøy for enhver som jobber med front-end. Teknologier som _media queries_, _responsive bilder_ og _grid_ har etterhvert gjort det veldig mye enklere å lage responsive sider som både laster kjappere, og bedre tilpasser seg besøkende til de sidene vi lager. Men der våre eksisterende teknologier fungerer veldig bra når vi designer og har kontroll på helheten, er det noe som mangler når vi begynner å kode enkeltkomponentene som utgjør helheten, spesielt med utbredelsen av designsystemer og komponentbiblioteker. Når vi mister kontroll over helheten, og blir en brikke i det store puslespillet, ser vi at vanlige _media queries_ kommer til kort. _Container queries_ prøver å svare på spørsmålet; hvor stor plass har egentlig jeg? Ikke hvor stor skjerm har brukeren som er inne og ser på siden nå, men hvor stor plass har egentlig jeg. Fokus flyttes fra helheten til enkeltkomponentene vha. av _container queries_, og gir endelig enkeltkompomonententene mulighet til å blomstre uavhengig av alle de forstyrrende elementene rundt 🚀. Se for deg at du skal designe en inngang til Bekks sider som skal fungere i mange forskjellige kontekster, f.eks. de tre variantene under (jeg er ingen designer…). ![Tre forskjellige design av en Bekk inngang](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/39ebc962284f25b2006d220beed988519cfdc3f7-2156x812.jpg) _Bekk inngang_ I utgangspunktet et ganske enkelt design å implementere, hadde vi bare visst hvor mye tilgjengelig plass du har. Jeg skal ikke gå gjennom hele forslaget til _container queries_, se på kildene for inngående og oppdatert informasjon, men på nåværende tidspunkt kunne CSS’en sett slik ut for dette designet: ```css .bekk-inngang-container { container-type: inline-size; } .ingress, .cta-buttons, .image { display: none; } @container (min-width: 300px) { .bekk-inngang { display: grid; grid-template: "logo logo" "image image" "ingress ingress" "button1 button2" } .ingress, .cta-buttons, .image { display: block; } /* ingress, cta-buttons image styling */ } @container (min-width: 550px) { .bekk-inngang { grid-template: "logo logo image" "ingress ingress image" "button1 button2 image" } } ``` (_På nåværende tidspunkt 13.12.2021 fungerer ingen av eksemplene på container queries i Chrome Canary, så jeg får dessverre ikke lenket til et fungerende eksempel_ 😢) Det som er så behagelig med denne koden er at vi ikke har brydd oss noe om verden utenfor vår lille komponent, Bekk-inngangen kan være plassert på toppen, i hovedartikkelen eller i en _aside_ uten at vi trenger å tenke på dette når vi koder vår CSS. Hvis vi ønsker litt mer kontroll så er det mulig å navngi containere, slik at vi kan tilpasse designet til for eksempel en søkeside-container eller en handlekurv-container. Det jobbes også med nye enheter for å dynamisk kunne endre innhold basert på størrelsen på containteren uten nødvendigvis å bruke _container queries_, på samme måte som vi har `vh` og `vw` med dagens viewport-baserte størrelser. Oi, dette ser gøy ut, tenker du nå, og som meg har du sikkert lyst til å ta dette i bruk så fort som mulig… Dessverre er det ikke helt klart ennå; det jobbes aktivt med hvordan denne standarden kan se ut, og Chrome Canary er foreløpig eneste nettleser du kan teste ut dette i, selv om det med dagens versjon dessverre ikke fungerer helt optimalt. Men andre nettlesere vil raskt følge etter når dette blir en standard og det finnes en eksempelimplementasjon, og jeg ser frem til en fremtid hvor vi kan lage enda bedre tilpassede sider for våre besøkende :) Får å få flere detaljer om _container queries_ anbefaler jeg å ta et dypdykk i de vedlagte kildene, og hvis du snarere er en person som liker å høre noen snakke om dette vil jeg på det sterkeste anbefale å ta en titt på Una Kravets _"Designing in the Browser"_ på YouTube, [https://goo.gle/dib-chrome](https://goo.gle/dib-chrome), og spesielt de følgende episodene hvor hun snakker om _container queries_. [YouTube](https://youtu.be/gCNMyYr7F6w) [YouTube](https://youtu.be/sdjT0K4sR4k) #### Kilder - [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) - [Say Hello To CSS Container Queries](https://ishadeed.com/article/say-hello-to-css-container-queries/) - [A Primer On CSS Container Queries](https://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/) - [On Container Queries](https://ethanmarcotte.com/wrote/on-container-queries/) - [Samling av eksempler på codepen.io](https://codepen.io/collection/XQrgJo)