Lägga till format i lager

Du kan lägga till format i ett lager inline (inuti ett @layer-block) eller via @import (för att tilldela en importerad formatmall till ett lager).

Omslut reglerna med ett @layer-block som innehåller lagrets namn:

Du kan lägga till i ett lager i flera separata @layer-block. Alla deklarationer slås samman i lagret:

Ett @layer-block utan namn skapar ett anonymt lager. Anonyma lager kan inte byggas ut senare och finns på den plats där de förekommer:

Tilldela en hel importerad formatmall till ett lager:

I ett modulärt projekt lägger varje komponentfil till format i components-lagret:

Både Sass och PostCSS fungerar tillsammans med @layer. Du kan definiera lager i huvudfilen och använda @use eller @import för att inkludera komponentdelar som lägger till format i dessa lager.

Inline-format (style=""-attributet) påverkas inte av lager – de vinner alltid över format från alla lager. Endast regler i formatmallar (inklusive <style>-block) kan placeras i lager.

Chrome DevTools visar lagergränser i panelen Styles. Regler från ett lager med lägre prioritet som överskuggas av ett högre lager visas överstrukna, och det vinnande lagret anges.

Webbläsare som inte stöder @layer behandlar alla @layer-block som vanliga CSS-block (de återger allt). Kaskadbeteendet skiljer sig, men inga format går förlorade. För säkerhets skull kan du omsluta kod som är beroende av funktionen i @supports (@layer selector).

Migreringsstrategi:

1. Deklarera lager högst upp i huvudfilen för CSS
2. Omslut varje befintlig CSS-sektion med motsvarande lagerblock
3. Testa och åtgärda eventuella prioriteringsproblem som uppstår
4. Ta med tiden bort selektorer med onödigt hög specificitet

Lägg till format i lager med namngivna @layer name { }-block – de kan delas upp mellan flera filer och slås alla samman. Tilldela importerade formatmallar till lager med @import layer(). Anonyma lager kan inte öppnas igen. Inline-format överskuggar alltid format som deklarerats i lager.