CSS 関数およびミックスイン・モジュール

1. はじめに

このセクションは規範的ではありません。

注: 現時点では、この仕様はカスタム関数のみを定義しており、これはCSS値のレベルで動作します。今後、スタイルルールレベルで動作する「ミックスイン」も定義される予定です。

カスタムプロパティは、著者が便利で時に複雑な値を一箇所で定義し、スタイルシート全体で再利用できる強力な機能です。文書全体やメディアクエリ、その他の条件によって値を変更できるため、柔軟かつレスポンシブな設計が可能です。

しかし、カスタムプロパティの値は定義された時点で固定されており、その後変更するには定義を完全に上書きするしかありません。例えば --shadow: 2px 2px var(--shadow-color) という宣言では --shadow-color の値は宣言された要素のものが使われ、後で子孫要素で --shadow-color を変更してもその要素の --shadow の値は変わりません。つまり --shadow が定義された時点の影の色を常に使い続けます。この仕組みは、複合変数を多用する著者にとって混乱の元となりがちです。

カスタム関数はカスタムプロパティと同じ強力さを持ちつつ、 パラメータ化されています。カスタムプロパティ定義と同様の柔軟性と条件分岐が可能ですが、他のカスタムプロパティの値や（または明示的な引数として）使用時点で値を受け取ります。例えば、--shadow カスタムプロパティの代わりに --shadow() カスタム関数を定義し、次のようにできます:

@function --shadow(--shadow-color <color> : inherit) {
  /* --shadow-color 引数が渡されていない、
     または <color> として正常にパースできない場合、
     代わりに要素の --shadow-color *プロパティ* を使用する */

  /* var(--shadow-color) は --shadow-color パラメータを参照するが、
     カスタムプロパティではなく、通常通りフォールバック値も使える */
  result: 2px 2px var(--shadow-color, black);
}

.foo {
  --shadow-color: blue;
  box-shadow: --shadow(); /* 青い影が生成される */
  /* あるいは単に */
  box-shadow: --shadow(blue);
}

2. カスタム関数の定義

カスタム関数は、高度なカスタムプロパティと考えることができ、一つの固定値で置換されるのではなく、関数パラメータや呼び出し時点でのカスタムプロパティの値に基づいて置換値を計算します。カスタムプロパティが値の置換に使うvar()構文ではなく、カスタム関数は<dashed-function>構文で呼び出し、引数として追加の値も渡すことができます。

値を反転する単純なカスタム関数は次のように定義できます:

@function --negative(--value) {
  result: calc(-1 * var(--value));
}

この関数は、宣言内で --negative() として参照できます:

html {
  --gap: 1em;
  padding: --negative(var(--gap));
  /* または値を直接渡す場合: */
  padding: --negative(1em);
}

<dashed-function>は任意置換関数であり、 var()と同様です。プロパティ値に含まれるとパース時に有効とみなされ、算出値の時点でのみ評価・パースされます。任意置換が行われた後に評価されます。

2.1. @function規則

@function規則はカスタム関数を定義し、名前、パラメータのリスト、関数本体、オプションとして戻り値型（構文定義で記述）を持ちます。

各関数パラメータは、名前（<custom-property-name>）、オプションとしてパラメータ型（構文定義で記述）、オプションとしてデフォルト値で構成されます。

<@function> = @function <function-token> <function-parameter>#? )
  [ returns <css-type> ]?
{
  <declaration-rule-list>
}

<function-parameter> = <custom-property-name> <css-type>? [ : <declaration-value> ]?
<css-type> = <syntax-component> | <type()>
<type()> = type( <syntax> )

2.1.1. 関数の前文

<function-token>生成規則は <dashed-ident>と同様、 2つのハイフン（U+002D HYPHEN-MINUS）で始まらなければならず、そうでなければ定義は無効です。

生成されるカスタム関数の名前は<function-token>の名前で決まり、オプションの関数パラメータは <function-parameter> の値（デフォルトは空集合）、オプションの戻り値型は returnsキーワードの後の<css-type> （デフォルトはtype(*)）で決まります。

<css-type>が関数パラメータや戻り値型について単一の<syntax-component>で記述できる場合、 type()関数は省略できます:

@function --foo(--a <length>) { /* ... */ }
@function --foo(--a <color>) { /* ... */ }
@function --foo(--a <length>+) { /* ... */ }

ただし、 <syntax>が<syntax-combinator>を必要とする場合は type()関数で包む必要があります:

@function --foo(--a type(<number> | <percentage>)) { /* ... */ }

