recursal/MDN huggingface dataset:
CSS: paintWorklet 静的プロパティ
=========================

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

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**`paintWorklet`** は `CSS` インターフェイスの静的な読み取り専用プロパティで、ペイントワークレットへのアクセスを提供します。これは、CSS のプロパティが画像ファイルを期待する場所においてプログラムで画像を生成します。

値
-

関連付けられた `Worklet` オブジェクトです。

例
-

次の例は、js ファイルからペイントワークレットを読み込む方法を示しており、機能検出によって読み込みます。


```js
if ("paintWorklet" in CSS) {
  CSS.paintWorklet.addModule("checkerboard.js");
}
```

仕様書
---

| Specification |
| --- |
| CSS Painting API Level 1 # ref-for-dom-css-paintworklet |

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

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

関連情報
----

* CSS 描画 API
* Houdini API
CSS: escape() 静的メソッド
====================

**`CSS.escape()`** は静的メソッドで、 CSS セレクターの一部として使用するために引数として渡されるエスケープ処理された文字列の入った文字列を返します。

構文
--


```js
CSS.escape(str)
```

### 引数

`str`

エスケープ処理する文字列です。

### 返値

エスケープされた文字列です。

例
-

### 基本的な結果


```js
CSS.escape(".foo#bar"); // "\.foo\#bar"
CSS.escape("()[]{}"); // "\(\)\[\]\{\}"
CSS.escape('--a'); // "--a"
CSS.escape(0); // "\30 " （'0' の Unicode コードポイントは 30）
CSS.escape('\0'); // "\ufffd" （Unicode REPLACEMENT CHARACTER）
```

### コンテキスト内での使用

セレクターの一部として使用するために文字列をエスケープするには、 `escape()` メソッドを使用します。


```js
const element = document.querySelector(`#${CSS.escape(id)} > img`);
```


`escape()` メソッドは文字列のエスケープにも使えますが、厳密にはエスケープする必要がない文字もエスケープしてしまいます。


```js
const element = document.querySelector(`a[href="#${CSS.escape(fragment)}"]`);
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-css.escape()-method |

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

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

関連情報
----

* この静的メソッドが所属する `CSS` インターフェイス
* CSS.escape のポリフィル
PresentationAvailability: value プロパティ
=====================================

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

**`value`** 属性は設定された最新の値を返さ ***なければなりません***。この値は利用可能なプレゼンテーション用画面のリストを監視するアルゴリズムにより更新されます。

`onchange` 属性はイベントハンドラーであり、対応するイベントハンドラーのイベントの種類は `change` です。

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

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

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
**`name`** は `CSSPropertyRule` インターフェイスの読み取り専用プロパティで、これはプロパティ名を表します。これは `@property` ルールの前置き部分においてカスタムプロパティに指定された名前をシリアライズしたものです。

値
-

A string.

例
-

このスタイルシートには、単一の `@property` ルールが格納されています。最初に返される `CSSRule` は、このルールを表す `CSSPropertyRule` となります。 `name` プロパティは文字列 `"--property-name"` を返します。この文字列は、 CSS でカスタムプロパティに指定された名前です。


```css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].name); //the string "--property-name"
```

仕様書
---

| Specification |
| --- |
| CSS Properties and Values API Level 1 # dom-csspropertyrule-name |

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

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

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
**`inherits`** は `CSSPropertyRule` インターフェイスの読み取り専用プロパティで、 `@property` ルールで表現されているカスタムプロパティ登録の継承フラグ、つまり、そのプロパティが既定値では継承されるかどうかを記述した論理値を返します。

値
-

論理値です。

例
-

このスタイルシートには、単一の `@property` ルールが格納されています。最初に返される `CSSRule` は、このルールを表す `CSSPropertyRule` となります。 `inherits` プロパティは論理値 `false` を返します。これは CSS の `inherits` プロパティの値です。


```css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].inherits); //returns false
```

仕様書
---

