När du introducerar kaskadlager i befintlig CSS börjar du med att bestämma var de gamla reglerna hör hemma. Vanliga regler utan lager har högre prioritet än alla namngivna lager, så nya överstyrningar i lager fungerar först när konkurrerande äldre regler flyttas till ett lager med lägre prioritet.

Den här guiden är avsedd för dig som redigerar en webbsida med egen kod på en Mac och kontrollerar den i en webbläsare på datorn. Den konkreta uppgiften är att placera en befintlig formatmall under nya komponentstilar och samtidigt behålla en begriplig migreringsväg. Exemplen använder lokala filer, syntetiska etiketter och en enkel CSS-struktur.

Varför förlorar nya stilar i lager mot befintliga regler?

För konkurrerande vanliga deklarationer i författarformatmallar har CSS utan lager företräde framför CSS i alla uttryckliga lager. En mer specifik väljare eller en senare position i ett lager kan inte övervinna den gränsen. CSS-specifikationen visar detta beteende med en regel utan lager som överstyr en mer specifik regel i ett lager. CSS Cascading and Inheritance Level 5.

Tänk på det här CSS-utdraget, som riktar sig mot ett element med klassen tile:

.tile {
  background-color: #b8bdc5;
}

@layer components {
  .tile {
    background-color: #246a73;
  }
}

Bakgrunden förblir grå. Det ändrar inte prioriteten hos den vanliga regeln utan lager att namnge lagret overrides, flytta dess block längre ned i filen eller öka specificiteten hos dess väljare. Lagernamn har ingen inbyggd betydelse; deras deklarerade ordning avgör förhållandet mellan dem. MDN: Kaskadlager.

Följande beslutstabell förutsätter konkurrerande formatmallsdeklarationer med samma författarursprung och kontext, utan infogade stilar, animeringar eller övergångar som påverkar egenskapen. Läs varje rad från lägre till högre prioritet.

Deklarationstyp Lägre → högre prioritet
Vanlig Först deklarerade lagret → senare deklarerade lager → regler utan lager
!important Regler utan lager → senare deklarerade lager → först deklarerade lagret

Prioriteten mellan lager avgörs före väljarspecificiteten. Inom det vinnande lagret spelar specificiteten fortfarande roll; källordningen kan avgöra deklarationer som annars är likvärdiga. Omvändningen för viktiga deklarationer innebär att en migrering måste hantera vanliga och viktiga regler separat. MDN: Kaskadlager.

Vilken migreringsgräns bör du välja?

Börja med ett element och en egenskap som den nya CSS-koden behöver styra. Granska vilken deklaration som vinner nu, hitta dess formatmall och avgör om du kan ändra filen eller hur sidan läser in den. Då får du den minsta användbara migreringsgränsen.

Din situation Praktiskt nästa steg Konsekvens
Befintlig CSS måste behålla sin prioritet Låt den ligga utan lager och lägg till standardvärden med lägre prioritet i lager Nya lager anger värden där starkare regler inte konkurrerar
Du kan redigera befintlig CSS Placera valda äldre regler i @layer legacy Senare lager kan överstyra vanliga äldre deklarationer
Du kan ändra formatmallens startpunkt Importera den befintliga filen med layer(legacy) Den importerade formatmallen hamnar i lagret utan att väljarna skrivs om
Du kan inte ändra konkurrerande äldre CSS eller hur den läses in Behåll tillfälligt den nödvändiga överstyrningen utan lager Du behöver fortfarande hantera specificitet och andra kaskadfaktorer

Dessa val följer de tre mekanismer för lager som CSS dokumenterar: en sats deklarerar lagernamn, ett block tilldelar regler till ett lager och en lagerindelad import tilldelar en importerad formatmall till ett lager. En sats flyttar inte i sig befintliga regler. CSS Cascading and Inheritance Level 5: Declaring Cascade Layers.

I en liten formatmall kan det vara praktiskt att lägga dess vanliga regler i ett block. För en befintlig extern fil skapar en lagerindelad import en tydlig gräns. Placera inte befintliga @import-regler i ett @layer-block: importer är regler på toppnivå med begränsningar för placeringen. MDN: @import.

