CSS.registerProperty()

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

CSS.registerProperty() メソッドはカスタムプロパティを登録し、プロパティ型のチェック、既定値、値の継承の有無の指定を行うことができます。

カスタムプロパティを登録すると、許される型は何か、その値を継承するかどうか、既定値は何かといったカスタムプロパティの動作ををブラウザーに指示することができます。

構文

CSS.registerProperty(PropertyDefinition);

引数

次のメンバーを設定することができる PropertyDefinition 辞書オブジェクトです。

name

定義しているプロパティの名前を示す DOMString。

syntax 省略可

定義されたプロパティの期待される構文を表す DOMString。 既定値は "*" です。

inherits

定義されたプロパティを継承する必要があるか (true)、否か (false) を定義する論理値。 既定値は false です。

initialValue 省略可

定義されたプロパティの初期値を表す DOMString。

返値

undefined です。

例外

InvalidModificationError

指定された name がすでに登録されている場合。

SyntaxError

指定された name が（--foo のように、 2 つのダッシュで始まる）有効なカスタムプロパティ名ではない場合。

TypeError

必須の辞書メンバーの name または inherits、あるいはその両方が指定されていない場合。

例

次の例では、カスタムプロパティの --my-color を、 registerProperty() を使用して色として登録し、既定値を指定して、その値を継承しないようにします。

window.CSS.registerProperty({
  name: '--my-color',
  syntax: '<color>',
  inherits: false,
  initialValue: '#c0ffee',
});

この例では、カスタムプロパティ --my-color が構文 <color> を使用して登録されます。 これで、このプロパティを使用して、ポインターを当てたりフォーカスを与えたりするとグラデーションをトランジションで変化させることができます。 登録されたプロパティではトランジションが機能しますが、未登録のプロパティでは機能しないことに注意してください。

.registered {
  --my-color: #c0ffee;
  background-image: linear-gradient(to right, #fff, var(--my-color));
  transition: --my-color 1s ease-in-out;
}

.registered:hover,
.registered:focus {
  --my-color: #b4d455;
}

.unregistered {
  --unregistered: #c0ffee;
  background-image: linear-gradient(to right, #fff, var(--unregistered));
  transition: --unregistered 1s ease-in-out;
}

.unregistered:hover,
.unregistered:focus {
  --unregistered: #b4d455;
}
button {
  font-size: 3vw;
}

これらのスタイルをいくつかのボタンに追加できます。

<button class="registered">Background Registered</button>
<button class="unregistered">Background Not Registered</button>

仕様書

Specification
CSS Properties and Values API Level 1
# the-registerproperty-function

ブラウザーの互換性

BCD tables only load in the browser

関連情報