@layer-deklarasjon og rekkefølge
Deklarer navngitte kaskadelag, og styr prioriteringsrekkefølgen deres med @layer-setninger.
@layer-deklarasjon og rekkefølge er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 1 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 @layer?
CSS-kaskadelag (@layer) gir en mekanisme for å kontrollere prioriteten til CSS-regler i kaskaden eksplisitt, uavhengig av spesifisitet. Lag med lavere prioritet taper selv når de har selektorer med høyere spesifisitet.
Hvorfor @layer er viktig
Uten lag konkurrerer alle CSS-regler ved hjelp av spesifisitet og kildekoderekkefølge. Dette fører til spesifisitetskamper når reset-, komponent- og utility-stiler konkurrerer om prioriteten. Lag gir hver gruppe en fast og forutsigbar prioritet.
Deklarere lag
Deklarer lagene på forhånd i én enkelt setning. Rekkefølgen på deklarasjonene bestemmer prioriteten – senere lag vinner over tidligere lag.
<p>This scene only declares layer order — see the CSS panel:</p>
<p style="color:#888;font-size:0.9em;">@layer reset, base, components, utilities;</p>Plassering av lagdeklarasjonen
@layer-deklarasjonen bør stå øverst i stilarket (eller i hovedfilen for importer). Du kan legge til stiler i lagene i hvilken som helst rekkefølge etter deklarasjonen – prioriteten bestemmes av deklarasjonsrekkefølgen, ikke av hvor stilene legges til.
Hvorfor kildekoderekkefølgen ikke har betydning for lag
Fordi lagprioriteten bestemmes når lagene deklareres, kan du legge til stiler i et lag hvor som helst – selv før laget er deklarert, ved å referere til det på forhånd. Det er den deklarerte rekkefølgen som har betydning.
Regel for lagprioritet
En deklarasjon i et senere lag vinner alltid over en deklarasjon i et tidligere lag, uavhengig av spesifisitet:
<p>Reset layer !important paragraph (red)</p>
<div id="header">Components layer header (blue)</div>Stiler utenfor lag
Stiler som plasseres utenfor alle lag, kalles stiler utenfor lag. De har høyest prioritet – enda høyere enn det sist deklarerte laget. Bruk dette til nød-overstyringer som alltid skal vinne.
Prioritetsrekkefølgen
Fullstendig prioritetsrekkefølge (fra høyest til lavest for forfatterstiler):
- Stiler utenfor lag (utenfor alle @layer)
- Sist deklarerte lag (for eksempel utilities)
- Nest sist deklarerte lag (for eksempel components)
- Tidligere lag (base, reset)
Reversering av !important i lag
!important i lag er komplisert: Det snur lagrekkefølgen for den aktuelle deklarasjonen. !important i det tidligste laget vinner over !important i senere lag. Dette samsvarer med den opprinnelige kaskadeoppførselen for bruker- og forfatterstiler.
Nestede lag
Lag kan nøstes ved hjelp av punktnotasjon:
<p>This scene declares nested layers with dot notation — see the CSS panel.</p>Praktisk oppsettseksempel
Et realistisk lagoppsett for et prosjekt:
<p>A realistic project layer order — see the CSS panel.</p>Hurtigsjekk
Lagene deklareres slik: @layer base, components, utilities. Hvilket lags stiler vinner i en konflikt?
Oppsummering
@layer oppretter eksplisitt ordnede kaskadelag. Deklarer lagnavnene i prioritetsrekkefølge (lavest først). Senere lag vinner alltid over tidligere lag, uavhengig av spesifisitet. Stiler utenfor lag har høyest prioritet. !important snur lagprioriteten for den aktuelle deklarasjonen.
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
Ofte stilte spørsmål
Er leksjonen «@layer-deklarasjon og rekkefølge» gratis?
Ja – hele teksten i «@layer-deklarasjon og rekkefølge» 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 «@layer-deklarasjon og rekkefølge»?
Deklarer navngitte kaskadelag, og styr prioriteringsrekkefølgen deres med @layer-setninger. 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 1 av 4.
Hvor lang tid tar leksjonen «@layer-deklarasjon og rekkefølge»?
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
- @layer-deklarasjon og rekkefølge
- Legge stiler i lag
- Prioritet mellom lag og samspillet med !important
- Lag i tredjepartskode