CSSFunctionRule

インスタンスプロパティ

このインターフェイスには 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