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.

Die CSSFunctionDescriptors Schnittstelle des CSS Object Model repräsentiert die Deskriptoren, die in einem Satz von CSS-Deklarationen enthalten sind, die durch ein CSSFunctionDeclarations Objekt dargestellt werden.

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

Instanz-Eigenschaften

Diese Schnittstelle erbt auch Eigenschaften von CSSRule.

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

Beispiele

Grundlegende Nutzung von `CSSFunctionDescriptors`

In diesem Beispiel definieren wir eine CSS-Benutzerfunktion und greifen dann mit dem CSSOM auf deren Deklarationen zu.

CSS

Unser CSS definiert eine benutzerdefinierte Funktion mit der @function At-Regel. Die Funktion heißt --lighter() 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 mit relativer Farbsyntax erstellt wird; die Eingabefarbe wird in eine oklch() Farbe umgewandelt und ihr Helligkeitskanal wird um die eingegebene Nummer 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 mit unserem Dokument verbundene Stylesheet über HTMLStyleElement.sheet zu erhalten, 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 durchgehende Folge von Deklarationen innerhalb der Funktion darstellt, indem wir cssRules[0] verwenden, auf die Deskriptorinformation über CSSFunctionDeclarations.style zugreifen und dann auf die Deskriptor-Stilinformation. All 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);

Bemerkenswert ist, dass die result Eigenschaft dem @function Körper result Deskriptor entspricht, der oklch(from var(--color) calc(l + var(--lightness-adjust)) c h) ist.