CSS @layer regel

Definitie en gebruik

CSS @layer Regels kunnen worden gebruikt om de volgorde van de evaluatie van CSS laagcascading (cascade layers) te controleren.

Dit wordt bereikt door eerst een laag te definiëren en vervolgens de regelenset die op een specifieke volgorde moet worden geëvalueerd, in die laag te wrappen.

@layer Kunnen zowel genaamd als ongenaamd worden gedefinieerd.

Zonder naam @layer Wordt genoemdAnonieme laagAnonieme lagen worden geëvalueerd volgens de volgorde van de verklaringen (zie onderstaande voorbeelden). Ze volgen de standaard volgorde van laagcascading (van boven naar beneden).

Met een unieke naam @layer Wordt genoemdGenaamde laagMet behulp van genaamde lagen kunnen we de benodigde exacte volgorde van laagcascading specificeren (zie onderstaande voorbeelden). De volgorde gaat van het minst specifiek naar het meest specifiek, van links naar rechts gerangschikt.

Voorbeeld

Voorbeeld 1

Gebruik anonieme lagen (ze volgen de standaard volgorde van laagcascading - van boven naar beneden):

/* Laag 1 */
@layer {
  body {
    background: pink;
  }
}
/* Laag 2 */
@layer {
  body {
    background: lightblue; /* Laatste laag werkt */
  }
}

Probeer het zelf uit

Voorbeeld 2

Gebruik genaamde lagen (en specificeer de benodigde exacte volgorde van laagcascading):

/* Specifieke volgorde van laagcascading aan geven */
@layer bgblue, bgpink;
/* Laag 1 */
@layer bgpink {
  body {
    background: pink; /* Werkt */
  }
}
/* Laag 2 */
@layer bgblue {
  body {
    background: lightblue;
  }
}

Probeer het zelf uit

CSS syntaxis

@layer name {
  css declarations;
}

Eigenschapswaarde

Browserondersteuning

De cijfers in de tabel geven de versie van de browser weer die de @ regel volledig ondersteunt.