CSSFunctionDescriptors
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
CSSFunctionDescriptors は CSS オブジェクトモデルのインターフェイスで、CSSFunctionDeclarations で表現された一連の CSS 宣言に含まれる記述子を表します。
CSSFunctionDescriptors オブジェクトは CSSFunctionDeclarations.style プロパティからアクセスできます。
インスタンスプロパティ
このインターフェイスには CSSStyleDeclaration から継承したプロパティがあります。
CSSFunctionDescriptors.result読取専用 Experimental-
result記述子が関連する一連の宣言の中に存在する場合、それを表す文字列を返します。
例
基本的な CSSFunctionDescriptors の使い方
この例では、CSS カスタム関数を定義し、CSSOM を使用してその宣言にアクセスします。
CSS
この CSS では、@function アットルールを用いてカスタム関数を定義しています。この関数は --lighter() と呼ばれ、入力された色の明るさを増したバージョンを出力します。--lighter() は 2 つの引数として <color> と <number> を取ります。相対色構文を用いて生成された 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 への参照を取得します。
次に、関数内で唯一の連続した宣言群を表す CSSFunctionDeclarations オブジェクトを cssRules[0] で参照し、その記述子の情報を CSSFunctionDeclarations.style で取得した後、記述子のスタイル情報を参照します。この情報はすべてコンソールにログ出力されます。
// CSSFunctionRule を取得
const cssFunc = document.getElementById("css-output").sheet.cssRules[0];
// CSSFunctionDeclarations と CSSFunctionDescriptors へのアクセス
console.log(cssFunc.cssRules[0]); // CSSFunctionDeclarations
console.log(cssFunc.cssRules[0].style); // CSSFunctionDescriptors
console.log(cssFunc.cssRules[0].style.result);
特に注目すべきは、result プロパティが @function 本体の result 記述子と等しい点であり、これが oklch(from var(--color) calc(l + var(--lightness-adjust)) c h) であることです。
仕様書
| Specification |
|---|
| CSS Functions and Mixins Module # cssfunctiondescriptors |