CSSFunctionDescriptors

Instance properties

This interface also inherits properties from CSSStyleDeclaration.

CSSFunctionDescriptors.result Read only

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

Examples

Basic CSSFunctionDescriptors 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 an oklch() color created using relative color syntax; the input color is transformed into an oklch() 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 using HTMLStyleElement.sheet, then getting a reference to the only rule in the stylesheet, the CSSFunctionRule — via CSSStylesheet.cssRules.

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

// 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);

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

Specifications

Browser compatibility

See also

• @function
• CSSFunctionRule
• CSSFunctionDeclarations