CodeWorlds
Reguła CSSReguły @

@layer

Dzieli style na warstwy kaskadowe o ustalonej kolejności. Reguła z późniejszej warstwy wygrywa bez względu na specyficzność selektora.

Na tej stronie

Przykład

#
CSS
@layer reset, base, components, utilities;

@layer reset {
  button { margin: 0; border: 0; font: inherit; }
}

@layer base {
  a { color: #a78bfa; }
}

@layer components {
  button.btn {
    padding: 8px 16px;
    border-radius: 10px;
    background: #7c3aed;
    color: #fff;
  }
}

@layer utilities {
  .bg-rose { background: #f43f5e; }
}
Podgląd

Klasa pomocnicza .bg-rose wygrywa z button.btn, choć ma niższą specyficzność, bo warstwa utilities jest ostatnia na liście.

Definicja i zastosowanie

#

Reguła @layer porządkuje kaskadę. Style zamykasz w nazwanych warstwach, a o tym, która deklaracja wygra, decyduje najpierw kolejność warstw, a dopiero potem specyficzność selektora i położenie w kodzie. Selektor #menu .link z wcześniejszej warstwy przegra z samym a z warstwy późniejszej.

Kolejność ustala pierwsze pojawienie się nazwy. Najwygodniej zapisać ją raz, na początku arkusza: @layer reset, base, components, utilities;. Potem możesz dopisywać style do warstw w dowolnym miejscu i w dowolnej kolejności, a nawet w osobnych plikach, np. przez @import url("reset.css") layer(reset).

Style zapisane poza jakąkolwiek warstwą tworzą niejawną warstwę, która jest ostatnia, więc wygrywają ze wszystkimi warstwami. To celowe: istniejący kod dalej działa, a warstwy możesz wprowadzać stopniowo. Przy !important kolejność się odwraca: ważna deklaracja z pierwszej warstwy pokonuje ważne deklaracje z warstw późniejszych.

Popularny układ to cztery warstwy: reset zeruje domyślne style przeglądarki, base ustawia typografię i wygląd zwykłych elementów HTML, components zawiera przyciski, karty i formularze, a utilities małe klasy pomocnicze, które mają zawsze wygrywać. Podobny podział stosuje Tailwind CSS w wersji 4.

Składnia

#
Składnia
@layer reset, base, components;

@layer components {
  selektor { właściwość: wartość; }
}

Jak wygrywają warstwy

#

  • kolejność warstw

    theme, zielony

    Warstwa theme jest druga na liście, więc wygrywa, choć jej blok stoi w kodzie wyżej niż blok base.

  • mocniejszy selektor

    theme, zielony

    W base stoi selektor z identyfikatorem, a mimo to przegrywa. Warstwy porównuje się przed specyficznością.

  • styl bez warstwy

    styl bez warstwy, bursztynowy

    Reguła spoza warstw wygrywa z każdą warstwą, nawet gdy ma słabszy selektor i stoi w kodzie wcześniej.

  • !important

    base, czerwony

    Przy !important kolejność się odwraca: ważna deklaracja z wcześniejszej warstwy pokonuje ważną z późniejszej. Dzięki temu reset może zabezpieczyć kluczowe style.

  • warstwy zagnieżdżone

    components.buttons, błękitny

    Warstwy można zagnieżdżać, a do wewnętrznej odwołujesz się przez kropkę. Kolejność liczy się wtedy wewnątrz grupy components.

  • revert-layer

    powrót do base po najechaniu

    Słowo revert-layer cofa wartość do tej z wcześniejszych warstw. Najedź kursorem na przycisk: wraca do zielonego tła z warstwy base.

Jak wygrywają warstwy w praktyce

#

kolejność warstw

Warstwa theme jest druga na liście, więc wygrywa, choć jej blok stoi w kodzie wyżej niż blok base.
@layer base, theme;

@layer theme {
  .demo { background: #10b981; }
}

@layer base {
  .demo { background: #f43f5e; }
}

mocniejszy selektor

W base stoi selektor z identyfikatorem, a mimo to przegrywa. Warstwy porównuje się przed specyficznością.
@layer base, theme;

@layer base {
  #cta.demo { background: #f43f5e; }
}

@layer theme {
  .demo { background: #10b981; }
}

styl bez warstwy

Reguła spoza warstw wygrywa z każdą warstwą, nawet gdy ma słabszy selektor i stoi w kodzie wcześniej.
button { background: #f59e0b; }

@layer theme {
  #cta.demo { background: #10b981; }
}

!important

Przy !important kolejność się odwraca: ważna deklaracja z wcześniejszej warstwy pokonuje ważną z późniejszej. Dzięki temu reset może zabezpieczyć kluczowe style.
@layer base, theme;

@layer base {
  .demo { background: #f43f5e !important; }
}

@layer theme {
  .demo { background: #10b981 !important; }
}

warstwy zagnieżdżone

Warstwy można zagnieżdżać, a do wewnętrznej odwołujesz się przez kropkę. Kolejność liczy się wtedy wewnątrz grupy components.
@layer components.base, components.buttons;

@layer components.buttons {
  .demo { background: #0ea5e9; }
}

@layer components.base {
  .demo { background: #f43f5e; }
}

revert-layer

Słowo revert-layer cofa wartość do tej z wcześniejszych warstw. Najedź kursorem na przycisk: wraca do zielonego tła z warstwy base.
@layer base, theme;

@layer base {
  .demo { background: #10b981; }
}

@layer theme {
  .demo { background: #f43f5e; }
  .demo:hover { background: revert-layer; }
}

Więcej przykładów

#
Styl biblioteki w warstwie przegrywa z Twoim kodem
CSS
@layer vendor, app;

@layer vendor {
  #widget .title { color: #f43f5e; }
}

@layer app {
  .title { color: #10b981; }
}
Podgląd

Selektor biblioteki zawiera identyfikator, a mimo to przegrywa, bo warstwa vendor jest wcześniej. W praktyce bibliotekę wczytasz do warstwy przez @import url("lib.css") layer(vendor).

Obsługa przeglądarek

#

Szeroko dostępne · od 2022 roku

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

  • Chrome
  • Edge
  • Firefox
  • Safari

Dobre praktyki

#
  • Zapisz kolejność wszystkich warstw w jednej linii na samym początku arkusza. Kolejność ustala pierwsze wystąpienie nazwy, więc bez tej linii łatwo ją przypadkiem zmienić.
  • Pamiętaj, że style poza warstwami wygrywają z warstwami. Przenosząc stary kod, zacznij od resetu i bibliotek, a własne style zostaw na razie poza warstwami.
  • Warstwy zastępują wyścig na specyficzność. Zamiast dopisywać kolejne klasy i !important, przenieś regułę do późniejszej warstwy.

Powiązane hasła

#

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs
Używamy cookies, żeby zwiększyć Twoje doświadczenia na stronie
Polityka Prywatności
OK