Strona główna >CSS >Leksykon CSS – właściwości, selektory, funkcje >@layer

@layer

@layer nazwa { … } @layer a, b, c;

Warstwy kaskadowe grupują reguły i ustalają ich priorytet według kolejności warstw: reguła z późniejszej warstwy wygrywa z regułą z wcześniejszej, nawet jeśli ma niższą specyficzność. Specyficzność decyduje tylko wewnątrz jednej warstwy. Typowo: reset → biblioteki → komponenty → wyjątki.

Wartości

  • @layer a, b, c; – ustala kolejność warstw z góry (priorytet rośnie w prawo).
  • @layer a { … } – reguły do warstwy; pierwsze wystąpienie nazwy wyznacza jej miejsce w kolejności.
  • @layer { … } – anonimowa warstwa (później nie da się do niej nic dodać).
  • @layer a.b – zagnieżdżona warstwa b w warstwie a.
  • Style poza warstwami mają pierwszeństwo przed wszystkimi warstwami.

Przykłady

Reguła z warstwy components wygrywa z regułą z ID z warstwy base, bo ta warstwa stoi później w kolejności:

<form id="form">
  <button class="button">Wyślij</button>
</form>

@layer base, components;
@layer components {
  .button {
    padding: 8px 16px;
    border: 0;
    border-radius: 6px;
    background: #0088d1;
    color: #fff;
  }
}
@layer base {
  #form button {
    background: #ccc;
    color: #222;
  }
}
Wynik

Na co uważać

  • Style poza warstwami wygrywają ze wszystkimi warstwami – także cudzy CSS bez warstw (starsze biblioteki, wtyczki) nadpisuje twoje style w warstwach. Cudzy plik włożysz do warstwy przez @import url(…) layer(library).
  • Przy !important kolejność jest odwrócona: wygrywa !important z wcześniejszej warstwy, a z każdej warstwy wygrywa z !important poza warstwami.
  • Kolejność warstw wyznacza pierwsze wystąpienie nazwy. Wiersz @layer a, b, c; na początku głównego arkusza stylów zapobiega nieoczekiwanej kolejności.
  • Obsługa: Chrome od 99, Firefox od 97, Safari od 15.4. Starsza przeglądarka odrzuca cały blok warstwy.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: we wszystkich popularnych przeglądarkach od marca 2022, za szeroko dostępne uznawane od września 2024. Od wersji: Chrome 99, Firefox 97, Safari 15.4. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
Specyficzność i kaskada
!important
@import
inherit, initial, unset, revert
:where()