CSS Container Queries: En Omfattende Guide til Definering av Container Queries

Responsivt webdesign har utviklet seg betydelig. Opprinnelig var media queries hjørnesteinen, som lot layouter tilpasse seg basert på visningsportens størrelse. Men etter hvert som nettsider blir mer komplekse og komponentbaserte, har behovet for en mer detaljert og fleksibel tilnærming blitt tydelig. Det er her CSS Container Queries kommer inn i bildet.

Hva er CSS Container Queries?

CSS Container Queries lar utviklere anvende stiler på et element basert på størrelsen eller tilstanden til dets omsluttende element, i stedet for visningsporten. Dette fundamentale skiftet muliggjør opprettelsen av virkelig gjenbrukbare og tilpasningsdyktige komponenter som sømløst kan integreres i ulike kontekster på en nettside.

Tenk deg en kortkomponent som må justere layouten sin avhengig av om den er plassert i en smal sidekolonne eller et bredt hovedinnholdsområde. Med container queries blir denne tilpasningen enkel, og sikrer optimal presentasjon uavhengig av den omkringliggende konteksten.

Hvorfor bruke Container Queries?

• Forbedret gjenbrukbarhet av komponenter: Komponenter blir virkelig uavhengige og tilpasningsdyktige, noe som forenkler vedlikehold og fremmer konsistens på tvers av ulike deler av et nettsted.
• Mer detaljert kontroll: I motsetning til media queries, som er avhengige av visningsporten, tilbyr container queries finkornet kontroll over styling basert på den spesifikke omgivelsen til en komponent.
• Forenklet utvikling: Reduserer behovet for komplekse JavaScript-løsninger for å håndtere komponentstyling basert på dens plassering i layouten.
• Forbedret brukeropplevelse: Leverer optimale opplevelser på tvers av ulike enheter og skjermstørrelser, og sikrer at innholdet alltid presenteres på den mest hensiktsmessige måten.

Definere en Beholder

Før du kan bruke container queries, må du definere hvilket element som skal fungere som beholder. Dette gjøres ved hjelp av container-type-egenskapen.

container-type-egenskapen

container-type-egenskapen spesifiserer om et element er en query-beholder, og i så fall, hvilken type beholder det er. Den aksepterer følgende verdier:

• size: Beholderens query-betingelser vil være basert på dens inline-størrelse (bredde i horisontale skrivemoduser, høyde i vertikale skrivemoduser) og blokk-størrelse (høyde i horisontale skrivemoduser, bredde i vertikale skrivemoduser). Dette er det vanligste og mest allsidige alternativet.
• inline-size: Beholderens query-betingelser vil være basert på dens inline-størrelse (bredde i horisontale skrivemoduser, høyde i vertikale skrivemoduser).
• normal: Elementet er ikke en query-beholder. Dette er standardverdien.
• style: Elementet er en stil-beholder. Stil-beholdere eksponerer egendefinerte egenskaper (custom properties) definert på dem til etterkommerelementer ved hjelp av @container style()-queryen. Dette er nyttig for styling basert på egendefinerte egenskaper.

Eksempel:

            
.container {
  container-type: size;
}

            

              
                Copy
              
            
          

Dette kodeutdraget definerer et element med klassen container som en query-beholder, noe som gjør størrelsen tilgjengelig for container queries.

Alternativt kan du bruke container: inline-size eller container: size. container-shorthand-egenskapen kan sette både container-type og container-name i en enkelt deklarasjon. Beholdernavnet brukes til å målrette mot en spesifikk beholder når man nøster beholdere.

Bruke Container Queries

Når du har definert en beholder, kan du bruke @container at-regelen for å anvende stiler basert på dens størrelse eller tilstand.

@container at-regelen

@container at-regelen ligner på @media at-regelen, men i stedet for å målrette mot visningsporten, målretter den mot en spesifikk beholder. Syntaksen er som følger:

            
@container [container-name] (condition) {
  /* Stiler som skal anvendes når betingelsen er oppfylt */
}

            

              
                Copy
              
            
          

• container-name (Valgfritt): Hvis du har gitt beholderen et navn ved hjelp av container-name-egenskapen, kan du spesifisere det her for å målrette mot den spesifikke beholderen. Hvis det utelates, vil det gjelde for den nærmeste forfedre-beholderen.
• condition: Betingelsen som må være oppfylt for at stilene skal anvendes. Dette kan være basert på beholderens bredde, høyde eller andre egenskaper.

Eksempel:

            
.card {
  display: flex;
  flex-direction: column;
}