@function規則の名前はツリースコープ名です。同じ名前の@functionが複数存在する場合、強いカスケードレイヤーのルールが優先され、同じレイヤー内では後に定義されたものが勝ちます。

関数パラメータ内に同じ<custom-property-name>が複数ある場合、 @function規則は無効です。

2.1.2. 関数本体

@function規則の本体には条件付きグループ規則（例えば@media）を記述できます。さらに、以下の記述子も受け付けます:

result記述子。関数の評価結果を決定します。 result記述子が存在しない場合も関数は有効ですが、常に保証された無効値を返します。
カスタムプロパティ（ローカル変数として提供）。

未知の記述子は無効として無視されますが、 @function規則自体は無効になりません。

2.2. result記述子

名称:	result
対象:	@function
値:	<declaration-value>?
初期値:	n/a（本文参照）

result記述子は関数評価時のカスタム関数の結果を定義します。 var()関数を使うことで関数パラメータ、ローカル変数や他のカスタム関数も<dashed-function>経由で参照できます。

result記述子自体には型はありませんが、その解決された値は置換時に <dashed-function>の型チェックが行われます。

2.3. 引数とローカル変数

このセクションは非規範です。

カスタム関数の関数本体内では、 var()関数でローカル変数（関数本体内で定義されたカスタムプロパティ）、関数パラメータ（関数に渡された値やデフォルト値）、呼び出し元（要素や他のカスタム関数）で定義されたカスタムプロパティにアクセスできます。

この順序で、同名の場合は前のものが「勝ち」ます。例えばローカル変数に --foo があれば、var(--foo) はそのローカル変数で置換されます。引数や外部のカスタムプロパティは参照しません。ただし他の値も参照は可能です。ローカル変数 --foo を initial にするとパラメータの --foo を参照し、 inherit にすると呼び出し元の --foo カスタムプロパティを参照します。

カスタム関数は上位の関数のローカル変数や関数パラメータにもアクセスできます:

@function --outer(--outer-arg) {
  --outer-local: 2;
  result: --inner();
}
@function --inner() returns <number> {
  result: calc(var(--outer-arg) + var(--outer-local));
}
div {
  z-index: --outer(1); /* 3 */
}

同様に、カスタムプロパティも暗黙的に利用できます:

@function --double-z() returns <number> {
  result: calc(var(--z) * 2);
}
div {
  --z: 3;
  z-index: --double-z(); /* 6 */
}

ただし関数パラメータはカスタムプロパティを「シャドウ」し、ローカル変数は両方を「シャドウ」します:

@function --add-a-b-c(--b, --c) {
  --c: 300;
  result: calc(var(--a) + var(--b) + var(--c));
  /* 呼び出し元のカスタムプロパティ --a、
     関数パラメータ --b、
     ローカル変数 --c をそれぞれ使う */
}
div {
  --a: 1;
  --b: 2;
  --c: 3;
  z-index: --add-a-b-c(20, 30); /* 321 */
}

3. カスタム関数の利用

カスタムプロパティの値を var()で他のプロパティ値に代入できるように、カスタム関数の評価結果もプロパティ値に <dashed-function>で代入できます。

<dashed-function>は、関数表記で、関数名が2つのハイフン（U+002D HYPHEN-MINUS）で始まります。その引数文法は以下の通りです:

<dashed-function> = --*( <declaration-value>#? )

<dashed-function>は var() が許可されている場所でのみ使用できます。

あるプロパティに<dashed-function>が1つ以上含まれる場合、そのプロパティの文法全体はパース時に有効とみなされます。算出値時点で全ての<dashed-function>を置換し、その後プロパティ文法と照合します。

注: カスタム関数の本体内では var() の解決結果が <dashed-function>が使われている要素上での挙動と異なる場合があります。詳細は§ 3.1 カスタム関数の評価を参照してください。

<dashed-function>は何らかのコンテキストで評価されます。例えば要素のプロパティ値（または最終的に要素のプロパティとして扱われる記述子、 @keyframesなど）、または他のカスタム関数の関数本体内記述子（仮想要素上）などです。いずれの場合も呼び出しコンテキストがあり、その<dashed-function>を含むプロパティ/記述子名と、そのプロパティ/記述子が適用される要素（または仮想要素）を持ちます。

呼び出しコンテキストは <dashed-function>の評価がカスタム関数内でネストされるごとに積み重なり、スタックの根本の要素がルート要素です。

dashed functionの置換 dashed functionとargumentsのリストについて:

functionを dashed functionの名前でtree-scoped referenceとして参照し取得する。その名前がなければ保証された無効値を返す。
各argについて任意置換関数を arg内で置換し、その結果でargを置き換える。

注: これにより（全てまたは一部の）引数が保証された無効値となる場合があり、その場合はデフォルト値（あれば）が適用される。
dashed functionが要素のプロパティに置換される場合、 calling contextとしてその要素とプロパティを持つ呼び出しコンテキストを使う。

それ以外の場合は、仮想要素上の記述子に置換され、他のカスタム関数を評価中である。この場合は仮想要素と記述子を持つ呼び出しコンテキストを使う。
カスタム関数の評価を function、arguments、calling contextで行い、その結果値の等価トークン列を返す。

カンマ区切り値は波括弧 {} で包むことで単一の引数として渡せます:

@function --max-plus-x(--list, --x) {
  result: calc(max(var(--list)) + var(--x));
}
div {
  width: --max-plus-x({ 1px, 7px, 2px }, 3px); /* 10px */
}

次の例では --foo() は自身と循環しています:

@function --foo(--x) {
  result: --foo(10);
}

同様に --bar() も自身と循環していますが、ローカル変数 --x は result で参照されていません:

@function --bar() {
  --x: --bar();
  result: 1;
}

一方、下記の --baz() は自身と循環していません。 result宣言が @media ルール内で評価されないためです:

@function --baz(--x) {
  @media (unknown-feature) {
    result: --baz(42);
  }
  result: 1;
}

下記の例では --baz() は循環しません: var(--x) や var(--y) が関数本体に現れても、それぞれ関数パラメータとローカル変数を参照しています。カスタムプロパティ --x と --y は両方 --baz() を参照しますが問題ありません。これらカスタムプロパティは --baz() の中で参照されていません。

@function --baz(--x) {
  --y: 10px;
  result: calc(var(--x) + var(--y));
}

div {
  --x: --baz(1px);
  --y: --baz(2px);
  width: var(--x);  /* 11px */
  height: var(--y); /* 12px */
}

3.1. カスタム関数の評価

カスタム関数は、基本的にはその関数本体を仮想要素へのスタイルルールとして適用したかのように評価され、通常通りスタイルを解決し、その仮想要素上のresult記述子の値を返す。仮想要素は呼び出しコンテキストの子であるかのように全てのカスタムプロパティ値を「継承」し、同名の場合は関数パラメータが「継承」したカスタムプロパティより優先される。

カスタム関数の評価 custom functionについて、呼び出しコンテキスト calling contextとCSS値のリストargumentsを受け、CSS値を返す:

substitution context を «"function", custom function» を含む置換コンテキストとする。

注: tree-scoping のため、同じ関数名がスタック上で複数回現れることがあり、異なるカスタム関数を参照する場合がある。そのため、カスタム関数自体を置換コンテキストに含める（名前だけでなく）。
このアルゴリズムの残りの処理の間、substitution context をガードする。 substitution context が循環としてマークされている場合、保証された無効値を返す。
もし arguments の項目数が custom function の関数パラメータの数より多い場合、保証された無効値を返す。
registrations を空のカスタムプロパティ登録集合とする。
custom function の各関数パラメータについて、パラメータ名・パラメータ型・inheritフラグtrue・初期値なしでカスタムプロパティ登録を作成し、 registrations に追加する。
もし custom function に戻り値型があれば、名前 "return"（通常の登録名ルール違反）、構文 return type、inheritフラグfalse・初期値なしでカスタムプロパティ登録を作成し、 registrations に追加する。
argument rule を空のスタイルルールとする。
custom function の各関数パラメータについて:
1. arg value を arguments の該当引数の値とし、対応する引数がなければ保証された無効値とする。
2. default value をパラメータのデフォルト値とする。
3. パラメータ名と値 first-valid(arg value, default value) でカスタムプロパティを argument rule に追加する。
resolve function styles を custom function・argument styles・registrations・calling context で呼び出し、結果を argument styles とする。
body rule を custom function の関数本体をスタイルルールとして取得したものとする。
registrations の各カスタムプロパティ登録について、初期値を argument styles の対応値に設定し、構文を universal syntax definition に設定し、 body rule の先頭にカスタムプロパティ（プロパティ名と値は argument styles より）を追加する。
resolve function styles を custom function・body rule・registrations・calling context で呼び出し、結果を body styles とする。
もし substitution context が循環置換コンテキストとしてマークされていれば、保証された無効値を返す。

注: ネストした任意置換関数が、ステップ2以降で substitution context を循環としてマークすることがある（例えば result の解決時など）。
body styles の result プロパティの値を返す。

resolve function styles custom function custom function、スタイルルール rule、カスタムプロパティ登録群 registrations、呼び出しコンテキスト calling context を受け、算出スタイルの集合を返す:

仮想要素 el を作成し、calling context の要素の子として振る舞わせる。el は featureless であり、カスタムプロパティと result 記述子のみが適用される。
rule を el に指定値段階で適用する。以下の変更あり:
- registrations のカスタムプロパティ登録のみ可視。他のカスタムプロパティは未登録扱い。
- calling context のプロパティの継承値は保証された無効値とする。
- カスタムプロパティでは、CSS全域キーワード initial および inherit は通常通り動作。その他の CSS全域キーワードは保証された無効値となる。
  
  注: initial は関数パラメータから作られたカスタムプロパティ登録を参照し、プロパティを渡した値に「リセット」できる。 inherit は呼び出しコンテキストの要素から継承する。\
  
  result では、すべての CSS全域キーワードは未解決のまま残る。
  
  注: 例えば result: inherit は <dashed-function> を inherit キーワードとして評価させる（var(--unknown, inherit) に類似）。
- カスタムプロパティ prop について、そのプロパティのプロパティ置換時には置換コンテキストにも custom function を含める。つまり substitution context は «"property", prop の名前, custom function» となる。
  
  注: 動的スコープのため、同じプロパティ名がスタック上で複数回現れることがあり、異なるカスタムプロパティを参照する場合がある。そのためカスタム関数自体も置換コンテキストに含める（名前だけでなく）。
全てのカスタムプロパティと el 上の result "プロパティ" の算出値を決定する。 CSS Properties and Values API 1 § 2.4 Computed Value-Time Behavior に従うが、前ステップの変更と以下を適用する:
- カスタムプロパティへの参照（通常通り el 上の値を使う）と数値・パーセンテージ（カスタムプロパティ内では通常通り未解決）の他は、通常はスタイリング中の要素を参照する値も calling context のルート要素を参照する。
  
  注: 例えば、プロパティ内の attr() や、ルール内の @container クエリなど。
el のスタイルを返す。

注: このスタイルから使われるのはカスタムプロパティと result 記述子のみ。

4. カスタム関数の実行モデル

他のCSSと同様に、カスタム関数は宣言型モデルに従います。

ローカル変数記述子および result記述子は任意の順序で現れ、複数回指定することもできます。その場合、後に現れる宣言が前の宣言よりも優先されます。

@function --mypi() {
  result: 3;
  result: 3.14;
}

--mypi の result記述子の値は 3.14 です。

@function --circle-area(--r) {
  result: calc(pi * var(--r2));
  --r2: var(--r) * var(--r);
}

ローカル変数記述子は参照より前でも後でも現れてもかまいません。

4.1. 条件付きルール

条件付きグループ規則が @function 内に現れる場合、入れ子グループ規則となります。ただし、入れ子グループ規則内では @function で許可されている記述子のみが使用できます。

条件付きグループ規則は @function 内でも通常通り処理されます。条件が真の場合、その規則の内容がその場所にあるかのように動作し、そうでない場合は何も存在しないかのように動作します。

@function --suitable-font-size() {
  result: 16px;
  @media (width > 1000px) {
    result: 20px;
  }
}

result記述子の値はメディアクエリの条件が真の場合 20px、そうでない場合は 16px です。

実行モデルのため、 @function 内で「早期リターン」はできない点に注意してください:

@function --suitable-font-size() {
  @media (width > 1000px) {
    result: 20px;
  }
  result: 16px;
}

上記の例では、result記述子の値は常に 16px となります。

ローカル変数も条件付きルール内で有効です:

@function --suitable-font-size() {
  --size: 16px;
  @media (width > 1000px) {
    --size: 20px;
  }
  result: var(--size);
}

5. CSSOM

5.1. `CSSFunctionRule` インターフェース

CSSFunctionRule インターフェースは @function 規則を表します。

[Exposed=Window]
interface CSSFunctionRule : CSSGroupingRule {
  readonly attribute CSSOMString name;
  sequence<FunctionParameter> getParameters();
  readonly attribute CSSOMString returnType;
};

name, 型 CSSOMString、readonly: カスタム関数の名前。
returnType, 型 CSSOMString、readonly: カスタム関数の構文文字列として表される戻り値型。カスタム関数に戻り値型がない場合は "type(*)" を返します。

dictionary FunctionParameter {
  required CSSOMString name;
  required CSSOMString type;
  CSSOMString? defaultValue;
};

name: 関数パラメータの名前。
type: 関数パラメータの型。構文文字列として表されるか、パラメータに型がない場合は "type(*)"。
defaultValue: デフォルト値。引数にデフォルト値がなければ `null`。

宣言は @function 規則内で直接指定できますが、 CSSOMではそのまま表現はされません。代わりに、連続した宣言の区間は CSSFunctionDeclarations 規則でラップされているかのように現れます。

注: これは @function 規則内の「先頭」の宣言（他の入れ子規則よりも前に現れるもの）にも適用されます。

@function --bar() {
  --x: 42;
  result: var(--y);
  @media (width > 1000px) {
    /* ... */
  }
  --y: var(--x);
}

上記はCSSOMでは以下のように現れます:

@function --bar() {
  /* CSSFunctionDeclarations { */
    --x: 42;
    result: var(--y);
  /* } */
  @media (width > 1000px) {
    /* ... */
  }
  /* CSSFunctionDeclarations { */
    --y: var(--x);
  /* } */
}

CSSFunctionRuleの直列化以下を連結して返す:

文字列 "@function" と1つの半角スペース (U+0020)。
serialize an identifier をカスタム関数名に対して行い、左括弧 (U+0028) を続ける。
serialize a function parameter をカスタム関数の parameters全てに行い、 ", " （コンマ＋スペース）で結合する。
右括弧 (U+0029) を1つ。
カスタム関数に戻り値型があり、その戻り値型がユニバーサル構文定義 ("*") でない場合:
- 半角スペース (U+0020)、文字列 "returns"、半角スペース (U+0020)。
- serialize a CSS type をその型に行い、半角スペース (U+0020) を続ける。
左波括弧 (U+007B)、半角スペース (U+0020)。
cssRules内の各ルールにserialize a CSS ruleを行い、空文字列は除外し、半角スペースで結合する。

注: serialize a CSS ruleは空のCSSFunctionDeclarations ルールを直列化する際に空文字列を返すことがある。
半角スペース (U+0020)、右波括弧 (U+007D) を1つ。

関数パラメータの直列化以下を連結して返す:

serialize an identifier を関数パラメータ名に対して行う。
関数パラメータに型があり、その型がユニバーサル構文定義でない場合:
- 半角スペース (U+0020)、serialize a CSS type をその型に行う。
関数パラメータにデフォルト値がある場合:
- コロン (U+003A)、半角スペース (U+0020)、 serialize a CSS value をその値に行う。

CSS型の直列化以下を連結して返す:

もし <css-type> が単一の <syntax-component> なら、対応する構文文字列を返す。
それ以外の場合、以下を連結して返す:
- 文字列 "type("（"type"＋左括弧）。
- 対応する構文文字列。
- 文字列 ")"（右括弧）。

5.2. `CSSFunctionDeclarations` インターフェース

CSSFunctionDeclarations インターフェースは宣言の連続区間を @function 規則内で表します。

[Exposed=Window]
interface CSSFunctionDescriptors : CSSStyleDeclaration {
  attribute [LegacyNullToEmptyString] CSSOMString result;
};

[Exposed=Window]
interface CSSFunctionDeclarations : CSSRule {
  [SameObject, PutForwards=cssText] readonly attribute CSSFunctionDescriptors style;
};

style 属性はその規則について CSSFunctionDescriptors オブジェクトを返し、以下のプロパティを持つ:

computed flag: 未設定
readonly flag: 未設定
declarations: 規則で宣言された宣言群（指定順で）。ここにはローカル変数も含まれる。
parent CSS rule: this
owner node: null

CSSFunctionDeclarations 規則は CSSNestedDeclarations と同様に、 serialize される際はその宣言ブロックが直接 serialize されたかのように扱われます。

6. プライバシーへの配慮

本仕様で定義される構造は、CSS内でのみ定義・利用されるものであり、新たな情報は公開しません。

7. セキュリティへの配慮

本仕様に対して提出された問題はありません。

適合性

文書規約

適合性要件は、記述的な主張とRFC 2119の用語の組み合わせで表現されます。規範的な部分で使用される “MUST”、“MUST NOT”、“REQUIRED”、“SHALL”、“SHALL NOT”、“SHOULD”、“SHOULD NOT”、“RECOMMENDED”、“MAY”、“OPTIONAL” というキーワードはRFC 2119の通り解釈されます。ただし、可読性のため本仕様ではこれらの語がすべて大文字で表記されません。

この仕様の本文は、明示的に非規範、例、注記と記載されているセクションを除き規範的です。[RFC2119]

この仕様の例は「for example」で始まるか、class="example" として規範文とは分けて記載されます：

参考ノートは「Note」で始まり、class="note"として規範文とは分けて記載されます：

アドバイスは注意喚起のための規範セクションであり、他の規範文と分けて<strong class="advisement">として記載されます： UAはアクセシブルな代替手段を提供しなければならない。

適合性クラス

本仕様への適合性は、三つの適合性クラスで定義されます：

スタイルシートは、本モジュールで定義された構文を使うすべての記述が、一般的なCSS構文と本モジュールで定義された各機能の個別構文に従い有効であれば、本仕様に適合しているとみなされます。

レンダラーは、スタイルシートを適切な仕様で定義された通りに解釈することに加え、本仕様で定義されるすべての機能に対応し、それらを正しく解析し文書をそれに従ってレンダリングできれば、本仕様に適合しているとみなされます。ただし、デバイスの制限により文書の正しいレンダリングができない場合でもUAが非適合となるわけではありません（例：UAはモノクロディスプレイ上で色をレンダリングする必要はありません）。

オーサリングツールは、一般的なCSS構文と本モジュールの個別構文に従い文法的に正しいスタイルシートを書き、本モジュールで記載されたスタイルシートの他のすべての適合要件も満たす場合、本仕様に適合しているとみなされます。

部分実装

著者が前方互換のパース規則を利用してフォールバック値を指定できるよう、CSSレンダラーは無効として（適切に無視）、サポートできないatルール、プロパティ、プロパティ値、キーワードその他の構文要素を扱わなければなりません。特に、ユーザーエージェントはサポートされていない値を選択的に無視し、単一の複数値プロパティ宣言でサポートされる値のみを認めてはなりません。いずれかの値が無効（サポート外の値は必ず無効とみなされる）ならCSSは宣言全体を無視することを要求しています。

不安定な機能および独自機能の実装

非実験的な実装

仕様がCandidate Recommendation段階に達したら、非実験的な実装が可能となり、実装者は仕様通りに正しく実装できることを示せるCRレベル機能についてベンダープレフィックス無しの実装をリリースすべきです。

CSSの相互運用性を実現・維持するため、CSS作業グループは非実験的なCSSレンダラーに対し、ベンダープレフィックス無しのCSS機能の実装をリリースする前に実装レポート（必要であればそのためのテストケース）をW3Cに提出するよう要請します。W3Cに提出されたテストケースはCSS作業グループによって精査・修正されます。

CSS 関数およびミックスイン・モジュール

概要

この文書の位置づけ

1. はじめに

2. カスタム関数の定義

2.1. @function規則

2.1.1. 関数の前文

2.1.2. 関数本体

2.2. result記述子

2.3. 引数とローカル変数

3. カスタム関数の利用

3.1. カスタム関数の評価

4. カスタム関数の実行モデル

4.1. 条件付きルール

5. CSSOM

5.1. `CSSFunctionRule` インターフェース

5.2. `CSSFunctionDeclarations` インターフェース

6. プライバシーへの配慮

7. セキュリティへの配慮

適合性

文書規約

適合性クラス

部分実装

不安定な機能および独自機能の実装

非実験的な実装

索引

本仕様で定義されている用語

参照で定義される用語

参考文献

規範文献

参考文献

プロパティ索引

@function 記述子

IDL索引

CSS 関数およびミックスイン・モジュール

概要

この文書の位置づけ

1. はじめに

2. カスタム関数の定義

2.1. @function規則

2.1.1. 関数の前文

2.1.2. 関数本体

2.2. result記述子

2.3. 引数とローカル変数

3. カスタム関数の利用

3.1. カスタム関数の評価

4. カスタム関数の実行モデル

4.1. 条件付きルール

5. CSSOM

5.1. CSSFunctionRule インターフェース

5.2. CSSFunctionDeclarations インターフェース

6. プライバシーへの配慮

7. セキュリティへの配慮

適合性

文書規約

適合性クラス

部分実装

不安定な機能および独自機能の実装

非実験的な実装

索引

本仕様で定義されている用語

参照で定義される用語

参考文献

規範文献

参考文献

プロパティ索引

@function 記述子

IDL索引

5.1. `CSSFunctionRule` インターフェース

5.2. `CSSFunctionDeclarations` インターフェース