| Specification |
| --- |
| CSS Properties and Values API Level 1 # dom-csspropertyrule-inherits |

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

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

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
**`syntax`** は `CSSPropertyRule` インターフェイスの読み取り専用プロパティで、 これは、 `@property` ルールによって表されるカスタムプロパティ登録のリテラル構文を返し、プロパティの値が計算値の時点でどのように解釈されるかを制御するものです。

値
-

文字列です。

例
-

このスタイルシートには、単一の `@property` ルールが格納されています。最初に返される `CSSRule` は、このルールを表す `CSSPropertyRule` となります。 `syntax` プロパティはリテラル文字列の `"<color>"` を返します。


```css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].syntax); //the string "<color>"
```

仕様書
---

| Specification |
| --- |
| CSS Properties and Values API Level 1 # dom-csspropertyrule-syntax |

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

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

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
**`initialValue`** は `CSSPropertyRule` インターフェイスの読み取り専用プロパティで、 null にすることができます。 `@property` ルールで表されるカスタムプロパティ登録の初期値を返し、プロパティの初期値を制御します。

値
-

文字列で、 CSS 構文 3 で定義されている `<declaration-value>` です。

例
-

このスタイルシートには、単一の `@property` ルールが格納されています。最初に返される `CSSRule` は、このルールを表す `CSSPropertyRule` となります。 `initialValue` プロパティは、文字列 `"#c0ffee"` を返します。これは、 CSS の `initial-value` プロパティの値です。


```css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].initialValue); //the string "#c0ffee"
```

仕様書
---

| Specification |
| --- |
| CSS Properties and Values API Level 1 # dom-csspropertyrule-initialvalue |

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

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

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
**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

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

`HIDInputReportEvent` インターフェイスの **`reportId`** プロパティは、レポートを識別する 1 バイトの接頭辞、もしくは HID インターフェイスがレポート ID を用いていない場合 0 を返します。

値
-

識別用の 1 バイトの接頭辞です。

例
-

この例では、受信した Input レポートの `reportId` をコンソールに出力します。


```js
device.addEventListener("inputreport", (event) => {
  const { data, device, reportId } = event;
  console.log(reportId);
});
```

仕様書
---

| Specification |
| --- |
| WebHID API # dom-hidinputreportevent-reportid |

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

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

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
**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

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

`HIDInputReportEvent` インターフェイスの **`device`** プロパティは、この Input レポートを送信した HID インターフェイスを表す `HIDDevice` のインスタンスを返します。

値
-

`HIDDevice` です。

例
-

この例では、`device` がレポートを送信したデバイスを表す `HIDDevice` のインスタンスです。このデバイスの `productName` をコンソールに出力します。


```js
device.addEventListener("inputreport", (event) => {
  const { data, device, reportId } = event;
  console.log(device.productName);
});
```

仕様書
---

| Specification |
| --- |
| WebHID API # dom-hidinputreportevent-device |

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

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

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
**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

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

`HIDInputReportEvent` インターフェイスの **`data`** プロパティは、Input レポートから読み取ったデータが入った `DataView` を返します。HID インターフェイスがレポート ID を用いている場合、`reportId` は含まれません。

値
-

`DataView` です。

例
-

この例では、返された `data` をコンソールに出力します。


```js
device.addEventListener("inputreport", (event) => {
  const { data, device, reportId } = event;
  console.log(data);
});
```

仕様書
---

| Specification |
| --- |
| WebHID API # dom-hidinputreportevent-data |

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

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

**`readable`** は `TransformStream` インターフェイスの読み取り専用プロパティで、この `TransformStream` が制御する `ReadableStream` インスタンスを返します。

値
-

`ReadableStream` です。

例
-

次の例は、新しい `TransformStream` を `textEncoderStream` として作成し、 `readable` の値をコンソールに出力します。