@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }

  .card__image {
    width: 40%;
  }

  .card__content {
    width: 60%;
  }
}

            

              
                Copy
              
            
          

I dette eksempelet vil .card-elementet bytte fra en kolonnelayout til en radlayout når beholderen er minst 400px bred. .card__image- og .card__content-elementene vil også justere breddene sine tilsvarende.

Container Query-enheter

Container queries introduserer nye enheter som er relative til beholderens dimensjoner:

• cqw: 1 % av beholderens bredde.
• cqh: 1 % av beholderens høyde.
• cqi: 1 % av beholderens inline-størrelse.
• cqb: 1 % av beholderens blokk-størrelse.
• cqmin: Den minste av cqi eller cqb.
• cqmax: Den største av cqi eller cqb.

Disse enhetene lar deg skape stiler som er virkelig relative til beholderens størrelse, noe som gjør komponentene dine enda mer tilpasningsdyktige.

Eksempel:

            
.element {
  font-size: 2cqw;
  padding: 1cqh;
}

            

              
                Copy
              
            
          

I dette eksempelet vil skriftstørrelsen til .element være 2 % av beholderens bredde, og paddingen vil være 1 % av beholderens høyde.

Eksempler fra den virkelige verden

La oss utforske noen praktiske eksempler på hvordan container queries kan brukes til å skape responsive og tilpasningsdyktige komponenter.

Eksempel 1: Kortkomponent

Tenk på en kortkomponent som viser informasjon om et produkt. Denne komponenten kan trenge å tilpasse layouten sin avhengig av hvor den er plassert på siden.

HTML:

            

  

    
    

      
Product Title
      
Product description goes here.
      Learn More
    
  


            

              
                Copy
              
            
          

CSS:

            
.container {
  container-type: inline-size;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 16px;
}

.card__image {
  width: 100%;
  margin-bottom: 16px;
}

.card__title {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }

  .card__image {
    width: 40%;
    margin-bottom: 0;
    margin-right: 16px;
  }

  .card__content {
    width: 60%;
  }
}

            

              
                Copy
              
            
          

I dette eksempelet er .container-elementet definert som en inline-størrelse beholder. Når beholderen er mindre enn 500px bred, vil kortkomponenten vise bildet og innholdet i en kolonnelayout. Når beholderen er 500px eller bredere, vil kortkomponenten bytte til en radlayout, med bildet til venstre og innholdet til høyre. Dette sikrer at kortkomponenten ser bra ut uansett hvor den er plassert på siden.

Eksempel 2: Navigasjonsmeny

Et annet vanlig bruksområde for container queries er å tilpasse en navigasjonsmeny basert på tilgjengelig plass.

HTML:

            

  


            

              
                Copy
              
            
          

CSS:

            
.nav-container {
  container-type: inline-size;
  width: 100%;
  background-color: #f0f0f0;
}

.nav {
  padding: 16px;
}

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.nav__item {
  margin-bottom: 8px;
}

