CSSFunctionDescriptors

Limited availability

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

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

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

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

Instanz-Eigenschaften

Dieses Interface erbt auch Eigenschaften von CSSRule.

CSSFunctionDescriptors.result Schreibgeschützt Experimentell: Gibt einen String zurück, der einen result Deskriptor darstellt, wenn einer in der zugehörigen Gruppe von Deklarationen existiert.

Beispiele

Grundlegende Nutzung von `CSSFunctionDescriptors`

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

CSS

Unser CSS definiert eine benutzerdefinierte Funktion unter Verwendung der @function @-Regel. Die Funktion wird --lighter() genannt und gibt eine aufgehellte Version einer Eingabefarbe aus. --lighter() akzeptiert zwei Parameter, eine <color> und eine <number>. Sie gibt eine oklch() Farbe zurück, die unter Verwendung der relativen Farbsyntax erstellt wird; die Eingabefarbe wird in eine oklch() Farbe umgewandelt und ihr Helligkeitskanal wird um die Eingabenummer 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 an unser Dokument angehängte Stylesheet über HTMLStyleElement.sheet zu bekommen, und dann eine Referenz auf die einzige Regel im Stylesheet, die CSSFunctionRule — über CSSStylesheet.cssRules.

Danach greifen wir auf das CSSFunctionDeclarations Objekt zu, das die einzige kontinuierliche Lauf von Deklarationen innerhalb der Funktion darstellt, verwenden cssRules[0], greifen auf die Information des Deskriptors über CSSFunctionDeclarations.style zu und rufen dann die Stilinformationen des Deskriptors ab. Alle diese Informationen werden in der Konsole protokolliert.

// Get a CSSFunctionRule
const cssFunc = document.getElementById("css-output").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 dem result Deskriptor des @function Körpers entspricht, der oklch(from var(--color) calc(l + var(--lightness-adjust)) c h) ist.