Bepaal eerst waar de bestaande regels thuishoren om cascad Lagen in bestaande CSS te introduceren. Normale regels buiten een laag hebben voorrang op elke benoemde laag. Nieuwe overrides in lagen werken daarom pas nadat conflicterende bestaande regels naar een lager geprioriteerde laag zijn verplaatst.

Deze handleiding is bedoeld voor iemand die een zelfgeschreven webpagina op een Mac bewerkt en die in een desktopbrowser controleert. De concrete taak is een bestaande stylesheet onder nieuwe componentstijlen te plaatsen en tegelijk een begrijpelijk migratiepad te behouden. De voorbeelden gebruiken lokale bestanden, verzonnen labels en een eenvoudige CSS-structuur.

Waarom verliezen nieuwe stijlen in lagen van bestaande regels?

Bij conflicterende normale declaraties in stylesheets van de auteur hebben CSS-regels buiten een expliciete laag voorrang op CSS-regels binnen elke expliciete laag. Een specifiekere selector of een latere positie binnen een laag kan die grens niet overbruggen. De CSS-specificatie laat dit gedrag zien met een regel buiten een laag die een specifiekere regel in een laag overschrijft. CSS Cascading and Inheritance Level 5.

Bekijk dit CSS-fragment, dat gericht is op een element met de klasse tile:

.tile {
  background-color: #b8bdc5;
}

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

De achtergrond blijft grijs. De laag overrides noemen, het blok verder naar beneden in het bestand verplaatsen of de specificiteit van de selector verhogen, verandert niets aan de voorrang van de normale regel buiten een laag. Laagnamen hebben geen ingebouwde betekenis; de volgorde waarin ze worden gedeclareerd bepaalt hun onderlinge relatie. MDN: Cascadelagen.

De volgende beslistabel gaat uit van conflicterende stylesheetdeclaraties in dezelfde oorsprong en context van de auteur, zonder inline stijlen, animaties of transities die de eigenschap beïnvloeden. Lees elke rij van lagere naar hogere prioriteit.

Type declaratie Lagere → hogere prioriteit
Normaal Eerst gedeclareerde laag → later gedeclareerde lagen → regels buiten lagen
!important Regels buiten lagen → later gedeclareerde lagen → eerst gedeclareerde laag

Laagprioriteit wordt bepaald voordat de specificiteit van selectors wordt meegewogen. Binnen de winnende laag blijft specificiteit van belang; de bronvolgorde kan de doorslag geven als declaraties verder gelijkwaardig zijn. Bij belangrijke declaraties is de volgorde omgekeerd. Een migratie moet normale en belangrijke regels daarom afzonderlijk beoordelen. MDN: Cascadelagen.

Welke migratiegrens kies je?

Begin met één element en één eigenschap die de nieuwe CSS moet beheersen. Controleer welke regel momenteel wint, zoek de stylesheet waarin die staat en bepaal of je dat bestand kunt aanpassen of de manier waarop de pagina het laadt. Zo vind je de kleinst bruikbare migratiegrens.

Jouw situatie Praktische volgende stap Gevolg
Bestaande CSS moet voorrang behouden Laat die buiten een laag en voeg standaardwaarden met lagere prioriteit toe in lagen Nieuwe lagen leveren waarden voor eigenschappen waarvoor geen sterkere regels concurreren
Je kunt bestaande CSS bewerken Plaats geschikte bestaande regels in @layer legacy Latere lagen kunnen normale declaraties uit de bestaande laag overschrijven
Je kunt het ingangspunt van de stylesheet wijzigen Importeer het bestaande bestand met layer(legacy) De geïmporteerde stylesheet komt in die laag terecht zonder dat selectors herschreven hoeven te worden
Je kunt de conflicterende bestaande CSS of het laden ervan niet wijzigen Laat de noodzakelijke override tijdelijk buiten een laag Je moet nog steeds specificiteit en andere cascadefactoren oplossen

Deze keuzes volgen de drie mechanismen voor lagen die CSS documenteert: een statement declareert laagnamen, een blok wijst regels toe aan een laag en een geïmporteerde stylesheet kan via een import aan een laag worden toegewezen. Een statement op zichzelf verplaatst geen bestaande regels. CSS Cascading and Inheritance Level 5: Declareren van cascad e lagen.

