Reguła CSS @layer

Definicja i użycie

CSS @layer Reguły mogą być używane do kontrolowania kolejności oceny stylów CSS (kaskadowych warstw).

To osiąga się poprzez najpierw zdefiniowanie warstwy, a następnie otoczenie zestawu reguł, które mają być oceniane w określonej kolejności, w tej warstwie.

@layer może być z nazwą lub bez niej zdefiniowana.

bez nazwy @layer nazywanaAnonimowa warstwaAnonimowe warstwy są oceniane w kolejności deklaracji (zobacz poniższe przykłady). Przestrzegają domyślnego porządku kaskadowego (od góry do dołu).

z unikalną nazwą @layer nazywanaNazwana warstwaPrzez nazwaną warstwę możemy określić dokładny porządek kaskadowy (zobacz poniższe przykłady). Porządek jest od najmniej konkretnej do najbardziej konkretnej, od lewej do prawej.

Przykład

Przykład 1

Użyj anonimowej warstwy (będzie przestrzegać domyślnego porządku kaskadowego - od góry do dołu):

/* Warstwa 1 */
@layer {
  body {
    background: pink;
  }
}
/* Warstwa 2 */
@layer {
  body {
    background: lightblue; /* Ostatnia warstwa jest aktywna */
  }
}

Spróbuj sam

Przykład 2

Użyj nazwanego warstwy (i określ dokładny porządek kaskadowy):

/* Precyzyjnie określony porządek kaskadowy */
@layer bgblue, bgpink;
/* Warstwa 1 */
@layer bgpink {
  body {
    background: pink; /* Aktywne */
  }
}
/* Warstwa 2 */
@layer bgblue {
  body {
    background: lightblue;
  }
}

Spróbuj sam

Gramatyka CSS

@layer name {
  deklaracje CSS;
}

Wartość atrybutu

Obsługa przeglądarki

Liczby w tabeli oznaczają wersje przeglądarek, które w pełni obsługują tę @ zasadę.