Signatur
Beschreibung
Die schreibgeschützte Eigenschaft nameList gehört zur Schnittstelle CSSLayerStatementRule. Diese Schnittstelle steht für eine @layer-Regel ohne Block, zum Beispiel @layer reset, base, components;. Solche Anweisungen legen die Reihenfolge der Cascade Layers fest, bevor Stilregeln in sie geschrieben werden. nameList liefert die dort aufgeführten Namen in der Reihenfolge, in der sie im Quelltext stehen.
Gebraucht wird die Eigenschaft vor allem in Werkzeugen, die Stylesheets zur Laufzeit untersuchen: Debugging-Tools, Style-Linter, Design-System-Prüfungen oder Skripte, die herausfinden wollen, welche Layer eine Seite in welcher Reihenfolge anlegt. Auf die Regel greift man über CSSStyleSheet.cssRules zu und prüft sie mit rule instanceof CSSLayerStatementRule.
Verschachtelte Layer-Namen werden als ein einziger String mit Punkt-Schreibweise zurückgegeben, z. B. "framework.base". Der Rückgabewert ist ein FrozenArray: Das Array lässt sich lesen und durchlaufen, aber nicht verändern. Einen einzelnen Layer mit Block (@layer name { … }) stellt dagegen CSSLayerBlockRule dar. Dort steht der Name in der Eigenschaft name.
Rückgabewert
FrozenArray<CSSOMString>) mit den Layer-Namen in der Reihenfolge ihrer Deklaration. Verschachtelte Namen stehen in Punkt-Schreibweise, z. B. "theme.dark".Beispiele
Layer-Namen einer @layer-Anweisung auslesen
const style = document.createElement('style');
style.textContent = '@layer reset, base, components;';
document.head.append(style);
const rule = style.sheet.cssRules[0];
console.log(rule instanceof CSSLayerStatementRule); // true
console.log(rule.nameList);Layer-Reihenfolge aller gleich-origin Stylesheets ermitteln
const collectLayerOrder = () => {
const order = [];
for (const sheet of document.styleSheets) {
let rules;
try {
rules = sheet.cssRules; // bei Cross-Origin-Sheets: SecurityError
} catch {
continue;
}
for (const rule of rules) {
if (rule instanceof CSSLayerStatementRule) {
for (const name of rule.nameList) {
if (!order.includes(name)) order.push(name);
}
} else if (rule instanceof CSSLayerBlockRule && rule.name) {
if (!order.includes(rule.name)) order.push(rule.name);
}
}
}
return order;
};
console.log(collectLayerOrder());Verschachtelte Namen und Unveränderlichkeit
const sheet = new CSSStyleSheet();
sheet.insertRule('@layer framework.base, framework.theme;');
const { nameList } = sheet.cssRules[0];
console.log(nameList); // Punkt-Schreibweise bleibt erhalten
console.log(Object.isFrozen(nameList));
try {
'use strict';
nameList.push('extra');
} catch (err) {
console.log(err.name);
}// Wichtig · Fallstricke
- Nur Anweisungen ohne Block:
nameListgibt es ausschließlich beiCSSLayerStatementRule. Für@layer name { … }istCSSLayerBlockRule.namezuständig. Anonyme Layer (@layer { … }) können in einer Anweisung ohne Block nicht vorkommen. - Eingefrorenes Array: Aufrufe wie
push()oder direkte Zuweisungen an Indizes lösen in Modulen und im Strict Mode einenTypeErroraus und werden sonst stillschweigend ignoriert. Wer die Namen bearbeiten will, legt zuerst eine Kopie an:[...rule.nameList]. - Keine vollständige Layer-Reihenfolge: Die Liste enthält nur die Namen dieser einen Regel. Die tatsächliche Reihenfolge der Kaskade entsteht aus allen
@layer-Regeln, allen@import … layer()-Regeln und der Reihenfolge der Stylesheets. Liegen Layer-Regeln in@media- oder@supports-Blöcken, muss man derencssRulesebenfalls rekursiv durchlaufen. - Cross-Origin: Wer auf
cssRulesfremder Stylesheets ohne passende CORS-Freigabe zugreift, bekommt einenSecurityError. - Kompatibilität: Die Eigenschaft wird seit 2022 von allen aktuellen Browsern unterstützt. In älteren Browsern ist
CSSLayerStatementRulenicht definiert. Wer solche Browser unterstützen muss, prüft vorher mittypeof CSSLayerStatementRule !== 'undefined'.