CSSFunctionDescriptors
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Want more browser support for this feature? Tell us why.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The CSSFunctionDescriptors interface of the of the CSS Object Model (CSSOM) represents the descriptors contained within a set of CSS declarations represented by a CSSFunctionDeclarations object.
A CSSFunctionDescriptors object is accessed via the CSSFunctionDeclarations.style property.
Instance properties
This interface also inherits properties from CSSStyleDeclaration.
CSSFunctionDescriptors.resultRead only-
Returns a string representing a
resultdescriptor, 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
| Specification |
|---|
| CSS Functions and Mixins Module # cssfunctiondescriptors |