CSSFunctionRule はCSS オブジェクトモデルのインターフェイスで、CSS の@function（カスタム関数）アットルールを表します。

インスタンスプロパティ

このインターフェイスにはCSSGroupingRule から継承したプロパティがあります。

CSSFunctionRule.name読取専用Experimental

このカスタム関数の名前を表す文字列を返します。

CSSFunctionRule.returnType読取専用Experimental

このカスタム関数の返値の型を表す文字列を返します。

インスタンスメソッド

このインターフェイスにはCSSGroupingRule から継承したメソッドがあります。

CSSFunctionRule.getParameters()Experimental

このカスタム関数の引数を表すオブジェクトの配列を返します。

例

基本的なCSSFunctionRule の使い方

この例では、CSS カスタム関数を定義し、CSSOM を使用してアクセスします。

CSS

この CSS では、@function アットルールを使用してカスタム関数を定義しています。この関数は--lighter() と呼ばれ、入力された色の明るさを調整した結果を返します。--lighter() は<color> と<number> の 2 つの引数を受け入れます。この関数は、相対色構文を使用して作成されたoklch() 色を返します。入力された色はoklch() 色に変換され、その明度チャンネルが入力された数値分だけ増加されます。

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

JavaScript

このスクリプトはまず、HTMLStyleElement.sheet を使用して文書に添付されたスタイルシートへの参照を取得し、次にCSSStylesheet.cssRules を通じてスタイルシート内の唯一のルールであるCSSFunctionRule への参照を取得します。その後、CSSFunctionRule のそれぞれのメンバーをコンソールにログ出力します。

// CSSFunctionRule を取得const cssFunc = document.getElementById("css-output").sheet.cssRules[0];// CSSFunctionRule メンバーにアクセスconsole.log(cssFunc.name);console.log(cssFunc.returnType);console.log(cssFunc.getParameters());

• name プロパティは--lighter となります。

• returnType プロパティは<color> となります。

• getParameters() メソッドは次のような配列を返します。

  js

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

仕様書

ブラウザーの互換性

関連情報

• @function
• CSSFunctionDescriptors
• CSSFunctionDeclarations