CSS Academy · leksjon

@scope for avgrensede stiler

Begrens rekkevidden til CSS-regler til bestemte undertrær ved hjelp av @scope-at-regelen.

Leksjon 3 av 413 trinn

@scope for avgrensede stiler er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hva er @scope?

At-regelen @scope (Chrome 118+, Safari 17.4+) begrenser CSS-regler til et bestemt deltre i DOM-en. Regler inni @scope gjelder bare for elementer innenfor den deklarerte scoperoten, slik at stilene ikke lekker mellom komponenter.

Grunnleggende syntaks

Deklarer et scope med en selektor for scoperoten. Alle reglene inni scope-et gjelder bare for etterkommere av scoperøtter som samsvarer — ikke for hele dokumentet.

<div class="card">
  <div class="title">Scoped Title</div>
  <div class="body">Scoped body text &mdash; styles only apply inside .card.</div>
</div>

Scoperot

Scoperoten (@scope (.card)) definerer inngangspunktet. Elementer inni scopet som samsvarer med .title, stilsettes. Elementer utenfor .card med klassen .title påvirkes ikke — ekte stilinnkapsling uten Shadow DOM.

Scope-grense

De kan valgfritt definere en scope-grense med to: @scope (.card) to (.nested-card). Reglene gjelder inni .card, men stopper ved etterkommere av .nested-card — slik at stilene begrenses til ett nivå med komponentnesting og dypere instanser utelates.

:scope-pseudoklassen inni @scope

Inni en @scope-blokk viser :scope til selve scoperotelementet. @scope (.card) { :scope { border-radius: 8px; } } stilsetter selve .card-elementet, ikke etterkommerne.

Nærhetsbasert spesifisitet

@scope innfører spesifisitet basert på nærhet: når flere scope-er samsvarer med et element, vinner den nærmeste overordnede scoperoten — uavhengig av selektorspesifisiteten. Dette hindrer at stiler for dypt nestede komponenter blir overstyrt av stiler fra fjerntliggende overordnede scope-er.

@scope kontra CSS Modules

CSS Modules genererer unike, hash-baserte klassenavn for å oppnå avgrensning ved bygging – en problemstilling for JavaScript-bundleren. @scope gir avgrensning direkte i nettleseren uten byggeverktøy, hash-navn eller rammespesifikk syntaks – ren CSS.

@scope kontra Shadow DOM

Shadow DOM skaper fullstendig stilisolasjon – stiler utenfra kan ikke trenge inn. @scope skaper delvis isolasjon – stiler utenfra kan fortsatt nå avgrensede elementer hvis spesifisiteten er høy nok. @scope er et enklere alternativ for komponentavgrensning uten fullstendig isolasjon.

Lagdeling med @scope

Kombiner @scope med @layer for finmasket kontroll over kaskaden: Definer komponentavgrensede stiler i et komponentlag. Slik håndterer du både kaskaderekkefølge (via lag) og stilavgrensning (via @scope) på en komponerbar måte, uten komplisert akrobatikk med klassenavn.

Praktiske bruksområder

Komponenter i designsystemer: Avgrens alle knappestiler til @scope (.button-group) slik at stiler for indre knapper aldri lekker ut. Isolering av widgeter: Avgrens stilene til en tredjepartswidget til beholderen, slik at konflikter med sidens globale stiler unngås.

Nettleserstøtte og reservealternativ

@scope støttes i Chrome 118+, Safari 17.4+ og Firefox 128+. I nettlesere som ikke støtter det, ignoreres stiler i @scope – kaskaden faller tilbake til globale stiler. Bruk @scope som progressiv forbedring når komponentavgrensning er nyttig, men ikke kritisk.

Kunnskapssjekk

Hvilket problem løser @scope som er vanskelig å håndtere med tradisjonelle CSS-selektorer alene?

Besvar den i den interaktive leksjonen

Oppsummering

@scope begrenser bruken av CSS-regler til et deklarert DOM-under tre, og muliggjør dermed naturlig stilinnkapsling uten Shadow DOM eller hash-baserte klassenavn fra byggeverktøy. Avgrensningsgrenser, spesifisitet basert på nærhet og integrasjon med @layer gjør dette til et kraftig grunnprimitiv for komponentavgrensede designsystemer i ren CSS.

Gratis å komme i gang

Lær deg CSS med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 40
Leksjoner: 159

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «@scope for avgrensede stiler» gratis?

Ja – hele teksten i «@scope for avgrensede stiler» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «@scope for avgrensede stiler»?

Begrens rekkevidden til CSS-regler til bestemte undertrær ved hjelp av @scope-at-regelen. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med CSS Academy?

Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «@scope for avgrensede stiler»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?

Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til CSS Academy