CSS @layer regeln

Definition och användning

CSS @layer Regler kan användas för att kontrollera i vilken ordning CSS-stiglager (cascade layers) ska bedömas.

Detta uppnås genom att först definiera ett lager och sedan inkludera en uppsättning regler som behöver bedömas i en specifik ordning inom detta lager.

@layer Kan definieras med eller utan namn.

Utan namn @layer KallasAnonyma lagerAnonyma lager bedöms i den ordning de deklarerades (se exempel nedan). De följer standardstigordningen (från topp till botten).

Med unikt namn @layer KallasNamngivna lagerGenom att använda namngivna lager kan vi specificera den exakta stigordningen (se exempel nedan). Ordningen är från minst specifik till mest specifik, från vänster till höger.

Exempel

Exempel 1

Använd anonyma lager (de följer standardstigordningen - från topp till botten):

/* Lager 1 */
@layer {
  body {
    background: rosa;
  }
}
/* Lager 2 */
@layer {
  body {
    background: ljusblå; /* Sista laget gäller */
  }
}

Prova själv

Exempel 2

Använd namngivna lager (och specificera den exakta stigordningen):

/* Specificera exakt stigordning */
@layer bgblue, bgpink;
/* Lager 1 */
@layer bgpink {
  body {
    background: rosa; /* Verkar */
  }
}
/* Lager 2 */
@layer bgblue {
  body {
    background: ljusblå;
  }
}

Prova själv

CSS-syntax

@layer name {
  css-deklarationer;
}

Egenskapsvärde

Webbläsarstöd

Talen i tabellen representerar den första webbläsareversion som fullständigt stöder denna @ regel.