CSSFunctionDescriptors

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Das CSSFunctionDescriptors-Interface des CSS Object Model repräsentiert die Deskriptoren, die in einer Reihe von CSS-Deklarationen enthalten sind, dargestellt durch ein CSSFunctionDeclarations-Objekt.

Ein CSSFunctionDescriptors-Objekt wird über die CSSFunctionDeclarations.style-Eigenschaft aufgerufen.

Instanz-Eigenschaften

Dieses Interface erbt auch Eigenschaften von CSSRule.

CSSFunctionDescriptors.result Schreibgeschützt: Gibt einen String zurück, der einen result-Deskriptor darstellt, falls einer im zugehörigen Deklarationssatz existiert.

Beispiele

Grundlegende Verwendung von `CSSFunctionDescriptors`

In diesem Beispiel definieren wir eine benutzerdefinierte CSS-Funktion und greifen dann mittels CSSOM auf ihre Deklarationen zu.

CSS

Unser CSS definiert eine benutzerdefinierte Funktion mittels der @function-Regel. Die Funktion heißt --lighter() und gibt eine aufgehellte Version einer Eingabefarbe zurück. --lighter() akzeptiert zwei Parameter, eine <color> und eine <number>. Sie gibt eine oklch()-Farbe zurück, die mit der relativen Farbsyntax erstellt wurde; die Eingabefarbe wird in eine oklch()-Farbe umgewandelt und ihr Helligkeitskanal wird durch die Eingabezahl erhöht.

css

@function --lighter(--color <color>, --lightness-adjust <number>: 0.2) returns
  <color> {
  result: oklch(from var(--color) calc(l + var(--lightness-adjust)) c h);
}

JavaScript

Unser Skript beginnt damit, eine Referenz auf das Stylesheet zu erhalten, das an unser Dokument angehängt ist, indem Document.styleSheets verwendet wird, dann eine Referenz auf die einzige Regel im Stylesheet, die CSSFunctionRule — über CSSStylesheet.cssRules.

Wir greifen dann auf das CSSFunctionDeclarations-Objekt zu, das die einzige zusammenhängende Abfolge von Deklarationen innerhalb der Funktion darstellt, indem cssRules[0] verwendet wird, auf die Informationen der Deskriptoren mit CSSFunctionDeclarations.style zugreift und dann auf die Stilinformationen der Deskriptoren zugreift. All diese Informationen werden in der Konsole protokolliert.

// Get a CSSFunctionRule
const sheet = document.styleSheets[0];
const cssFunc = sheet.cssRules[0];

// Accessing CSSFunctionDeclarations and CSSFunctionDescriptors
console.log(cssFunc.cssRules[0]); // CSSFunctionDeclarations
console.log(cssFunc.cssRules[0].style); // CSSFunctionDescriptors
console.log(cssFunc.cssRules[0].style.result);

Besonders bemerkenswert ist, dass die result-Eigenschaft gleich dem result-Deskriptor des @function-Körpers ist, welcher oklch(from var(--color) calc(l + var(--lightness-adjust)) c h) ist.