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 einem Satz von CSS-Deklarationen enthalten sind, die durch ein CSSFunctionDeclarations-Objekt dargestellt werden.

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

Instanz-Eigenschaften

Dieses Interface erbt auch Eigenschaften von CSSRule.

CSSFunctionDescriptors.result Schreibgeschützt Experimentell: Gibt eine Zeichenkette zurück, die einen result-Deskriptor darstellt, falls einer im zugehörigen Satz von Deklarationen existiert.

Beispiele

Grundlegende Verwendung 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 mittels der @function At-Regel. Die Funktion heißt --lighter() und gibt eine aufgehellte Version einer Eingabefarbe aus. --lighter() akzeptiert zwei Parameter, einen <color> und eine <number>. Sie gibt eine oklch() Farbe zurück, die mit relativer Farbsyntax erstellt wurde; die Eingabefarbe wird in eine oklch()-Farbe umgewandelt und der Helligkeitskanal um 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 mit dem Abrufen einer Referenz auf das Stylesheet, das mit unserem Dokument verbunden ist, unter Verwendung von HTMLStyleElement.sheet, und erhält dann eine Referenz auf die einzige Regel im Stylesheet, die CSSFunctionRule — über CSSStylesheet.cssRules.

Dann greifen wir auf das CSSFunctionDeclarations-Objekt zu, das die einzige fortlaufende Folge von Deklarationen innerhalb der Funktion darstellt, indem wir cssRules[0] verwenden, greifen auf die Informationen des Deskriptors via CSSFunctionDeclarations.style zu und dann auf die Stilinformationen des Deskriptors. 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);

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