Containere inntar nå også CSS!

container-queries lar komponenter tilpasse seg plassen de får — ikke skjermen. Slik fungerer det, og når bør du fortsatt bruke media-queries.

media-queries har vært tilgjengelig i CSS siden 2012, og har hjulpet oss å skape responsive design for våre løsninger. media-queries lar oss definere ulik stil-setting i CSS, basert på bredden av skjermen. Slik kan vi tilpasse løsningen for mobil, siden vi da vet at bredden på skjermen er innenfor et gitt område.

Selv om media-queries har ført til en liten revolusjon innenfor responsive løsninger, har det sine begrensninger. For eksempel kan det ofte være nødvendig at en komponent endrer seg hvis kolonnen den blir plassert i er smal. Se for deg et oppsett med en venstre-meny og et hovedinnhold. Hvis du plasserer en komponent i den smale venstre-menyen kan det godt hende at den bør se litt annerledes ut, enn hvis den blir plassert i det brede området for hovedinnholdet (som vist i bildet nedenfor).

Ved å bruke media queries vil bredden av skjermen være 1200px, og stil-settingen av komponenten vil dermed følge reglene satt for dette. Det kunne gått an å definere varianter av komponenten; en liten og en stor. Ulempen er at det blir fort litt unødvendig komplekst, og ikke så lett å forstå koden. Heldigvis kommer container-queries til unnsetning!

container-queries ble tilgjengelig i 2023, og er nå støttet av alle de største nettleserne. De lar oss definere containere i CSS, slik at vi kan se på bredden til disse, i stedet for enheten. For å definere en container kan man skrive følgende i CSS:

.super-component {
  container superContainer / inline-size
}

Nå har vi definert en container (superContainer), som ser på inline-størrelsen til containeren. Vi kan nå skrive CSS for ulike størrelser av containeren. Eksempelet nedenfor viser hvordan vi kan justere font-størrelsen av h2-elementet når containeren blir større:

.super-component h2 {
  font-size: 1em;
}

/* hvis bredden er større enn 600px  */
@container (min-width: 600px) {
  .super-component h2 {
    font-size: 2em;
  }
}

Dette gir oss utrolig mange nye muligheter. Se for deg et komponent-bibliotek hvor hver komponent tilpasser seg automagisk til omgivelsene de blir plassert i. Du vil til en hver tid føle deg trygg på at din super-komponent alltid vil se bra ut, selv om den blir plassert steder du aldri kunne forutse.

Det er innført en rekke nye enheter for å angi størrelser knyttet til containeren i CSS:

• cqh: 1% av høyden
• cqw: 1% av bredden
• cqi: 1% av inline
• cqb: 1% av blokk
• cqmin: Den minste verdien av enten cqi eller cqb
• cqmax: Den største verdien av enten cqi eller cqb

Betyr dette slutten for media-queries? Nei, det gjør det absolutt ikke. Det vil fremdeles være mange fornuftige bruksområder, som for eksempel selve side-oppsettet. Men, container-queries vil ta over ansvaret for alle de use-casene hvor media-queries kommer til kort.

Containere har nå også inntatt CSS-verden, og også her gir det masse verdi!

← Alle innlegg