Signatur
Beschreibung
Die schreibgeschützte Eigenschaft name der Schnittstelle CSSFunctionRule liefert den Bezeichner einer benutzerdefinierten CSS-Funktion, die über die At-Regel @function definiert wurde. Für die Regel @function --abstand(--faktor <number>) { … } gibt name also den String "--abstand" zurück.
Nützlich ist die Eigenschaft vor allem dann, wenn Sie Stylesheets per CSSOM auswerten: etwa um alle in einem Design-System definierten Funktionen aufzulisten, um Doppeldefinitionen zu finden oder um gezielt eine bestimmte Funktionsregel zu suchen und deren Parameter (getParameters()) oder Rückgabetyp (returnType) auszulesen.
Der Name ist ein dashed ident, beginnt also immer mit zwei Bindestrichen, genau wie benutzerdefinierte Eigenschaften (Custom Properties). Die Groß- und Kleinschreibung bleibt erhalten, und der Name wird beim Vergleich exakt so behandelt, wie er im CSS steht. Um den Namen zu ändern, müssen Sie die Regel entfernen und neu einfügen, denn name lässt sich nicht beschreiben.
Rückgabewert
-- (z. B. "--verdoppeln").Beispiele
Namen aller @function-Regeln eines Stylesheets auslesen
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
@function --verdoppeln(--wert) {
result: calc(var(--wert) * 2);
}
@function --abstand(--faktor <number>) returns <length> {
result: calc(var(--faktor) * 0.5rem);
}
.box { padding: --abstand(3); }
`);
const namen = [...sheet.cssRules]
.filter((rule) => rule instanceof CSSFunctionRule)
.map((rule) => rule.name);
console.log(namen);Bestimmte Funktionsregel im Dokument finden
const findeFunktion = (funktionsName) => {
for (const sheet of document.styleSheets) {
let regeln;
try {
regeln = sheet.cssRules; // kann bei fremden Origins SecurityError werfen
} catch {
continue;
}
for (const rule of regeln) {
if (rule instanceof CSSFunctionRule && rule.name === funktionsName) {
return rule;
}
}
}
return null;
};
const regel = findeFunktion('--abstand');
console.log(regel ? `${regel.name} gibt ${regel.returnType} zurück` : 'nicht gefunden');Feature-Erkennung und doppelte Definitionen melden
if (!('CSSFunctionRule' in window)) {
console.warn('@function wird von diesem Browser nicht unterstützt.');
} else {
const gezaehlt = new Map();
for (const sheet of document.styleSheets) {
try {
for (const rule of sheet.cssRules) {
if (rule instanceof CSSFunctionRule) {
gezaehlt.set(rule.name, (gezaehlt.get(rule.name) ?? 0) + 1);
}
}
} catch { /* Cross-Origin-Stylesheet überspringen */ }
}
for (const [name, anzahl] of gezaehlt) {
if (anzahl > 1) console.warn(`${name} ist ${anzahl}-mal definiert – die letzte Definition gewinnt.`);
}
}// Wichtig · Fallstricke
- Kompatibilität:
@functionundCSSFunctionRulegehören zur noch jungen Spezifikation CSS Functions and Mixins. Unterstützt werden sie derzeit nur in Chromium-Browsern (ab Version 139). Firefox und Safari kennen die Regel noch nicht: Dort wird@functionbeim Parsen verworfen und taucht incssRulesgar nicht auf. Prüfen Sie die Unterstützung vorab mit'CSSFunctionRule' in windowoderCSS.supports(). - Der zurückgegebene Name enthält immer das Präfix
--. Ein Vergleich mit'abstand'statt'--abstand'schlägt fehl. - Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird im nicht-strikten Modus stillschweigend ignoriert und löst im strikten Modus einen
TypeErroraus. - Namen werden unter Beachtung der Groß- und Kleinschreibung verglichen:
--Abstandund--abstandsind zwei verschiedene Funktionen. - Wenn Sie auf
cssRuleseines Stylesheets von einer fremden Herkunft (Origin) ohne CORS zugreifen, wird einSecurityErrorausgelöst. Kapseln Sie den Zugriff deshalb intry/catch.