Den rekommenderade migreringen nedan importerar den äldre filen till ett namngivet lager. Det ändrar dess prioritet i förhållande till andra formatmallar, så kontrollera eventuell annan inläst CSS innan du tillämpar samma ändring utanför exempelsidan.

Hur bygger du ett komplett lokalt exempel på en Mac?

Skapa en mapp med följande tre textfiler. Använd en kodredigerare och behåll filändelserna .html och .css. Filerna kräver inga paket, skript, typsnitt eller nedladdade resurser. Namnen är lokala exempelresurser.

Spara det här fullständiga dokumentet som sample.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Layer sample</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main id="sample">
    <h1>Shape sample</h1>
    <p>Tile A</p>
    <div class="tile" aria-label="Sample shape"></div>
  </main>
</body>
</html>

Dokumentet länkar bara till styles.css. HTML använder rel="stylesheet" och href för att koppla den externa formatmallen till sidan. Den aktuella HTML-standarden definierar inget attribut layer för elementet link; tilldela resursen till ett lager via CSS. HTML Standard: The link element.

Spara den här fullständiga formatmallen som legacy.css. Den representerar befintliga regler vars väljare förblir oförändrade:

body {
  margin: 2rem;
  font-family: system-ui, sans-serif;
  color: #26313a;
  background-color: #f4f5f7;
}

#sample .tile {
  width: 6rem;
  height: 6rem;
  background-color: #b8bdc5;
  border-radius: 0;
}

Spara den här fullständiga startformatmallen som styles.css:

@layer legacy, components;
@import url("legacy.css") layer(legacy);

@layer components {
  .tile {
    background-color: #246a73;
    border-radius: 50%;
  }
}

Öppna sample.html i en aktuell version av Safari eller Firefox för datorn. Det förväntade resultatet är en turkos cirkel under etiketten Tile A. Det äldre lagret anger måtten, medan det senare komponentlagret anger bakgrunden och den rundade formen. Dess väljare med en enda klass vinner över den äldre ID-väljaren eftersom deklarationerna konkurrerar mellan lager. MDN: @layer.

Startfilen anger lagerordningen först, placerar importen före blocket och lägger sedan till komponentregler. Det följer den dokumenterade importsatsen och placeringsreglerna. En lagerdeklaration kan stå före importer; ett lagerblock kan det inte. MDN: @import.

Vad bör du ändra på en befintlig sida?

Byt ut sidans direkta formatmallshänvisning mot den nya startformatmallen när du använder den här lösningen. Om sidan fortfarande läser in legacy.css direkt samtidigt som den importerar den till ett lager, tillför den direkta inläsningen deklarationer utan lager som kan slå ut migreringen.

Använd exemplet för att förutsäga problemet: lägg till en separat direkt formatmallslänk till legacy.css, så kan dess vanliga deklarationer återställa den grå kvadraten. Om du tar bort den direkta inläsningen ligger de äldre reglerna kvar i det avsedda lagret. Förutsägelsen följer specifikationens placering av regler utan lager efter uttryckliga lager i den vanliga prioritetsordningen. CSS Cascading and Inheritance Module Level 5: Layer Ordering.

Ha alla tre filer tillsammans i det här exemplet. När du anpassar metoden ska du behålla befintliga resursvillkor, till exempel mediebegränsningar, och kontrollera att alla hänvisade formatmallar läses in innan du felsöker en kaskadkonflikt.

Hur verifierar du migreringen i Firefox på macOS?

Öppna Firefox utvecklarverktyg med Command–Option–I och välj Inspector. Markera exempelformen i dokumentträdet och granska sedan vyn Rules. Mozilla dokumenterar Mac-genvägen till verktygslådan och Inspectors kontroller för CSS-granskning. Alla kortkommandon, Granska och redigera CSS.

Kontrollera exemplet en egenskap i taget:

  1. Hitta background-color. Komponentdeklarationen ska vinna över det äldre grå värdet.
  2. Hitta border-radius. Komponentvärdet ska skapa cirkeln.
  3. Kontrollera width och height. Deras värden ska fortfarande komma från den äldre filen.
  4. Inaktivera tillfälligt komponentens bakgrundsdeklaration. Den äldre grå färgen ska bli synlig medan formen förblir rundad.