.nav__link {
  text-decoration: none;
  color: #333;
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

@container (max-width: 400px) {
  .nav__list {
    flex-direction: column;
  }

  .nav__item {
    margin-bottom: 16px;
  }

  .nav__link {
    display: block;
    width: 100%;
    text-align: center;
  }
}

            

              
                Copy
              
            
          

I dette eksempelet er .nav-container-elementet definert som en inline-størrelse beholder. Når beholderen er 400px bred eller mindre, vil navigasjonsmenyen bytte til en kolonnelayout, der hver lenke tar opp hele bredden av beholderen. Når beholderen er bredere enn 400px, vil navigasjonsmenyen vise lenkene på en rad, med mellomrom mellom dem. Dette gjør at navigasjonsmenyen kan tilpasse seg forskjellige skjermstørrelser og retninger.

Nøsting av Beholdere

Container queries kan nøstes, noe som gir enda mer kompleks og detaljert kontroll over styling. For å målrette mot en spesifikk beholder ved nøsting, kan du bruke container-name-egenskapen for å gi beholderne dine unike navn. Deretter kan du i @container at-regelen spesifisere navnet på beholderen du vil målrette mot.

Eksempel:

            

  

    
Content
  


            

              
                Copy
              
            
          

            
.outer-container {
  container-type: inline-size;
  container-name: outer;
}

.inner-container {
  container-type: inline-size;
  container-name: inner;
}

@container outer (min-width: 500px) {
  .inner-container {
    background-color: lightblue;
  }
}

@container inner (min-width: 300px) {
  p {
    font-size: 1.2rem;
  }
}

            

              
                Copy
              
            
          

I dette eksempelet har .outer-container navnet «outer» og .inner-container har navnet «inner». Den første @container at-regelen målretter mot «outer»-beholderen og legger til en bakgrunnsfarge på .inner-container når «outer»-beholderen er minst 500px bred. Den andre @container at-regelen målretter mot «inner»-beholderen og øker skriftstørrelsen til p-elementet når «inner»-beholderen er minst 300px bred.

Nettleserstøtte

Container queries har utmerket og økende nettleserstøtte. De fleste moderne nettlesere støtter funksjonene container-type, container-name og @container fullt ut. Det er alltid lurt å sjekke Can I use for den nyeste kompatibilitetsinformasjonen.

For eldre nettlesere som ikke støtter container queries, kan du bruke polyfills for å gi reserve-støtte. Det er imidlertid viktig å merke seg at polyfills kanskje ikke gjenskaper atferden til native container queries perfekt, og de kan øke sidens lastetid.

Beste Praksis

Her er noen beste praksiser å huske på når du arbeider med container queries:

• Start med mobil-først: Design komponentene dine for den minste beholderstørrelsen først, og bruk deretter container queries for å gradvis forbedre layouten for større beholdere.
• Bruk meningsfulle beholdernavn: Hvis du nøster beholdere, bruk beskrivende navn som tydelig indikerer formålet med hver beholder.
• Unngå for komplekse queries: Hold container queries enkle og fokuserte. For mange komplekse queries kan gjøre koden din vanskelig å forstå og vedlikeholde.
• Test grundig: Test komponentene dine i en rekke beholderstørrelser og kontekster for å sikre at de tilpasser seg korrekt.
• Vurder ytelse: Vær oppmerksom på ytelsespåvirkningen av container queries, spesielt når du bruker komplekse queries eller et stort antall beholdere.

Hensyn til tilgjengelighet

Selv om container queries primært fokuserer på visuelle layoutjusteringer, er det avgjørende å vurdere tilgjengelighet for å sikre at komponentene dine forblir brukbare for alle.

• Oppretthold semantisk struktur: Sørg for at den underliggende HTML-strukturen forblir semantisk og tilgjengelig, uavhengig av beholderens størrelse.
• Test med hjelpemidler: Test komponentene dine med skjermlesere og andre hjelpemidler for å verifisere at innholdet fortsatt er tilgjengelig og forståelig.
• Tilby alternativt innhold: Hvis beholderstørrelsen endrer innholdet betydelig, bør du vurdere å tilby alternativt innhold eller mekanismer for å sikre at brukere med nedsatt funksjonsevne kan få tilgang til informasjonen.

Utover Størrelse: Tilstands-queries

Selv om størrelsesbaserte container queries er de vanligste, strekker fremtiden for container queries seg utover bare størrelse. Det finnes nye spesifikasjoner og forslag for stil-queries og tilstands-queries.

Stil-queries lar deg anvende stiler basert på egendefinerte egenskaper (custom properties) definert på beholderen. Dette muliggjør kraftig styling basert på dynamiske data og konfigurasjon.

Tilstands-queries ville latt deg spørre om tilstanden til en beholder, for eksempel om den er i fokus, har musepekeren over seg, eller har en spesifikk klasse. Dette kan åpne for enda flere muligheter for adaptive komponenter som responderer på brukerinteraksjon.

Konklusjon

CSS Container Queries er et kraftig verktøy for å skape responsive og tilpasningsdyktige webkomponenter. Ved å la deg style elementer basert på størrelsen eller tilstanden til deres omsluttende element, tilbyr container queries en mer detaljert og fleksibel tilnærming til responsivt design enn tradisjonelle media queries. Ettersom nettleserstøtten fortsetter å forbedres, er container queries i ferd med å bli en essensiell del av enhver webutviklers verktøykasse. Ta dem i bruk for å bygge mer robuste, gjenbrukbare og brukervennlige webopplevelser for et globalt publikum.

Mulighetene som låses opp av container queries går langt utover enkle layoutjusteringer. De muliggjør opprettelsen av kontekstbevisste komponenter som kan tilpasse seg en rekke situasjoner, noe som resulterer i en mer sømløs og intuitiv brukeropplevelse. Når du utforsker denne kraftige funksjonen, bør du vurdere hvordan den kan forbedre gjenbrukbarheten, vedlikeholdbarheten og tilpasningsevnen til webprosjektene dine, og til slutt bidra til et mer inkluderende og globalt tilgjengelig web.

Ved å utnytte kraften i container queries kan du skape webopplevelser som ikke bare er visuelt tiltalende, men også svært tilpasningsdyktige og brukersentrerte, og som imøtekommer de ulike behovene til et globalt publikum.