CSS 型付きオブジェクトモデル API
====================

CSS 型付きオブジェクトモデル API (CSS Typed Object Model API) は、 CSS の値を文字列ではなく、型付き JavaScript オブジェクトとして提供することにより、CSS のプロパティ操作を簡略化するものです。これは CSS の操作を単純化するだけでなく、 `HTMLElement.style` と比較して、パフォーマンスへの悪影響も軽減できます。

一般的に、 CSS の値は JavaScript で文字列として読み書きすることができますが、これは遅くて煩わしい場合があります。 CSS 型付きオブジェクトモデル API は、文字列の解析と連結に比べてより簡単に、より確実に操作と理解ができる特殊な JS オブジェクトで値を表現することにより、基礎となる値と対話するためのインターフェイスを提供します。これは開発者にとって扱いがより簡単です（例えば、数値が実際の JS の数値に反映され、そこに定義されている単位を考慮した数値演算ができます）。また、 CSS の文字列の構築と解析の両方を行うことなく、値を直接操作し、安価に元の値に戻すことができるため、一般に高速に処理することができます。

CSS 型付きオブジェクトモデルは、 CSS のプロパティに割り当てられた値を効率的に操作できるとともに、より理解しやすく書きやすい保守性の高いコードを実現します。

インターフェイス
--------

### `CSSStyleValue`

`CSSStyleValue` は CSS 型付きオブジェクトモデル API のインターフェイスで、型付きオブジェクトモデル API を通してアクセスできるすべての CSS 値の基底クラスとなるものです。このクラスのインスタンスは、文字列が期待される場所であればどこでも使用することができます。

`CSSStyleValue.parse(property, cssText)`

parse() は CSSStyleValue インターフェイスのメソッドで、 CSS 文字列から CSSNumericValue を構築することができます。これは、特定の CSS プロパティを指定された値に設定し、最初の値を CSSStyleValue オブジェクトとして返します。

`CSSStyleValue.parseAll()`

parseAll() は CSSStyleValue インターフェイスのメソッドで、特定の CSS プロパティを指定された値に設定し、CSSStyleValue オブジェクトの配列を返すもので、それぞれが指定された値の一つを含んでいます。

### `StylePropertyMap`

`StylePropertyMap` は CSS 型付きオブジェクトモデル API のインターフェイスで、 CSSStyleDeclaration の代替となる CSS 宣言ブロックの表現を提供します。

`StylePropertyMap.set()`

StylePropertyMap インターフェイスのメソッドで、指定されたプロパティを持つ CSS 宣言を指定された値に変更します。

`StylePropertyMap.append()`

指定されたプロパティと値による新しい CSS 宣言を、この StylePropertyMap に追加するメソッドです。

`StylePropertyMap.delete()`

指定されたプロパティを持つ CSS 宣言を、この StylePropertyMap から削除するメソッドです。

`StylePropertyMap.clear()`

StylePropertyMap からすべての宣言を削除するメソッドです。

### `CSSUnparsedValue`

`CSSUnparsedValue` は CSS 型付きオブジェクトモデル API のインターフェイスで、カスタムプロパティを参照するプロパティ値を表します。文字列の断片と変数の参照のリストから成ります。

`CSSUnparsedValue()` コンストラクター

カスタムプロパティを参照するプロパティ値を表す新しい CSSUnparsedValue オブジェクトを生成します。

`CSSUnparsedValue.entries()`

このオブジェクト自身の列挙可能なプロパティの [key, value] ペアの配列を for...in ループで提供されるのと同じ順序で返すメソッドです（for-in ループはプロトタイプチェーン内のプロパティも列挙する点が異なります）。

`CSSUnparsedValue.forEach()`

CSSUnparsedValue の各要素に対して、提供された関数を一回ずつ実行するメソッドです。

`CSSUnparsedValue.keys()`

配列のそれぞれのインデックスのキーを含む、新しい配列イテレーターオブジェクトを返すメソッドです。