```js
const textEncoderStream = new TransformStream();
console.log(textEncoderStream.readable); // a ReadableStream
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-ts-readable② |

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

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

**`writable`** は `TransformStream` インターフェイスの読み取り専用プロパティで、この `TransformStream` が制御する `WritableStream` インスタンスを返します。

値
-

`WritableStream` です。

例
-

次の例は、新しい `TransformStream` を `textEncoderStream` として作成し、 `writable` の値をコンソールに出力します。


```js
const textEncoderStream = new TransformStream();
console.log(textEncoderStream.writable); // a WritableStream
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-ts-writable② |

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

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

**`TransformStream()`** コンストラクターは、新しい `TransformStream` オブジェクトを作成します。このオブジェクトは、書き込み可能な端点を表す `WritableStream` と、読み取り可能な端点を表す `ReadableStream` の 2 つのストリームを表します。

構文
--


```js
new TransformStream()
new TransformStream(transformer)
new TransformStream(transformer, writableStrategy)
new TransformStream(transformer, writableStrategy, readableStrategy)
```

### 引数

`transformer` 省略可

`transformer` を表すオブジェクト。指定されなかった場合、ストリームは**同一変換ストリーム**となり、書き込み可能な端点に書き込まれたすべてのチャンクをそのまま読み取り可能な端点に転送します。

変換オブジェクトは以下のメソッドを持つことができます。各メソッドの、 `controller` は `TransformStreamDefaultController` のインスタンスです。

`start(controller)`

`TransformStream` が構築される際に呼び出されます。通常は `TransformStreamDefaultController.enqueue()` を使用してチャンクをキューに入れます。

`transform(chunk, controller)`

書き込み可能な端点に書き込まれたチャンクが変換される準備ができたときに呼び出され、変換ストリームの作業をします。書き込み処理の成功や失敗を指示するプロミスを返すことがあります。もし `transform()` メソッドが与えられなかった場合、ID 変換が使用され、チャンクは変更されずにキューに入れられます。

`flush(controller)`

書き込み可能な端点に書き込まれたチャンクがすべて正常に変換され、書き込み可能な端点が閉じられた後に呼び出されます。


`writableStrategy` 省略可

オプションでストリームのキューイング戦略を定義するオブジェクト。これは 2 つの引数を取ります。

`highWaterMark`

非負の整数。これは、背圧が適用される前に内部キューに格納することができるチャンクの総数を定義します。

`size(chunk)`

引数 `chunk` を取るメソッド。これは各チャンクに使用するサイズをバイト単位で示します。


`readableStrategy` 省略可

オプションでストリームのキューイング戦略を定義するオブジェクト。 2 つの引数を取ります。

`highWaterMark`

非負の整数。これは、背圧が適用される前に内部キューに格納することができるチャンクの総数を定義します。

`size(chunk)`

引数 `chunk` を取るメソッド。これは各チャンクに使用するサイズをバイト単位で示します。


**メモ:** 自分自身で独自の `readableStrategy` や `writableStrategy` を定義したり、オブジェクト値に対して `ByteLengthQueuingStrategy` や `CountQueuingStrategy` のインスタンスを使用したりすることができます。

例
-

### テキストを大文字に変換

次の例は、チャンクごとにテキストを大文字に変換します。この例は Streams—The Definitive Guide から引用したもので、異なる種類のストリームの例が数多く含まれています。


```js
function upperCaseStream() {
  return new TransformStream({
    transform(chunk, controller) {
      controller.enqueue(chunk.toUpperCase());
    },
  });
}

function appendToDOMStream(el) {
  return new WritableStream({
    write(chunk) {
      el.append(chunk);
    },
  });
}

fetch("./lorem-ipsum.txt").then((response) =>
  response.body
    .pipeThrough(new TextDecoderStream())
    .pipeThrough(upperCaseStream())
    .pipeTo(appendToDOMStream(document.body)),
);
```

### 同一変換ストリームの作成

引数 `transformer` を与えない場合は、書き込み可能な端点に書き込まれたチャンクを変更せずに読み取り可能な辺にすべて転送する同一変換ストリームになります。次の例では、パイプにバッファー機能を追加するために同一変換ストリームを使用しています。