Bij een kleine stylesheet kan het handig zijn om de gewone regels in een blok te plaatsen. Voor een bestaand extern bestand biedt een import in een laag een duidelijke grens. Plaats bestaande @import-regels niet in een @layer-blok: imports zijn regels op het hoogste niveau met plaatsingsbeperkingen. MDN: @import.

De aanbevolen migratie hieronder importeert het bestaande bestand in een benoemde laag. Dit verandert de prioriteit ervan ten opzichte van andere stylesheets. Controleer daarom welke andere CSS wordt geladen voordat je dezelfde wijziging op meer dan de voorbeeldpagina toepast.

Hoe maak je een compleet lokaal voorbeeld op een Mac?

Maak een map met de volgende drie bestanden met platte tekst. Gebruik een code-editor en behoud de extensies .html en .css. De bestanden vereisen geen pakketten, scripts, lettertypen of gedownloade assets. Hun namen verwijzen naar lokale voorbeeldbestanden.

Sla dit volledige document op als 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>

Het document verwijst alleen naar styles.css. HTML gebruikt rel="stylesheet" en href om de externe stylesheet aan de pagina te koppelen. De huidige HTML-standaard definieert geen attribuut layer voor het element link; wijs de resource via CSS toe aan een laag. HTML Standard: Het link-element.

Sla deze volledige stylesheet op als legacy.css. De selectors van de bestaande regels blijven ongewijzigd:

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;
}

Sla deze volledige instapstylesheet op als styles.css:

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

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

Open sample.html in een recente desktopversie van Safari of Firefox. Het verwachte resultaat is een turkooizen cirkel onder het label Tile A. De bestaande laag levert de afmetingen; de latere componentlaag levert de achtergrond en afgeronde vorm. De selector met één klasse wint van de bestaande ID-selector, omdat de declaraties in verschillende lagen met elkaar concurreren. MDN: @layer.

Het instapbestand bepaalt eerst de laagvolgorde, houdt de import vóór het blok en voegt daarna componentregels toe. Dit volgt de gedocumenteerde syntaxis en plaatsingsregels voor imports. Een layer-statement mag vóór imports staan; een layer-blok niet. MDN: @import.

Wat moet je in een bestaande pagina wijzigen?

Vervang de directe verwijzing naar de stylesheet van de pagina door de nieuwe instapstylesheet wanneer je deze opzet toepast. Als de pagina legacy.css nog rechtstreeks laadt én het bestand in een laag importeert, levert de directe verwijzing declaraties buiten een laag op die de migratie kunnen dwarsbomen.

Gebruik het voorbeeld om de fout te voorspellen: voeg een aparte directe link naar de stylesheet legacy.css toe. De normale declaraties daarin kunnen het grijze vierkant terugbrengen. Als je die directe verwijzing verwijdert, blijven de bestaande regels in de bedoelde laag. Deze voorspelling volgt uit de specificatie, die regels buiten expliciete lagen na die lagen plaatst in de normale prioriteitsvolgorde. CSS Cascading and Inheritance Module Level 5: Laagvolgorde.

Houd voor dit voorbeeld alle drie de bestanden bij elkaar. Behoud bij het aanpassen van deze aanpak bestaande resourcevoorwaarden, zoals mediarestricties, en controleer of elke stylesheet waarnaar wordt verwezen is geladen voordat je een cascadeconflict probeert te diagnosticeren.

Hoe controleer je de migratie in Firefox op macOS?

Open de ontwikkelaarstoolbox van Firefox met Command–Option–I en selecteer Inspector. Selecteer de voorbeeldvorm in de documentstructuur en bekijk vervolgens het deelvenster Rules. Mozilla documenteert de snelkoppeling voor de toolbox op Mac en de CSS-inspectieopties van de Inspector. Alle sneltoetsen, CSS bekijken en bewerken.

Controleer het voorbeeld eigenschap voor eigenschap:

  1. Zoek background-color. De componentdeclaratie hoort te winnen van de bestaande grijze waarde.
  2. Zoek border-radius. De componentwaarde hoort de cirkel te maken.
  3. Controleer width en height. De waarden daarvan horen nog uit het bestaande bestand te komen.
  4. Schakel de componentdeclaratie voor de achtergrond tijdelijk uit. Het bestaande grijs moet zichtbaar worden terwijl de vorm afgerond blijft.

