TheCSSFunctionDescriptors interface of theCSS Object Model represents the descriptors contained within a set of CSS declarations represented by aCSSFunctionDeclarations object.

ACSSFunctionDescriptors object is accessed via theCSSFunctionDeclarations.style property.

Instance properties

This interface also inherits properties fromCSSRule.

CSSFunctionDescriptors.resultRead onlyExperimental

Returns a string representing aresult descriptor, if one exists in the associated set of declarations.

Examples

BasicCSSFunctionDescriptors usage

In this example, we define a CSS custom function and then access its declarations using the CSSOM.

CSS

Our CSS defines a custom function using the@function at-rule. The function is called--lighter(), and outputs a lightened version of an input color.--lighter() accepts two parameters, a<color> and a<number>. It returns anoklch() color created usingrelative color syntax; the input color is transformed into anoklch() color and its lightness channel is increased by the input number.

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

JavaScript

Our script starts by getting a reference to the stylesheet attached to our document usingHTMLStyleElement.sheet, then getting a reference to the only rule in the stylesheet, theCSSFunctionRule — viaCSSStylesheet.cssRules.

We then access theCSSFunctionDeclarations object representing the only continuous run of declarations inside the function usingcssRules[0], access its descriptor's information usingCSSFunctionDeclarations.style, and then access the descriptor style information. All of this information is logged to the console.

// Get a CSSFunctionRuleconst cssFunc = document.getElementById("css-output").sheet.cssRules[0];// Accessing CSSFunctionDeclarations and CSSFunctionDescriptorsconsole.log(cssFunc.cssRules[0]); // CSSFunctionDeclarationsconsole.log(cssFunc.cssRules[0].style); // CSSFunctionDescriptorsconsole.log(cssFunc.cssRules[0].style.result);

Most notably, theresult property is equal to the@function body'sresult descriptor, which isoklch(from var(--color) calc(l + var(--lightness-adjust)) c h).

Specifications

Browser compatibility

See also

• @function
• CSSFunctionRule
• CSSFunctionDeclarations