CSS.registerProperty()

Baseline 2024

Newly available

Since July 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

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

構文

js
CSS.registerProperty(PropertyDefinition)

引数

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

name

定義するプロパティの名前を示す文字列です。

syntax 省略可

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

inherits

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

initialValue 省略可

定義されたプロパティの初期値を表す文字列です。

返値

undefined です。

例外

InvalidModificationError DOMException

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

SyntaxError DOMException

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

TypeError

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

例

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

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

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

css
.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;
}

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

html
<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

関連情報