Firefox streept overschreven declaraties door en biedt selectievakjes om ze tijdelijk uit te schakelen. Ook worden regels aan hun bronbestanden gekoppeld. Gebruik die bedieningselementen om de conflicterende declaratie te vinden, in plaats van elk onverwacht resultaat als een selectorprobleem te behandelen. Mozilla: CSS bekijken en bewerken.

Herhaal deze controle voor een echte pagina voor de toestanden die je hebt gewijzigd: smallere vensters, relevante mediavoorwaarden en componentvarianten. Sla blijvende wijzigingen op in de bronbestanden en laad de pagina opnieuw. Tijdelijke wijzigingen in de inspector zijn handig voor diagnose.

Wat kan er onverwacht veranderen tijdens de migratie?

Belangrijke declaraties draaien de bedoelde volgorde om

Bij @layer legacy, components wint een belangrijke declaratie in legacy van een conflicterende belangrijke declaratie in components. Belangrijke bestaande regels naar een vroege laag verplaatsen kan het dus lastiger maken om ze te overschrijven. Alle belangrijke declaraties in gelaagde stylesheets hebben in dezelfde oorsprong en context van de auteur ook voorrang op conflicterende belangrijke declaraties in stylesheets buiten een laag. MDN: @layer.

Zoek voordat je een bestand verplaatst naar !important en inspecteer elk relevant conflict. Bepaal voor declaraties die je allebei beheert of !important nog nodig is nadat je lagen hebt ingevoerd. Voeg niet aan elke nieuwe componentregel !important toe: daarmee gebruik je een ander prioriteitssysteem.

Inline stijlen vragen om afzonderlijke aandacht. Normale inline stijlen hebben voorrang op normale regels in stylesheets van de auteur, en belangrijke inline stijlen hebben voorrang op andere belangrijke declaraties van de auteur. Een stylesheet naar een laag verplaatsen verplaatst de stijlattribuut van een element niet. MDN: Inleiding tot de CSS-cascade.

Een later statement kan bestaande lagen niet opnieuw ordenen

Lagen ontlenen hun volgorde aan hun eerste declaratie. Een bestaande laag opnieuw openen voegt regels toe, maar verplaatst de laag niet. Plaats de gewenste volgorde voordat de pagina die lagen voor het eerst aanmaakt, ook wanneer dat gebeurt via geïmporteerde stylesheets. CSS Cascading and Inheritance Module Level 5.

Houd bij een geleidelijke migratie de beginvolgorde kort en expliciet. Verplaats een samenhangende groep regels, controleer welke declaraties winnen en ga dan verder. Als je één regel verplaatst maar een conflicterende kopie buiten een laag laat staan, blijft doorgaans juist de prioriteitsgrens behouden die je wilde wegnemen.

Welke beperkingen aan browserondersteuning zijn van belang op een Mac?

MDN geeft aan dat @layer sinds maart 2022 breed beschikbaar is in browsers. WebKit documenteert ondersteuning voor cascad e lagen in Safari 15.4. Deze datums beschrijven de beschikbaarheid van de functie; ze betekenen niet dat op elke Mac een browser is geïnstalleerd die de functie ondersteunt. Controleer welke versies je pagina daadwerkelijk moet ondersteunen. MDN: @layer, WebKit: Nieuwe WebKit-functies in Safari 15.4.

Een browser die een layer-blok niet begrijpt, past de ingesloten stijlen niet toe als gewone regels buiten een laag. Volgens de CSS-parseregels wordt niet-ondersteunde syntaxis genegeerd. Alle essentiële CSS in lagen plaatsen is dus geen oplossing voor oudere browsers. MDN: Foutafhandeling van CSS.

Als je die browsers moet blijven ondersteunen, houd dan voor die ondersteuning een bewust buiten lagen gehouden stylesheet aan en los conflicten daarin op met selectors en bronvolgorde. Laad in browsers die lagen ondersteunen niet tegelijk een kopie buiten een laag naast de gelaagde versie: dat verandert de cascade die je zojuist hebt ontworpen.

Begin met de kleinst mogelijke migratie waarmee de nieuwe component controle krijgt over de bedoelde eigenschappen. Bepaal de laagvolgorde, wijs de conflicterende bestaande regels toe aan een laag, verwijder dubbele verwijzingen die buiten een laag laden en controleer welke declaraties daarna winnen. Zo wordt elke wijziging in prioriteit zichtbaar voordat je meer CSS migreert.

Bronnen