TheCSSFunctionRule interface of theCSS Object Model represents CSS@function (custom function)at-rules.

Instance properties

This interface also inherits properties fromCSSGroupingRule.

CSSFunctionRule.nameRead onlyExperimental

Returns a string representing the custom function's name.

CSSFunctionRule.returnTypeRead onlyExperimental

Returns a string representing the custom function's return type.

Instance methods

This interface also inherits methods fromCSSGroupingRule.

CSSFunctionRule.getParameters()Experimental

Returns an array of objects representing the custom function's parameters.

Examples

BasicCSSFunctionRule usage

In this example, we define a CSS custom function and then access it 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 log each of theCSSFunctionRule members to the console.

// Get a CSSFunctionRuleconst cssFunc = document.getElementById("css-output").sheet.cssRules[0];// Accessing CSSFunctionRule membersconsole.log(cssFunc.name);console.log(cssFunc.returnType);console.log(cssFunc.getParameters());

• Thename property is equal to--lighter.
• ThereturnType property is equal to<color>.
• ThegetParameters() method returns an array that looks like so:
  js

  [  { name: "--color", type: "<color>" },  { defaultValue: "0.2", name: "--lightness-adjust", type: "<number>" },];

Specifications

Browser compatibility

See also

• @function
• CSSFunctionDescriptors
• CSSFunctionDeclarations