Firefox stryker över deklarationer som har överstyrts och visar kryssrutor för att tillfälligt inaktivera dem. Verktyget länkar också regler till deras källfiler. Använd de kontrollerna för att hitta den konkurrerande deklarationen i stället för att behandla alla oväntade resultat som ett väljarproblem. Mozilla: Granska och redigera CSS.

För en riktig sida upprepar du kontrollen för de tillstånd du ändrade: smalare fönster, relevanta medievillkor och komponentvarianter. Spara bestående ändringar i källfilerna och läs in sidan igen; tillfälliga ändringar i inspektorn är användbara vid felsökning.

Vad kan ändras oväntat under migreringen?

Viktiga deklarationer vänder på den avsedda ordningen

Med @layer legacy, components vinner en viktig deklaration i legacy över en konkurrerande viktig deklaration i components. Att flytta viktiga äldre regler till ett tidigt lager kan därför göra dem svårare att överstyra. Alla viktiga deklarationer i lagerformatmallar har också högre prioritet än konkurrerande viktiga deklarationer utan lager i samma författarursprung och kontext. MDN: @layer.

Sök efter !important i filen innan du flyttar den och granska varje relevant konflikt. Om du styr båda deklarationerna ska du avgöra om viktningen fortfarande behövs efter att du infört lager. Lägg inte till viktning i varje ny komponentregel: då använder du ett annat prioritetsystem.

Infogade stilar behöver granskas separat. Vanliga infogade stilar har högre prioritet än vanliga regler i författarformatmallar, och viktiga infogade stilar har högre prioritet än andra viktiga deklarationer från författaren. Att flytta en formatmall till ett lager flyttar inte ett elements style-attribut. MDN: Introduktion till CSS-kaskaden.

En senare sats kan inte ändra ordningen på befintliga lager

Lagren får sin ordning när de deklareras första gången. Om ett namngivet lager öppnas igen tillkommer regler utan att lagrets position ändras. Ange den avsedda ordningen innan sidan skapar lagren första gången, även när de skapas via importerade formatmallar. CSS Cascading and Inheritance Module Level 5.

Håll den ursprungliga ordningen kort och tydlig vid en gradvis migrering. Flytta en sammanhängande grupp regler, granska vilka deklarationer som vinner och fortsätt sedan. Om du flyttar en regel men lämnar en konkurrerande kopia utan lager kvar brukar du behålla just den prioritetsgräns du ville ta bort.

Vilka begränsningar för webbläsarstöd spelar roll på en Mac?

MDN anger att @layer har haft brett stöd i webbläsare sedan mars 2022. WebKit dokumenterar stöd för kaskadlager i Safari 15.4. Dessa datum beskriver när funktionen blev tillgänglig; de innebär inte att alla Mac-datorer har en webbläsare med stöd installerad. Kontrollera vilka versioner sidan faktiskt behöver stödja. MDN: @layer, WebKit: Nya WebKit-funktioner i Safari 15.4.

En webbläsare som inte förstår ett lagerblock tillämpar inte dess innehållna stilar som vanliga regler utan lager. Syntax som inte stöds ignoreras enligt CSS-tolkningsreglerna. Därför fungerar det inte som reservlösning för äldre webbläsare att lägga all nödvändig CSS i lager. MDN: Felhantering i CSS.

Om du fortfarande måste stödja sådana webbläsare behåller du en avsiktligt olagrad formatmall för den stödvägen och hanterar konflikterna med väljare och källordning. Undvik att läsa in en olagrad dubblett tillsammans med den lagerindelade versionen i webbläsare med stöd; det förändrar kaskaden du just har utformat.

Börja med den minsta migrering som ger den nya komponenten kontroll över de avsedda egenskaperna. Ange lagerordningen, tilldela de konkurrerande äldre reglerna till ett lager, ta bort dubbel inläsning utan lager och granska vilka deklarationer som vinner. Då blir varje prioritetsändring synlig innan du migrerar mer CSS.

Källor