CSSFunctionRule

インスタンスプロパティ

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

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

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

インスタンスメソッド

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

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

例

基本的な CSSFunctionRule の使い方

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

CSS

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

JavaScript

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

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

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

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

  js

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

仕様書

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

関連情報

• @function
• CSSFunctionDescriptors
• CSSFunctionDeclarations