CSSFunctionRule

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The CSSFunctionRule interface of the CSS Object Model represents CSS @function (custom function) at-rules.

CSSRule CSSGroupingRule CSSFunctionRule

Instance properties

This interface also inherits properties from CSSGroupingRule.

CSSFunctionRule.name Read only

Returns a string representing the custom function's name.

CSSFunctionRule.returnType Read only

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

Instance methods

This interface also inherits methods from CSSGroupingRule.

CSSFunctionRule.getParameters()

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

Examples

Basic CSSFunctionRule 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 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.

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

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 log each of the CSSFunctionRule members to the console.

js
// Get a CSSFunctionRule
const cssFunc = document.getElementById("css-output").sheet.cssRules[0];

// Accessing CSSFunctionRule members
console.log(cssFunc.name);
console.log(cssFunc.returnType);
console.log(cssFunc.getParameters());

The name property is equal to --lighter.
The returnType property is equal to <color>.
The getParameters() method returns an array that looks like so:
js
[ { name: "--color", type: "<color>" }, { defaultValue: "0.2", name: "--lightness-adjust", type: "<number>" }, ];