recursal/MDN huggingface dataset:
History: pushState() メソッド
=========================

HTML 文書では、 **`history.pushState()`** メソッドはブラウザーのセッション履歴スタックに項目を追加します。

このメソッドは非同期です。移動が完了したときを検知したい場合は `popstate` イベントのリスナーを追加してください。

構文
--


```js
pushState(state, unused)
pushState(state, unused, url)
```

### 引数

`state`

この `state` (状態)オブジェクトは、`pushState()` によって作られる新しい履歴項目に関連した JavaScript オブジェクトです。ユーザーが新規の `state` に移動したときはいつも、 `popstate` イベントが発行され、イベントの `state` プロパティは、履歴項目の `state` オブジェクトのコピーを含みます。

`state` オブジェクトは、シリアライズ可能なあらゆものとなりえます。 Firefox では状態オブジェクトをユーザーのディスクに保存してブラウザーを再起動した後にも復帰できるため、 `state` オブジェクトのシリアライズ表現に 16 MiB の上限を課しています。これを超える大きさの状態オブジェクトを `pushState()` に渡した場合、このメソッドで例外が発生します。これ以上のスペースが必要な場合、`sessionStorage` や `localStorage` を使用することをお勧めします。

`unused`

この引数は歴史的な理由のために存在しており、省略することはできません。空文字を渡すことが、将来このメソッドに変更が加えられたときに安全です。

`url` 省略可

新しい履歴項目の URL は、この引数で与えられます。ブラウザーは `pushState()` を呼び出した後もこの URL を読み込もうとせずに、例えばユーザーがブラウザーを再起動した後など、後で URL を読み込む場合もあるのにご注意ください。新しい URL は絶対パスとは限りません。つまり相対パスの場合、現在の URL から相対的に解決されます。新しい URL は現在の URL と同一オリジンでなければならず、そうでない場合、`pushState()` で例外が発生します。この引数が指定されなかった場合、この文書の現在の URL が設定されます。

### 返値

なし (`undefined`)。

解説
--

 ある意味で、 `pushState()` の呼び出しは `window.location = "#foo"` と似ていて、両方とも現在の文書に関連した別の履歴項目を作成し、有効化します。
 しかし `pushState()` にはいくつかの利点があります。

* 新しい URL は現在の URL と同一オリジンにあるあらゆる URL にすることができます。それに対して、`window.location` に設定した場合、ハッシュのみを変更したのであれば同じ文書にとどまります。
* URL を変更することは必須ではありません。それに対して、 `window.location = "#foo";` を設定する場合は、現在のハッシュが `#foo` でない場合のみ新規の履歴項目を作成します。
* 履歴項目に任意のデータを関連づけることができます。ハッシュベースのアプローチでは、関連するデータすべてを短い文字列にエンコードする必要があります。

`pushState()` は `hashchange` イベントを発行しません。新 URL が旧 URL とハッシュだけ異なる場合でもそうなることに気をつけてください。

例
-

これはブラウザーの履歴項目に *state* と *url* を設定したものを作成します。

### JavaScript


```js
const state = { page\_id: 1, user\_id: 5 };
const url = "hello-world.html";

history.pushState(state, "", url);
```

### クエリー引数の変更


```js
const url = new URL(location);
url.searchParams.set("foo", "bar");
history.pushState({}, "", url);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-history-pushstate-dev |

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

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

関連情報
----

* 履歴 API の操作
* Window: popstate イベント
History: state プロパティ
====================

**`History.state`** プロパティは、履歴スタックの一番上の状態を表す値を返します。これは `popstate` イベントを待つことなく、状態を見ることができる方法です。

値
-

履歴スタックの一番上の状態です。この値は `pushState()` または `replaceState()` メソッドが使用されていない限り `null` です。

例
-

 以下のコードでは、 `history.state` の値を `pushState()` メソッドを使用して値を履歴にプッシュする前に、ログに記録しています。
 次の行では、再びコンソールに値が記録され、 `history.state` に値があることが分かります。


```js
// まだ履歴スタックを変更していないため、 null になります
console.log("History.state before pushState: ", history.state);

// スタックに何かプッシュします
history.pushState({ name: "Example" }, "pushState example", "page3.html");

// 状態は値になりました。
console.log("History.state after pushState: ", history.state);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-history-state-dev |

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

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