```js
const writableStrategy = new ByteLengthQueuingStrategy({
  highWaterMark: 1024 \* 1024,
});
readableStream
  .pipeThrough(new TransformStream(undefined, writableStrategy))
  .pipeTo(writableStream);
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ref-for-ts-constructor④ |

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

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

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

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

`CookieStoreManager` インターフェイスの **`getSubscriptions()`** メソッドは、この `ServiceWorkerRegistration` のすべての Cookie 変更購読のリストを返します。

構文
--


```js
getSubscriptions()
```

### 引数

なし

### 返値

オブジェクトのリストで解決する `promise` です。それぞれのオブジェクトは以下を持ちます。

`name`

Cookie の名前を表す文字列です。

`url`

Cookie を購読するのに用いるスコープの URL を表す文字列です。

例
-

`registration` で表される `ServiceWorkerRegistration` が既に何か Cookie 変更イベントを購読している場合は、`subscriptions` はそれらの Cookie の名前と URL が格納されたオブジェクトのリストで解決します。


```js
const subscriptions = await registration.cookies.getSubscriptions();
```

仕様書
---

| Specification |
| --- |
| Cookie Store API # dom-cookiestoremanager-getsubscriptions |

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

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

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

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

`CookieStoreManager` インターフェイスの **`unsubscribe()`** メソッドは、`ServiceWorkerRegistration` が以前購読していたイベントを受け取るのを止めます。

構文
--


```js
unsubscribe(subscriptions)
```

### 引数

`subscriptions`

以下が格納されたオブジェクトです。

`name`

Cookie の名前を表す文字列です。

`url`

この Cookie の購読に使用していたスコープの URL を表す文字列です。


### 返値

サービスワーカーの購読の解除が完了したら `undefined` で解決する `Promise` を返します。

### 例外

`TypeError`

`subscriptions` に渡された URL がサービスワーカーの登録の `scope` とマッチしないとき投げられます。

例
-

この例では、`registration` で表される `ServiceWorkerRegistration` が、名前が `"cookie1"` でスコープが `"/path1"` である Cookie の変更イベントの購読を解除します。


```js
const subscriptions = [{ name: "cookie1", url: `/path1` }];
await registration.cookies.unsubscribe(subscriptions);
```

仕様書
---

| Specification |
| --- |
| Cookie Store API # dom-cookiestoremanager-unsubscribe |

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

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

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

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

`CookieStoreManager` インターフェイスの **`subscribe()`** メソッドは、`ServiceWorkerRegistration` に Cookie 変更イベントを購読させます。

構文
--


```js
subscribe(subscriptions)
```

### 引数

`subscriptions`

以下が格納されたオブジェクトです。

`name`

Cookie の名前を表す文字列です。

`url`

Cookie のスコープの URL を表す文字列です。サービスワーカーの登録のスコープより狭くすることができます。


### 返値

購読が完了したら `undefined` で解決する `Promise` です。

### 例外

`TypeError`

`subscriptions` に渡された URL がサービスワーカーの登録の `scope` とマッチしないとき投げられます。

例
-

この例では、`registration` で表される `ServiceWorkerRegistration` が、名前が `"cookie1"` でスコープが `"/path1"` である Cookie の変更イベントを購読します。


```js
const subscriptions = [{ name: "cookie1", url: `/path1` }];
await registration.cookies.subscribe(subscriptions);
```


`subscribe()` メソッドに渡す URL は、サービスワーカーの登録のスコープより狭くすることができます。以下の例では、`/path/one/` を購読しているので、最初の Cookie の変更では変更イベントを受け取りますが、2 番目では受け取りません。


```js
registration.cookies.subscribe([{ name: "cookie1", url: "/path/one/" }]); // 購読
cookieStore.set({ name: "cookie1", value: "cookie-value", path: "/path/one/" }); // 変更イベントを受け取る
cookieStore.set({ name: "cookie1", value: "cookie-value", path: "/path/two/" }); // 変更イベントを受け取らない
```

仕様書
---

| Specification |
| --- |
| Cookie Store API # dom-cookiestoremanager-subscribe |

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

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

**`VideoTrack`** の **`selected`** プロパティは、特定の映像トラックがアクティブかどうかを制御します。

### 値

`selected` プロパティは、トラックがアクティブな場合に値が `true` になる論理値です。 同時にアクティブにできる映像トラックは 1 つだけなので、別のトラックがアクティブなときに、あるトラックでこのプロパティを `true` に設定すると、アクティブであったトラックは非アクティブになります。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-videotrack-selected-dev |

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

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

**`VideoTrack`** の **`language`** プロパティは読み取り専用で、映像トラックで使用されている言語を識別する文字列を返します。

複数の言語を含むトラック（他の言語で数行が話されている英語の映画など）の場合は、これが動画の主要言語になります。

### 値

映像トラックで使用される主要言語の BCP 47 (RFC 5646) 形式の言語タグを指定する文字列です。 言語が指定されていないか知られていない場合や、トラックに音声が含まれていない場合は空文字列 (`""`) です。

例えば、トラックで使用されている主要言語がアメリカ英語の場合、この値は `"en-US"` になります。 ブラジルポルトガル語の場合、値は `"pt-BR"` になります。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-videotrack-language-dev |

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

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

**`VideoTrack`** の **`sourceBuffer`** プロパティは読み取り専用で、トラックを作成した `SourceBuffer` を返します。 トラックが `SourceBuffer` によって作成されなかった場合、または `SourceBuffer` がその親メディアソースの `MediaSource.sourceBuffers` 属性から取り除かれた場合は null を返します。

### 値

`SourceBuffer` または null です。

仕様書
---

| Specification |
| --- |
| Media Source Extensions™ # dom-videotrack-sourcebuffer |

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

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

**`VideoTrack`** の **`label`** プロパティは読み取り専用で、映像トラックの判読可能なラベルがある場合はそれを指定する文字列を返します。 それ以外の場合は、空の文字列を返します。

### 値

トラックのメタデータで利用可能な場合は、トラックの判読可能なラベルを指定する文字列です。 それ以外の場合は、空の文字列（`""`）が返されます。

例えば、`kind` が `"sign"` のトラックには、`"手話通訳"` などの `label` が付いている場合があります。

例
-

この例では、指定されたメディア要素の映像トラックを選択するためにユーザーインターフェイスで使用される可能性のあるトラックの kind とラベルの配列を返します。 リストは、特定の kind のトラックのみを通過させるようにフィルタ処理されています。


```js
function getTrackList(el) {
  const trackList = [];
  const wantedKinds = ["main", "alternative", "commentary"];

  el.videoTracks.forEach((track) => {
    if (wantedKinds.includes(track.kind)) {
      trackList.push({
        id: track.id,
        kind: track.kind,
        label: track.label,
      });
    }
  });
  return trackList;
}
```


結果の `trackList` には、その `kind` が配列 `wantedKinds` の中の 1 つである映像トラックの配列を含み、各エントリはトラックの `id`、`kind`、および `label` を提供します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-videotrack-label-dev |

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

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

**`kind`** プロパティは、**`VideoTrack`** に含まれる動画のカテゴリーを示す文字列を保持します。

この `kind` を使用して、特定のトラックを有効または無効にするシナリオを決定できます。 映像トラックで利用可能な kind の一覧については、映像トラックの kind 文字列を参照してください。

### 値

メディアが表すコンテンツの種類を指定する文字列です。 この文字列は、以下の映像トラックの kind 文字列にあるもののうちの 1 つです。

映像トラックの kind 文字列
----------------

映像トラックで利用可能な kind は次のとおりです。

`"alternative"`

メイントラックに代わる可能性のあるもの。 例えば、異なる動画テイクや、音楽だけで会話がないサウンドトラックのバージョンなど。

`"captions"`

キャプション付きのメイン映像トラックのバージョン。

`"main"`

プライマリ映像トラック。

`"sign"`

音声トラックの手話による通訳。

`"subtitles"`

字幕付きのメイン映像トラックのバージョン。

`"commentary"`

解説を含む映像トラック。 これは、例えば映画で監督の解説トラックを含めるために使用される場合があります。

`""`（空の文字列）

トラックに明確な kind がない、またはトラックのメタデータによって提供された kind がユーザーエージェントに認識されていません。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-videotrack-kind-dev |

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

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

**`id`** プロパティは、**`VideoTrack`** によって表されるトラックを一意に識別する文字列を保持します。

この ID を `VideoTrackList.getTrackById()` メソッドと共に使用して、メディア要素に関連付けられたメディア内の特定のトラックを見つけることができます。

トラック ID は、特定のトラックをロードする URL のフラグメントとしても使用できます（メディアがメディアフラグメントに対応している場合）。

値
-

トラックを識別する文字列です。メディア要素の `videoTracks` プロパティで指定されたものなどの `VideoTrackList` で `getTrackById()` を呼び出すときに使用するのに適しています。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-videotrack-id-dev |

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

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

**`CSSKeyframeRule.style`** プロパティは `CSSStyleDeclaration` インターフェイスであり、 `CSSKeyframeRule` の宣言ブロックです。

値
-

`CSSStyleDeclaration` オブジェクトで、次のプロパティがあります。

readonly flag

未設定。

declarations

このルール内で宣言された宣言で、指定された順番であり、個別指定プロパティに展開された一括指定プロパティです。

parent CSS rule

コンテキストオブジェクトで、 this の別名です。

owner node

null です。

例
-

 この CSS には keyframes アットルールが記載されています。これは最初の `CSSRule` であり、 `document.styleSheets[0].cssRules` で返されます。
 `myRules[0]` は `CSSKeyframesRule` オブジェクトを返し、その中に各キーフレームに対応する個々の `CSSKeyFrame` オブジェクトが格納されます。


```css
@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
```



```js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
console.log(keyframes[0].style); // a CSSStyleDeclaration
```

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # dom-csskeyframerule-style |

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

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

**`volume`** は `SpeechSynthesisUtterance` インターフェイスのプロパティで、発話の音量を取得および設定します。

未設定の場合、既定値の 1 が使用されます。

値
-

0 （最低）から 1 （最高）の間の浮動小数点数で、音量を表します。

SSML を使用している場合、この値はマークアップの韻律タグによって上書きされます。

例
-


```js
const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector("input");
const voiceSelect = document.querySelector("select");