### `CSSKeywordValue` シリアライズ

`CSSKeywordValue` は CSS 型付きオブジェクトモデル API のインターフェイスで、 CSS キーワードやその他の識別子を表現するためのオブジェクトを作成します。

`CSSKeywordValue()` コンストラクター

CSS キーワードなどの識別子を表す新しい `CSSKeywordValue()` オブジェクトを作成するコンストラクターです。

`CSSKeywordValue.value()`

CSSKeywordValue インターフェイスのプロパティで、CSSKeywordValue の値を返すか設定します。

CSSStyleValue インターフェイス
----------------------

CSSStyleValue は、すべての CSS 値が表現される基本クラスです。サブクラスは以下の通りです。

`CSSImageValue` オブジェクト

画像を取るプロパティ、例えば `background-image`, `list-style-image`, `border-image-source` の値を表すインターフェイスです。

`CSSKeywordValue`

CSS のキーワードやその他の識別子を表現するオブジェクトを生成する インターフェイスです。文字列が期待される場所で使用された場合、 CSSKeyword.value の値を返します。

`CSSMathValue` (en-US)

単一の値や単位よりも複雑な数値を表すサブクラスのツリーで、次のようなものがあります。

* `CSSMathInvert` (en-US) - CSS の `calc()` 値を `calc(1 / <value>)` のように使用したものを表現します。
* `CSSMathMax` (en-US) - CSS の `max()` 関数を表します。
* `CSSMathMin` (en-US) - CSS の `min()` 関数を表します。
* `CSSMathNegate` (en-US) - 渡された値を否定します。
* `CSSMathProduct` (en-US) - `CSSNumericValue` に対して `add()`, `sub()`, `toSum()` を実行した結果を表します。
* `CSSMathSum` (en-US) - `CSSNumericValue` に対して `add()`, `sub()`, `toSum()` を実行した結果を表します。

`CSSNumericValue`

すべての数値が実行可能な操作を表すインターフェイスです。

* `CSSNumericValue.add` - 与えられた数字を `CSSNumericValue` に加算します。
* `CSSNumericValue.sub` - 与えられた数値を `CSSNumericValue` から減算します。
* `CSSNumericValue.mul` - 与えられた数値を `CSSNumericValue` に乗算します。
* `CSSNumericValue.div` - 与えられた数値を他の数値で割り、0 の場合はエラーが発生します。
* `CSSNumericValue.min` - 渡された値の最小値を返します。
* `CSSNumericValue.max` - 渡された値の最大値を返します。
* `CSSNumericValue.equals` - すべての値がまったく同じ型と値で、同じ順序である場合には true を返します。そうでなければ、 false を返します。
* `CSSNumericValue.to` - `value` を指定された*単位*の別の値に変換する。
* `CSSNumericValue.toSum`
* `CSSNumericValue.type`
* `CSSNumericValue.parse` - CSS の文字列から解釈された数値を返します。

`CSSPositionValue` (en-US)

object-position など、位置を取るプロパティの値を表します。

`CSSTransformValue`

`transform` のリスト値を表すインターフェイスです。これらは 1 つ以上の `CSSTransformComponent` を含んでおり、個々の `transform` 関数値を表します。

`CSSUnitValue` (en-US)

単一の単位、または名前付き数値とパーセントで表現できる数値を表すインターフェイスです。

`CSSUnparsedValue`

カスタムプロパティを参照するプロパティ値を表します。文字列の断片と変数参照のリストで構成されます。

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # stylevalue-objects |
| CSS Typed OM Level 1 # the-stylepropertymap |
| CSS Typed OM Level 1 # cssunparsedvalue |
| CSS Typed OM Level 1 # keywordvalue-objects |

ブラウザーの互換性
---------

### api.CSSStyleValue

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.StylePropertyMap

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.CSSUnparsedValue

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.CSSKeywordValue

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS 描画 API
* CSS 型付きオブジェクトモデルの使用
* CSS Houdini