関連情報
----

* 履歴 API での作業
* `History.pushState()`
* `History.replaceState()`
* `PopStateEvent.state`
History: length プロパティ
=====================

**`History.length`** は読み取り専用のプロパティで、セッション履歴に含まれる要素の数を、現在読み込まれているページを含めて表す整数を返します。

例えば、新しいタブに読み込まれたページでは、このプロパティは `1` を返します。

値
-

数値です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-history-length-dev |

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

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

関連情報
----

* 所属先の `History` インターフェイス
History: replaceState() メソッド
============================

**`History.replaceState()`** メソッドは、現在の履歴を編集し、メソッドに引数で渡された状態オブジェクトや URL で置き換えます。このメソッドは、ユーザーのアクションに応じて現在の履歴項目の状態オブジェクトや URL を更新したい場合に特に便利です。

このメソッドは非同期です。移動が完了したときを検知したい場合は `popstate` イベントのリスナーを追加してください。

構文
--


```js
replaceState(state, unused)
replaceState(state, unused, url)
```

### 引数

`state`

オブジェクトで、 `replaceState` メソッドに渡された履歴項目に関連付けられます。状態オブジェクトは `null` を指定することができます。

`unused`

この引数は歴史的な理由のために存在しており、省略することはできません。空文字を渡すことが、将来このメソッドに変更が加えられたときに安全です。

`url` 省略可

履歴項目の URL です。新しい URL は現在の URL と同じオリジンでなければなりません。もしそうでないと、 replaceState で例外が発生します。

### 返値

なし (`undefined`)。

例
-

`https://www.mozilla.org/foo.html` が以下の JavaScript を実行したとします。


```js
const stateObj = { foo: "bar" };
history.pushState(stateObj, "", "bar.html");
```


次のページでは、 `history.state` を使用して、追加したばかりの `stateObj` にアクセスすることができます。

上記の 2 行の説明は、履歴 API での作業の記事の `pushState()` の例にあります。次に、 `https://www.mozilla.org/bar.html` が以下の JavaScript を実行したとします。


```js
history.replaceState(stateObj, "", "bar2.html");
```


これにより、URL バーに `https://www.mozilla.org/bar2.html` が表示されるようになりますが、ブラウザーが `bar2.html` を読み込んだり、`bar2.html` が存在するかどうかを確認したりすることはありません。

ユーザーが `https://www.microsoft.com` に移動し、戻るボタンをクリックしたとします。この時点で、URL バーには `https://www.mozilla.org/bar2.html` が表示されます。ユーザーがもう一度「戻る」ボタンをクリックすると、URL バーには `https://www.mozilla.org/foo.html` が表示され、 bar.html は完全にバイパスされます。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-history-replacestate-dev |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
History: back() メソッド
====================

**`History.back()`** メソッドは、ブラウザーにセッション履歴内で 1 つ前のページに戻らせます。

これは `history.go(-1)` を呼び出すのと同じ効果があります。 1 つ前のページがない場合、このメソッド呼び出しは何もしません。

このメソッドは非同期です。移動が完了したときを検知したい場合は `popstate` イベントのリスナーを追加してください。

構文
--