const voices = synth.getVoices();

// ...

inputForm.onsubmit = (event) => {
  event.preventDefault();

  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  const selectedOption =
    voiceSelect.selectedOptions[0].getAttribute("data-name");
  for (let i = 0; i < voices.length; i++) {
    if (voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }
  utterThis.volume = 0.5;
  synth.speak(utterThis);
  inputTxt.blur();
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechsynthesisutterance-volume |

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

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

関連情報
----

* ウェブ音声 API
SpeechSynthesisUtterance: lang プロパティ
====================================

**`lang`** は `SpeechSynthesisUtterance` インターフェイスのプロパティで、発話の言語を取得および設定します。

設定されていない場合、アプリ（すなわち `<html>` の `lang` 値）の言語が使用されるか、こちらも未設定であればユーザーエージェントの既定の言語が使用されます。

値
-

BCP 47 言語タグを表す文字列です。

例
-


```js
const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector("input");
const voiceSelect = document.querySelector("select");

const voices = synth.getVoices();

// ...

inputForm.onsubmit = (event) => {
  event.preventDefault();

  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  const selectedOption =
    voiceSelect.selectedOptions[0].getAttribute("data-name");
  for (let i = 0; i < voices.length; i++) {
    if (voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }
  utterThis.lang = "en-US";
  synth.speak(utterThis);
  inputTxt.blur();
};
```

仕様書
---

| Specification |
| --- |
| Web Speech API # dom-speechsynthesisutterance-lang |

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

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

関連情報
----

* ウェブ音声 API