```js
back()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

以下の短い例では、ページ上のボタンを押すとセッション履歴内の 1 つ前の項目に移動します。

### HTML


```html
<button id="go-back">Go back!</button>
```

### JavaScript


```js
document.getElementById("go-back").addEventListener("click", () => {
  history.back();
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-history-back-dev |

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

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

関連情報
----

* `History`
* 履歴 API の操作
History: scrollRestoration プロパティ
================================

**`scrollRestoration`** は `History` インターフェイスのプロパティで、ウェブアプリケーションが履歴の移動の動作で既定のスクロール位置の復元を明示的に設定できるようにします。

値
-

以下のうちのいずれかです。

`auto`

ユーザーがスクロールしたページ上のスクロールの位置が復元されます。

`manual`

ページ上のスクロール位置は復元されません。ユーザーが手動でその位置までスクロールする必要があります。

例
-

### 現在のスクロール復元の動作を問い合わせる


```js
const scrollRestoration = history.scrollRestoration;
if (scrollRestoration === "manual") {
  console.log(
    "ページ上の位置は復元されないので、ユーザーが手動でスクロールする必要があります。",
  );
}
```

### 自動的にページ上の位置の復元をしないようにする


```js
if (history.scrollRestoration) {
  history.scrollRestoration = "manual";
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-history-scroll-restoration-dev |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
History: forward() メソッド
=======================

**`History.forward()`** メソッドにより、ブラウザーはセッション履歴の 1 つ次のページに移動します。これは `history.go(1)` を呼び出すのと同じ効果があります。

このメソッドは非同期です。移動が完了したことを検知したい場合は `popstate` イベントのリスナーを追加してください。

構文
--


```js
forward()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

以下の例では、セッション履歴の 1 つ次のステップへ進めるボタンを作成します。

### HTML


```html
<button id="go-forward">Go Forward!</button>
```

### JavaScript


```js
document.getElementById("go-forward").addEventListener("click", (e) => {
  history.forward();
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-history-forward-dev |

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

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

関連情報
----

* `History`
* `popstate`
* 履歴 API の操作
History: go() メソッド
==================

**`History.go()`** メソッドは、セッション履歴から特定のページを読み込みます。これを用いると、引数の値に応じて履歴の中を前方や後方に移動することができます。

このメソッドは非同期です。移動が完了したときを検知したい場合は `popstate` イベントのリスナーを追加してください。

構文
--


```js
go()
go(delta)
```

### 引数

`delta` 省略可

履歴の中を移動したい先の位置で、現在のページからの相対位置です。負の数の場合は前方に移動し、正の値の場合は後方へ移動します。すなわち、例えば、 `history.go(2)` は 2 ページ後に移動し、 `history.go(-2)` は 2 ページ前に戻ります。値が渡されなかったときや、 `delta` が 0 と等しいときは、 `location.reload()` の呼び出しと同じ効果になります。

### 返値

なし (`undefined`)。

例
-

1 つページを戻す場合 (`back()` の呼び出しと同等)


```js
history.go(-1);
```


1 つページを進める場合、 `forward()` の呼び出しと同等です。


```js
history.go(1);
```


2 つページを進める場合


```js
history.go(2);
```


2 つページを戻す場合


```js
history.go(-2);
```


そして、以下の文はいずれも現在のページを再読み込みします。


```js
history.go();
history.go(0);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-history-go-dev |

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

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

関連情報
----

* `History`
* `back()`
* `forward()`
* `popstate` イベント
* 履歴 API の操作
CSSUnparsedValue: length プロパティ
==============================

**`length`** は `CSSUnparsedValue` インターフェイスの読み取り専用プロパティで、オブジェクト内の項目数を返します。

値
-

整数です。

例
-

この例では、`CSSUnparsedValue()` コンストラクターを使用したあと、長さを照会しています。


```js
const values = new CSSUnparsedValue(["1em", "#445566", "-45px"]);

console.log(values.length); // 3
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssunparsedvalue-length |

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

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

関連情報
----

* `CSSUnparsedValue()`
* `CSSUnparsedValue.entries`
* `CSSUnparsedValue.forEach`
* `CSSUnparsedValue.keys`
* `CSSUnparsedValue.values`
* CSS 型付きオブジェクトモデルの使用
* CSS 型付きオブジェクトモデル API
CSSUnparsedValue: CSSUnparsedValue() コンストラクター
=============================================

**`CSSUnparsedValue()`** はコンストラクターで、カスタムプロパティのプロパティ値を表す新しい `CSSUnparsedValue` オブジェクトを生成します。

構文
--


```js
new CSSUnparsedValue(members)
```

### 引数

`members`

文字列または `CSSVariableReferenceValue` のどちらかの値を持つ配列です。

例
-


```js
const value = new CSSUnparsedValue(["4deg"]);
const values = new CSSUnparsedValue(["1em", "#445566", "-45px"]);

console.log(value); // CSSUnparsedValue {0: "4deg", length: 1}
console.log(values); // CSSUnparsedValue {0: "1em", 1: "#445566", 2: "-45px", length: 3}
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssunparsedvalue-cssunparsedvalue |

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

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

関連情報
----

* `CSSUnparsedValue.entries`
* `CSSUnparsedValue.forEach`
* `CSSUnparsedValue.keys`
* `CSSUnparsedValue.length`
* `CSSUnparsedValue.values`
* CSS 型付きオブジェクトモデルの使用
* CSS 型付きオブジェクトモデル API
CSSUnparsedValue: values() メソッド
===============================

**`CSSUnparsedValue.values()`** メソッドは、 CSSUnparsedValue オブジェクト内のそれぞれの添字の値を持つ新しい配列イテレーターオブジェクトを返します。

構文
--


```js
values()
```

### 引数

なし。

### 返値

新しい `Array`。

仕様書
---

#### No specification found

No specification data found for `api.CSSUnparsedValue.values`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

関連情報
----

* `CSSUnparsedValue()`
* `CSSUnparsedValue.entries`
* `CSSUnparsedValue.forEach`
* `CSSUnparsedValue.keys`
* `CSSUnparsedValue.length`
* CSS 型付きオブジェクトモデルの使用
* CSS 型付きオブジェクトモデル API
CSSUnparsedValue: keys() メソッド
=============================

**`CSSUnparsedValue.keys()`** メソッドは、配列内のそれぞれの添字のキーを持つ新しい配列イテレーターオブジェクトを返します。

構文
--


```js
keys()
```

### 引数

なし。

### 返値

新しい `Array`。

仕様書
---

#### No specification found

No specification data found for `api.CSSUnparsedValue.keys`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

関連情報
----

* `CSSUnparsedValue()`
* `CSSUnparsedValue.entries`
* `CSSUnparsedValue.forEach`
* `CSSUnparsedValue.length`
* `CSSUnparsedValue.values`
* CSS 型付きオブジェクトモデルの使用
* CSS 型付きオブジェクトモデル API
CSSUnparsedValue: forEach() メソッド
================================

**`CSSUnparsedValue.forEach()`** メソッドは、指定された関数を、`CSSUnparsedValue` オブジェクトのそれぞれの要素に対して実行します。

構文
--


```js
forEach(callbackFn)
forEach(callbackFn, thisArg)
```

### 引数

`callbackFn`

それぞれの要素について呼び出される関数で、3 つの引数を取ります。

`currentValue`

処理中の現在の要素の値。

`index` 省略可

処理中の現在の要素の添字。

`array` 省略可

`forEach()` が呼び出されている `CSSUnparsedValue`。


`thisArg` 省略可

`callback` の実行中に、 **`this`** として使用する値（つまり、`Object` の参照）。.

### 返値

なし (`undefined`)。

仕様書
---

#### No specification found

No specification data found for `api.CSSUnparsedValue.forEach`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

関連情報
----

* `CSSUnparsedValue()`
* `CSSUnparsedValue.entries`
* `CSSUnparsedValue.keys`
* `CSSUnparsedValue.length`
* `CSSUnparsedValue.values`
* CSS 型付きオブジェクトモデルの使用
* CSS 型付きオブジェクトモデル API
CSSUnparsedValue: entries() メソッド
================================

**`CSSUnparsedValue.entries()`** メソッドは、指定されたオブジェクトの列挙可能なプロパティ `[key, value]` の組の配列を、`for...in` ループで提供されるのと同じ順序で返します（違いは for-in ループがプロトタイプチェーン上のプロパティも列挙することです）。

構文
--


```js
entries(obj)
```

### 引数

`obj`

`CSSUnparsedValue` で、列挙可能な固有のプロパティの `[key, value]` の組を返します。

### 返値

指定された `CSSUnparsedValue` の配列で、列挙可能な固有のプロパティの `[key, value]` の組。

仕様書
---

#### No specification found

No specification data found for `api.CSSUnparsedValue.entries`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

関連情報
----

* `CSSUnparsedValue()`
* `CSSUnparsedValue.forEach`
* `CSSUnparsedValue.keys`
* `CSSUnparsedValue.length`
* `CSSUnparsedValue.values`
* CSS 型付きオブジェクトモデルの使用
* CSS 型付きオブジェクトモデル API
BluetoothDevice: id プロパティ
=========================

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

読み取り専用プロパティ **`BluetoothDevice.id`** は、デバイスを一意に識別する文字列を返します。

値
-

文字列です。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothdevice-id |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
BluetoothDevice: name プロパティ
===========================

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

読み取り専用プロパティ **`BluetoothDevice.name`** は、デバイスの人間にわかりやすい名前を表す文字列を返します。

値
-

文字列です。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothdevice-name |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
BluetoothDevice: gatt プロパティ
===========================

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

読み取り専用プロパティ **`BluetoothDevice.gatt`** は、デバイスの `BluetoothRemoteGATTServer` への参照を返します。

値
-

デバイスの `BluetoothRemoteGATTServer` への参照です。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothdevice-gatt |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
EventTarget: EventTarget() コンストラクター
===================================

**`EventTarget()`** コンストラクターは、新しい `EventTarget` オブジェクトのインスタンスを作成します。

**メモ:** このコンストラクターを明示的に呼び出すことは、非常にまれです。ほとんどの場合、このコンストラクターは `EventTarget` から派生したオブジェクトのコンストラクターの中で、 `super` キーワードによって使用されます。

構文
--


```js
new EventTarget()
```

### 引数

なし。

### 返値

`EventTarget` オブジェクトのインスタンス。

例
-


```js
class MyEventTarget extends EventTarget {
  constructor(mySecret) {
    super();
    this._secret = mySecret;
  }

  get secret() {
    return this._secret;
  }
}

let myEventTarget = new MyEventTarget(5);
let value = myEventTarget.secret; // === 5
myEventTarget.addEventListener("foo", (e) => {
  myEventTarget._secret = e.detail;
});

let event = new CustomEvent("foo", { detail: 7 });
myEventTarget.dispatchEvent(event);
let newValue = myEventTarget.secret; // === 7
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-eventtarget-eventtarget① |

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

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

関連情報
----

* `EventTarget`
EventTarget: dispatchEvent() メソッド
=================================

**`dispatchEvent()`** は `EventTarget` のメソッドで、 `Event` をそのオブジェクトへ送り、関連するイベントリスナーを（同期的に）適切に起動させます。通常のイベント処理ルール（キャプチャとオプションのバブリングフェーズを含む）は `dispatchEvent()` で手動で配信されたイベントにも適用されます。

`dispatchEvent()` の呼び出しは、イベントを発行させるための最後のステップです。イベントは既に `Event()` コンストラクターを使って作成され、初期化されているはずです。

**メモ:** このメソッドを呼び出すとき、 `Event.target` プロパティは現在の `EventTarget` に初期化されます。

「ネイティブ」イベントがブラウザーによって発生し、イベントループを介して非同期にイベントハンドラーを呼び出すのとは異なり、 `dispatchEvent()` はイベントハンドラーを*同期的に*呼び出します。適用可能なすべてのイベントハンドラが呼び出され、 `dispatchEvent()` から戻る前に返されます。

構文
--


```js
dispatchEvent(event)
```

### 引数

`event`

配信する `Event` オブジェクトです。この `Event.target` プロパティは現在の `EventTarget` に設定されます。

### 返値

`event` がキャンセル可能で、かつ `event` を受け取ったイベントハンドラーの少なくとも 1 つが `Event.preventDefault()` を呼び出した場合は `false` となります。それ以外の場合は `true` です。

### 例外

`InvalidStateError` `DomException`

イベントの初期化時に、イベントの種類が指定されなかった場合に発生します。


**警告:** イベントハンドラーで発生した例外は、捕捉されない例外として報告されます。イベントハンドラーはネストされたコールスタック上で実行されます。イベントハンドラーが完了するまで呼び出し元はブロックされますが、例外は呼び出し元まで伝搬しません。

例
-

イベントの作成と起動 を参照してください。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-eventtarget-dispatchevent③ |

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

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

関連情報
----

* Event オブジェクトリファレンス
CSS.registerProperty()
======================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**`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 with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS プロパティと値 API の使用
* `CSS`
* `CSS.supports_static`
* `CSS.escape_static`
* CSS ファクトリー関数
CSS: highlights 静的プロパティ
=======================

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

**`highlights`** は `CSS` インターフェイスは静的な読み取り専用プロパティであり、interface は、CSS カスタムハイライト API (en-US) を使用して任意のテキスト範囲をスタイル設定するために用いる `HighlightRegistry` へのアクセス手段を提供します。

値
-

`HighlightRegistry` (en-US) オブジェクトです。

例
-

次の例は、複数のテキスト範囲を作成し、そのテキスト範囲に対して `Highlight` オブジェクトを作成し、このハイライトを `HighlightRegistry` に登録し、最後に `::highlight()` (en-US) 擬似要素を使用してテキスト範囲にスタイルを設定する例を示しています。


```js
const parentNode = document.getElementById("foo");

const range1 = new Range();
range1.setStart(parentNode, 10);
range1.setEnd(parentNode, 20);

const range2 = new Range();
range2.setStart(parentNode, 40);
range2.setEnd(parentNode, 60);

const myCustomHighlight = new Highlight(range1, range2);

CSS.highlights.set("my-custom-highlight", myCustomHighlight);
```



```css
::highlight(my-custom-highlight) {
  background-color: yellow;
  color: black;
}
```

仕様書
---

| Specification |
| --- |
| CSS Custom Highlight API Module Level 1 # dom-css-highlights |

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

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

関連情報
----

* CSS カスタムハイライト API (en-US)
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web
CSS: supports() 静的メソッド
======================

**`CSS.supports()`** メソッドは、ブラウザーが指定された CSS 機能に対応しているかどうかを論理値で返します。

構文
--


```js
CSS.supports(propertyName, value)
CSS.supports(supportCondition)
```

### 引数

引数の組み合わせが 2 種類あります。1 つ目は、対応しているかどうかをテストする*プロパティと値*を指定することができます。

`propertyName`

文字列で、チェックする CSS プロパティの名前が入ります。

`value`

文字列で、チェックする CSS プロパティの値が入ります。

2 つ目の構文は 1 つの引数を取り、`@supports` の条件と照合します。

`supportCondition`

文字列で、チェックする条件が入ります。

### 返値

ブラウザーがそのルールに対応しているのであれば `true`、そうでなければ `false` です。

例
-


```js
result = CSS.supports("text-decoration-style", "blink");
result = CSS.supports("display: flex");
result = CSS.supports("(--foo: red)");

result = CSS.supports(
  "(transform-style: preserve) or (-moz-transform-style: preserve) or (-webkit-transform-style: preserve)",
);

// 結果は true または false
```

仕様書
---

| Specification |
| --- |
| CSS Conditional Rules Module Level 3 # ref-for-dom-css-supports |

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

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

関連情報
----

* `@supports` アットルールは、同様の機能を宣言的な方法で行うことができます。
* `CSSSupportsRule` は CSSOM のクラスで、 `@supports` アットルールを操作することができます。
CSS 数値ファクトリー関数
==============

**CSS 数値ファクトリー関数**、たとえば `CSS.em()` や `CSS.turn()` は、単位を使用するメソッド名とし、数値を引数とした値の CSSUnitValues (en-US) を返すもので、このメソッドを使用すると、数値引数で単位を設定することができます。これらの関数は `CSSUnitValue()` (en-US) コンストラクターを使うよりも冗長でなく新しい数値を生成します。

構文
--


```js
CSS.number(number)
CSS.percent(number)

// <length>
CSS.em(number)
CSS.ex(number)
CSS.ch(number)
CSS.ic(number)
CSS.rem(number)
CSS.lh(number)
CSS.rlh(number)
CSS.vw(number)
CSS.vh(number)
CSS.vi(number)
CSS.vb(number)
CSS.vmin(number)
CSS.vmax(number)
CSS.cm(number)
CSS.mm(number)
CSS.Q(number)
CSS.in(number)
CSS.pt(number)
CSS.pc(number)
CSS.px(number)

// <angle>
CSS.deg(number)
CSS.grad(number)
CSS.rad(number)
CSS.turn(number)

// <time>
CSS.s(number)
CSS.ms(number)

// <frequency>
CSS.Hz(number)
CSS.kHz(number)

// <resolution>
CSS.dpi(number)
CSS.dpcm(number)
CSS.dppx(number)

// <flex>
CSS.fr(number)
```

例
-

数値ファクトリー関数の `CSS.vmax()` を使用して `CSSUnitValue` (en-US) を作成します。


```js
const height = CSS.vmax(50);

console.log(height); // CSSUnitValue {value: 50, unit: "vmax"}
console.log(height.value); // 50
console.log(height.unit); // vmax
```


この例では、要素のマージンを `CSS.px()` ファクトリー関数で設定します。


```js
myElement.attributeStyleMap.set("margin", CSS.px(40));
const currentMargin = myElement.attributeStyleMap.get("margin");
console.log(currentMargin.value, currentMargin.unit); // 40, 'px'
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # namespacedef-css |

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

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

関連情報
----

* `CSSUnitValue()` (en-US)