recursal/MDN huggingface dataset:
ProgressEvent
=============

**`ProgressEvent`** インターフェイスは、プロセスの進捗、例えば HTTP リクエスト（`XMLHttpRequest`、または `<img>`, `<audio>`, `<video>`, `<style>`, `<link>` のような基本的なリソースの読み込み）などを計測するイベントを表します。

Event

ProgressEventコンストラクター
--------

`ProgressEvent()`

指定した引数で `ProgressEvent` イベントを作成します。

インスタンスプロパティ
-----------

*親である `Event` から継承したプロパティもあります。*

`ProgressEvent.lengthComputable` 読取専用 

論理値のフラグで、基礎となるプロセスで行われる作業の合計と、既に行われた作業の量が計算可能かどうかを示します。言い換えれば、進捗が測定可能かどうかを示します。

`ProgressEvent.loaded` 読取専用 

64 ビット符号なし整数値で、基礎となるプロセスで既に実行された作業の量を示す。行われた作業の比率は、 `total` でこのプロパティの値を割ることで計算できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

`ProgressEvent.total` 読取専用 

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表す。 HTTP でリソースをダウンロードする場合、これは `Content-Length` （メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。

インスタンスメソッド
----------

*親である `Event` からメソッドを継承しています。*

例
-

以下の例は `ProgressEvent` を新しい `XMLHTTPRequest` に追加し、リクエストの状態を表示するために使用します。


```js
const progressBar = document.getElementById("p"),
  client = new XMLHttpRequest();
client.open("GET", "magical-unicorns");
client.onprogress = (pe) => {
  if (pe.lengthComputable) {
    progressBar.max = pe.total;
    progressBar.value = pe.loaded;
  }
};
client.onloadend = (pe) => {
  progressBar.value = pe.loaded;
};
client.send();
```

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # interface-progressevent |

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

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

関連情報
----

* 基本インターフェイスの `Event`
StaticRange
===========

DOM の **`StaticRange`** インターフェイスは `AbstractRange` を拡張し、 DOM ツリー内で発生した変更を反映しない、 DOM 内のコンテンツの範囲を指定するメソッドを提供します。

このインターフェイスは `AbstractRange` と同じプロパティとメソッドの集合を提供します。

`AbstractRange` と `StaticRange` はウェブワーカーからは利用できません。

AbstractRange

StaticRangeコンストラクター
--------

`StaticRange()`

プロパティの既定値を指定したオブジェクトを指定して、新しい `StaticRange` オブジェクトを作成します。

インスタンスプロパティ
-----------

*以下のプロパティは親インターフェイスである `AbstractRange` から継承しています。*

`StaticRange.collapsed` 読取専用 

論理値で、範囲が折りたたまれている場合は `true` となります。折りたたまれた範囲とは、開始位置と末尾位置が同じで、 0 文字の長さの範囲です。

`endContainer` 読取専用 

`endOffset` プロパティで指定された範囲の末尾がある場所の `Node` オブジェクトです。

`StaticRange.endOffset` 読取専用 

ノードの内容の先頭から、この範囲オブジェクトで表す範囲の先頭までのオフセットを文字数で表した整数値です。この値は `endContainer` ノードの長さよりも小さくなければなりません。

`StaticRange.startContainer` 読取専用 

`startOffset` プロパティで指定された範囲の先頭がある場所の `Node` オブジェクトです。

`StaticRange.startOffset` 読取専用 

ノードの内容の先頭から、範囲オブジェクトが参照する内容の先頭の文字までのオフセットを文字数で表した整数値です。この値は `startContainer` で示すノードの長さよりも小さくなければなりません。

使用上のメモ
------

DOM 範囲は文書内のコンテンツの範囲を指定します。あるノード（または要素）の内部で始まり、別のノード（または要素）の内部で終わる可能性があります。 `Range` とは異なり、 `StaticRange` はその時点で固定された範囲を表します。文書が変更されても、変更されずに同じ範囲を維持しようとします。DOM に何らかの変更が加えられた場合、 `StaticRange` で指定した範囲に格納する実際のデータは変更される可能性があります。これにより、ユーザーエージェントは、ウェブアプリケーションやウェブサイトがライブ更新される範囲を必要としない場合、不必要な多くの作業を避けることができます。

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-staticrange |

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

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

関連情報
----

* ライブで更新される DOM 内のコンテンツ範囲: `Range`
* `AbstractRange`: すべての範囲が派生する抽象インターフェイス
AmbientLightSensor
==================

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

Sensor APIs の **`AmbientLightSensor`** インターフェイスは、現在の光レベル、すなわちホストデバイス周辺の環境光の照度を返します。

このセンサーを使用するには、ユーザーが Permissions API により `'ambient-light-sensor'` デバイスセンサーを使用する許可を与える必要があります。

この機能はサーバーで設定された Permissions Policy でブロックされる可能性があります。

EventTarget

Sensor

AmbientLightSensorコンストラクター
--------

`AmbientLightSensor()` 
Experimental

新しい `AmbientLightSensor` オブジェクトを生成します。

インスタンスプロパティ
-----------

`AmbientLightSensor.illuminance` 
Experimental

ホストデバイス周辺の環境光のルクス単位のレベルを、現在の光レベルとして返します。

インスタンスメソッド
----------

*`AmbientLightSensor` には独自のメソッドはありません。しかし、親インターフェイスの `Sensor` および `EventTarget` からメソッドを継承しています。*

イベント
----

*`AmbientLightSensor` には独自のイベントはありません。しかし、親インターフェイスの `Sensor` からイベントを継承しています。*

例
-


```js
if ("AmbientLightSensor" in window) {
  const sensor = new AmbientLightSensor();
  sensor.addEventListener("reading", (event) => {
    console.log("現在の光レベル:", sensor.illuminance);
  });
  sensor.addEventListener("error", (event) => {
    console.log(event.error.name, event.error.message);
  });
  sensor.start();
}
```

仕様書
---

| Specification |
| --- |
| Ambient Light Sensor # ambient-light-sensor-interface |

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

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

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

**`AuthenticatorResponse`** は Web Authentication API のインターフェイスで、キーペアを信頼する暗号化ルートを提供するインターフェイスの基本インターフェイスです。子インターフェイスでは、チャレンジのオリジンなどのブラウザーからの情報を含み、 `PublicKeyCredential.response` から返されることがあります。

AuthenticatorResponse に基づくインターフェイス
----------------------------------

以下のインターフェイスは AuthenticatorResponse インターフェイスに基づいています。

* `AuthenticatorAssertionResponse`
* `AuthenticatorAttestationResponse`
プロパティ
-----

`AuthenticatorResponse.clientDataJSON` (en-US)

JSON 文字列が入った `ArrayBuffer` で、 `CredentialsContainer.create()` または `CredentialsContainer.get()` (en-US) に渡されたクライアントデータを表します。

メソッド
----

なし。

例
-

### AuthenticatorAssertionResponse の取得


```js
var options = {
  challenge: new Uint8Array([
    /\* bytes sent from the server \*/
  ]),
};

navigator.credentials
  .get({ publicKey: options })
  .then(function (credentialInfoAssertion) {
    var assertionResponse = credentialInfoAssertion.response;
    // send assertion response back to the server
    // to proceed with the control of the credential
  })
  .catch(function (err) {
    console.error(err);
  });
```

### AuthenticatorAttestationResponse の取得


```js
var publicKey = {
  challenge: /\* from the server \*/,
  rp: {
    name: "Example CORP",
    id  : "login.example.com"
  },
  user: {
    id: new Uint8Array(16),
    name: "jdoe@example.com",
    displayName: "John Doe"
  },
  pubKeyCredParams: [
    {
      type: "public-key",
      alg: -7
    }
  ]
};

navigator.credentials.create({ publicKey })
  .then(function (newCredentialInfo) {
    var attestationResponse = newCredentialInfo.response;
  }).catch(function (err) {
     console.error(err);
  });
```

仕様書
---

| Specification |
| --- |
| Web Authentication: An API for accessing Public Key Credentials - Level 3 # authenticatorresponse |

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

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

関連情報
----

* `AuthenticatorAttestationResponse`
* `AuthenticatorAssertionResponse`
* `PublicKeyCredential.response`
BluetoothRemoteGATTCharacteristic
=================================

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

Web Bluetooth API の `BluetoothRemoteGattCharacteristic` インターフェイスは、GATT キャラクタリスティックを表します。これは、周辺機器のサービスに関する詳細情報を提供する基本的なデータ要素です。

EventTarget

BluetoothRemoteGATTCharacteristicインスタンスプロパティ
-----------

`BluetoothRemoteGATTCharacteristic.service` 読取専用  
Experimental

このキャラクタリスティックが属する `BluetoothRemoteGATTService` を返します。

`BluetoothRemoteGATTCharacteristic.uuid` 読取専用  
Experimental

このキャラクタリスティックの UUID を表す文字列を返します。たとえば、Heart Rate Measurement characteristic は `'00002a37-0000-1000-8000-00805f9b34fb'` です。

`BluetoothRemoteGATTCharacteristic.properties` 読取専用  
Experimental

このキャラクタリスティックのプロパティを返します。

`BluetoothRemoteGATTCharacteristic.value` 読取専用  
Experimental

現在キャッシュされているキャラクタリスティックの値です。この値は、キャラクタリスティックの値が読まれるか、ノーティフィケーションやインディケーションによって更新されると更新されます。

### イベント

`oncharacteristicvaluechanged` 
Experimental

`characteristicvaluechanged` イベント用のイベントハンドラーです。

インスタンスメソッド
----------

`BluetoothRemoteGATTCharacteristic.getDescriptor()` 
Experimental

指定のディスクリプター UUID に対応する最初の `BluetoothRemoteGATTDescriptor` で解決する `Promise` を返します。

`BluetoothRemoteGATTCharacteristic.getDescriptors()` 
Experimental

指定のディスクリプター UUID に対応するすべての `BluetoothRemoteGATTDescriptor` オブジェクトの `Array` で解決する `Promise` を返します。

`BluetoothRemoteGATTCharacteristic.readValue()` 
Experimental

利用可能で対応していれば、`value` プロパティの複製が格納された `DataView` で解決する `Promise` を返します。そうでない場合は、エラーを投げます。

`BluetoothRemoteGATTCharacteristic.writeValue(value)` 
非推奨

`value` プロパティを渡された `ArrayBuffer` に格納されたバイト列に設定し、`WriteCharacteristicValue`(*this*=`this`, *value=value*, *response*=`"optional"`) を呼び出し、結果の `Promise` を返します。

`BluetoothRemoteGATTCharacteristic.writeValueWithResponse(value)` 
Experimental

`value` プロパティを渡された `ArrayBuffer` に格納されたバイト列に設定し、`WriteCharacteristicValue`(*this*=`this`, *value=value*, *response*=`"required"`) を呼び出し、結果の `Promise` を返します。

`BluetoothRemoteGATTCharacteristic.writeValueWithoutResponse(value)` 
Experimental

`value` プロパティを渡された `ArrayBuffer` に格納されたバイト列に設定し、`WriteCharacteristicValue`(*this*=`this`, *value=value*, *response*=`"never"`) を呼び出し、結果の `Promise` を返します。

`BluetoothRemoteGATTCharacteristic.startNotifications()` 
Experimental

`navigator.bluetooth` が活動中のノーティフィケーションコンテキストに追加されたら解決する `Promise` を返します。

`BluetoothRemoteGATTCharacteristic.stopNotifications()` 
Experimental

`navigator.bluetooth` が活動中のノーティフィケーションコンテキストから削除されたら解決する `Promise` を返します。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # bluetoothgattcharacteristic-interface |

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

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

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

Paint Timing の **`PerformancePaintTiming`** インタフェースは、Web ページ構築中の "paint" ("render" とも呼ばれる) 操作に関するタイミング情報を提供します。「ペイント」とは、レンダリングツリーを画面上のピクセルに変換することです。

アプリケーションは、"`paint`" `パフォーマンスエントリタイプ` に対して `PerformanceObserver` を登録することができ、オブザーバーはペイントイベントが発生した時間を取得することができます。この情報を使用して、優れたユーザーエクスペリエンスを提供するのに時間がかかりすぎる領域を特定するのに役立ちます。

PerformanceEntry

PerformancePaintTimingプロパティ
-----

このインタフェースにはプロパティはありませんが、次のようにプロパティを修飾および制約することで、次の `PerformanceEntry` プロパティ ("`paint`"`パフォーマンスエントリタイプ` 用) を拡張します。

`PerformanceEntry.entryType`

"`paint`" を返します。

`PerformanceEntry.name`

`"first-paint"` または `"first-contentful-paint"` を返します。

`PerformanceEntry.startTime`

描画が行われたときに `タイムスタンプ` を返します。

`PerformanceEntry.duration`

0 を返します。

メソッド
----

このインターフェイスにはメソッドがありません。

例
-


```js
function showPaintTimings() {
  if (window.performance) {
    let performance = window.performance;
    let performanceEntries = performance.getEntriesByType("paint");
    performanceEntries.forEach((performanceEntry, i, entries) => {
      console.log(
        "The time to " +
          performanceEntry.name +
          " was " +
          performanceEntry.startTime +
          " milliseconds.",
      );
    });
  } else {
    console.log("Performance timing isn't supported.");
  }
}
```


上記のコードは、次のようなコンソール出力を生成します。
```

The time to first-paint was 2785.915 milliseconds.
The time to first-contentful-paint was 2787.460 milliseconds.
```

仕様書
---

| Specification |
| --- |
| Paint Timing # sec-PerformancePaintTiming |

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

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

**`TextTrackCue`** は抽象クラスで、 `VTTCue` などの派生キュー型の基礎として使用されます。代わりに、これらの派生型を使用して作業することになります。これらのキューは、 `TextTrack` の再生中にある時間だけ表示される文字列を表します。キューには、開始時刻（テキストが表示される時刻）と終了時刻（テキストが表示されなくなる時刻）、およびその他の情報を記載します。

EventTarget

TextTrackCueプロパティ
-----

*このインターフェイスは `EventTarget` からもプロパティを継承しています。*

`TextTrackCue.track` 読取専用 

このキューが属する `TextTrack`。 いずれにも属さない場合は `null`。

`TextTrackCue.id`

文字列で、キューを識別します。

`TextTrackCue.startTime`

`double` で、キューが表示を開始する動画時刻を、秒単位で指定します。

`TextTrackCue.endTime`

`double` で、キューの表示を停止する動画時刻を、秒単位で指定します。

`TextTrackCue.pauseOnExit`

このキューが表示されなくなったときに動画を一時停止するかどうかを示す論理型です。

### イベント

`enter`

キューがアクティブになったときに発行されます。

`exit`

キューがアクティブではなくなったときに発行されます。

仕様書
---

| Specification |
| --- |
| HTML Standard # texttrackcue |

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

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

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

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

`Web Serial API` の `Serial` インターフェイスは、ウェブページがシリアルポートを検出し、接続するためのプロパティやメソッドを提供します。

EventTarget

Serialインスタンスメソッド
----------

`Serial.requestPort()` 
Experimental

ユーザーが選んだデバイスを表す `SerialPort` のインスタンスで解決するか、デバイスが選択されなかった場合は拒否される `Promise` を返します。

このメソッドは、ユーザーによる有効化に伴って呼ぶ必要があります。

`Serial.getPorts()` 
Experimental

接続されており、かつオリジンにアクセス許可があるシリアルポートを表す `SerialPort` の配列で解決する `Promise` を返します。

イベント
----

`SerialPort` からのイベントバブリングにより、`Serial` では以下のイベントが利用可能です。

`SerialPort` `connect` イベント

デバイスにポートが接続された時に発火するイベントです。

`SerialPort` `disconnect` イベント

デバイスからポートが切断された時に発火するイベントです。

例
-

この例では、利用可能なポートを調べ、ユーザーが他のポートへのアクセスを許可できるようにする方法を示します。

`load` イベントの受信時に `connect` および `disconnect` イベントにリスナーを追加することで、デバイスが接続された時や切断された時にサイトが反応できるようにします。`getPorts()` メソッドを呼ぶことで、接続されたポートが既にサイトからのアクセスが許可されたものかどうかを調べることができます。

接続されたポートの中にサイトからアクセスできるものが無い場合、ユーザーが有効化するのを待つ必要があります。この例では、このためにボタンの `click` イベントハンドラーを用います。`requestPort()` に USB ベンダー ID を入れたフィルターを渡し、ユーザーに提示するデバイスのリストを特定の生産者によって作られた USB デバイスのみに絞り込んでいます。


```js
navigator.serial.addEventListener("connect", (e) => {
  // `e.target` に接続する、すなわち利用可能なポートのリストに加えます。
});

navigator.serial.addEventListener("disconnect", (e) => {
  // `e.target` を利用可能なポートのリストから外します。
});

navigator.serial.getPorts().then((ports) => {
  // ページの読み込み時、`ports` を用いて利用可能なポートのリストを初期化します。
});

button.addEventListener("click", () => {
  const usbVendorId = 0xabcd;
  navigator.serial
    .requestPort({ filters: [{ usbVendorId }] })
    .then((port) => {
      // `port` に接続する、すなわち利用可能なポートのリストに加えます。
    })
    .catch((e) => {
      // ユーザーがポートを選択しませんでした。
    });
});
```

仕様書
---

| Specification |
| --- |
| Web Serial API # serial-interface |

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

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

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

**`CSSVariableReferenceValue`** は CSS Typed Object Model API のインターフェイスで、組み込み CSS 値のカスタム名を作成することができます。このオブジェクトは機能的に「CSS 変数」と呼ばれることがあり、 `var()` 関数と同じ用途を提供します。カスタム名は 2 本のダッシュで始める必要があります。

コンストラクター
--------

`CSSVariableReferenceValue.CSSVariableReferenceValue()`

新しい `CSSVariableReferenceValue` オブジェクトを生成します。

プロパティ
-----

`CSSVariableReferenceValue.variable`

コンストラクターに渡されたカスタム名を返します。

`CSSVariableReferenceValue.fallback` 読取専用 

カスタム名の組み込み CSS 値を返します。

メソッド
----

なし。

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # cssvariablereferencevalue |

ブラウザーの対応
--------

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

**`CDATASection`** インターフェイスは CDATA セクションを表します。これにより、XML 内でエスケープされていないテキストの拡張部分を入れることができます。
 CDATA セクションの内部では、記号 `<` と `&` は通常のようにエスケープする必要がありません。

XML では、CDATA セクションは次のようになります。


```xml
<![CDATA[ … ]]>
```


実際の使用例を以下に示します。


```html
<foo>
  次の部分は CDATA セクションです: <![CDATA[ < > & ]]>
  ですべての種類のエスケープされていないテキストを記述できます。
</foo>
```


CDATA セクションに許可されていない唯一の文字の並びは、閉じる文字の並びである `]]>` です。

**メモ:** CDATA セクションは HTML 内で使用すべきではありません。コメントと見なされ表示されません。

EventTarget

Node

CharacterData

Text

CDATASectionインスタンスプロパティ
-----------

*このインターフェイスに固有のプロパティは存在せず、親である `Text` で実装しています。*

インスタンスメソッド
----------

*このインターフェイスに固有のメソッドは存在せず、親である `Text` で実装しています。*

仕様書
---

| Specification |
| --- |
| DOM Standard # interface-cdatasection |

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

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

関連情報
----

* `Document.createCDATASection()`
HTMLParagraphElement
====================

**`HTMLParagraphElement`** インターフェイスは、（通常の `HTMLElement` から継承によって利用できるものに加えて） `<p>` 要素を操作するためのプロパティやメソッドを提供します。

EventTarget

Node

Element

HTMLElement

HTMLParagraphElementインスタンスプロパティ
-----------

*親である `HTMLElement` から継承したプロパティもあります。*

`HTMLParagraphElement.align` 
非推奨

文字列で、列挙型の属性で周囲のコンテキストに対する要素の内容の配置を示します。指定可能な値は `"left"`, `"right"`, `"justify"`, `"center"` です。

インスタンスメソッド
----------

*独自のメソッドはありません。親である `HTMLElement` からメソッドを継承しています。*

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlparagraphelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<p>`
CSSImageValue
=============

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

**`CSSImageValue`** は CSS 型付きオブジェクトモデル API のインターフェイスで、 `background-image`, `list-style-image`, `border-image-source` のような画像を取るプロパティの値を表します。

CSSImageValue オブジェクトは `<image>` のうち URL に関わるもの、例えば `url()` や `image()` を表しますが、 `linear-gradient()` や `element()` は表しません。

CSSStyleValue

CSSImageValueプロパティ
-----

なし。

メソッド
----

*`CSSStyleValue` からメソッドを継承しています。*

例
-

次のような要素を作成します。


```html
<button>Magic Wand</button>
```


バイナリーファイルを要求する背景画像など、いくつかの CSS を追加しています。


```css
button {
  display: inline-block;
  min-height: 100px;
  min-width: 100px;
  background: no-repeat 5% center url(magicwand.png) aqua;
}
```


その要素のスタイルマップを取得します。そして、スタイルマップから background-image を取得し、文字列化します。


```js
// 要素を取得
const button = document.querySelector("button");

// computedStyleMap()ですべての計算済みスタイルを取得
const allComputedStyles = button.computedStyleMap();

// CSSImageValue を返す例
console.log(allComputedStyles.get("background-image"));
console.log(allComputedStyles.get("background-image").toString());
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # imagevalue-objects |

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

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

関連情報
----

* `CSSKeywordValue`
* `CSSNumericValue`
* `CSSPositionValue` (en-US)
* `CSSTransformValue`
* `CSSUnparsedValue`
DOMRectReadOnly
===============

**`DOMRectReadOnly`** インターフェイスは（`DOMRect` でも使用される）標準プロパティを設定し、すべてのプロパティが変更不可の矩形を定義します。

コンストラクター
--------

`DOMRectReadOnly()`

新しい `DOMRectReadOnly` オブジェクトを生成するために定義されています。

インスタンスプロパティ
-----------

`DOMRectReadOnly.x` 読取専用 

この `DOMRectReadOnly` の原点の X 座標を返します。

`DOMRectReadOnly.y` 読取専用 

この `DOMRectReadOnly` の原点の Y 座標を返します。

`DOMRectReadOnly.width` 読取専用 

この `DOMRectReadOnly` の幅を返します。

`DOMRectReadOnly.height` 読取専用 

この `DOMRectReadOnly` の高さを返します。

`DOMRectReadOnly.top` 読取専用 

この `DOMRectReadOnly` の上端の座標値を返します（ふつうは `y` と同じです）。

`DOMRectReadOnly.right` 読取専用 

この `DOMRectReadOnly` の右端の座標値を返します（ふつうは `x + width` と同じです）。

`DOMRectReadOnly.bottom` 読取専用 

この `DOMRectReadOnly` の下端の座標値を返します（ふつうは `y + height` と同じです）。

`DOMRectReadOnly.left` 読取専用 

この `DOMRectReadOnly` の左端の座標値を返します（ふつうは `x` と同じです）。

静的メソッド
------

`DOMRectReadOnly.fromRect()`

指定された位置と大きさで、新しい `DOMRectReadOnly` オブジェクトを生成します。

仕様書
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMRect |

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

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

関連情報
----

* `DOMPoint`
Selection API
=============

**メモ:** この API は Web Workers では *使用できません*。(`WorkerNavigator` 経由では公開されていません)

**Selection API** は、開発者がドキュメントのユーザーに選択されている部分にアクセスしたり操作したりできるようにします。

`Window.getSelection()` および `Document.getSelection()` メソッドは、ドキュメントのユーザーに選択されている部分を表す `Selection` オブジェクトを返します。`Selection` オブジェクトは、以下を行うメソッドを提供します。

* 現在選択されているノードにアクセスする。
* 現在の選択を変更する。選択を伸ばしたり、縮めたり、ドキュメントのまったく異なる部分を選択したりする。
* DOM から現在選択されている部分を削除する。

Selection API は、`Document` で発火する 2 種類のイベントも提供します。

* `selectstart` イベントは、ユーザーが新しく選択を開始したとき発火します。
* `selectionchange` イベントは、現在の選択範囲が変更されたとき発火します。
インターフェイス
--------

`Selection`

ドキュメントのユーザーによって選択されている部分、またはキャレットの現在の位置を表すインターフェイスです。

`Document.getSelection()`

現在の選択範囲、またはキャレットの現在の位置を表す `Selection` オブジェクトを返すメソッドです。

`Window.getSelection()`

現在の選択範囲、またはキャレットの現在の位置を表す `Selection` オブジェクトを返すメソッドです。

`Document.selectionchange`

現在の選択範囲が変更されたとき発火するイベントです。

`Node.selectstart`

ユーザーが新しく選択を開始したとき発火するイベントです。

仕様書
---

| Specification |
| --- |
| Selection API # selection-interface |
CSSLayerStatementRule
=====================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`CSSLayerStatementRule`** は `@layer` 文のルールを表します。 `CSSLayerBlockRule`とは異なり、他のコンテナーのルールを格納せず、単に 1 つまたは複数のレイヤーの名前を提供して定義します。

このルールで、 CSS ファイルの先頭に見かけ上あるレイヤーの順序を明示的に宣言することができます。レイヤーの順序は、各レイヤー名の最初の出現順序によって定義されます。文で宣言することで、読者はレイヤーの順序を理解することができます。また、 `CSSLayerBlockRule` 構文を使用する場合には不可能な、インラインレイヤーとインポートレイヤーの挿入も可能になります。

CSSRule

CSSLayerStatementRuleインスタンスプロパティ
-----------

*親インターフェイスである `CSSRule` から継承したプロパティもあります。*

* `CSSLayerStatementRule.nameList` 読取専用 
    + ルールによる各カスケードレイヤーの名前を表す文字列の配列です。
例
-

### HTML


```html
<p></p>
```

### CSS


```css
@layer layerName, layerName2;
```

### JavaScript


```js
const item = document.getElementsByTagName("p")[0];
const rules = document.styleSheets[1].cssRules;
// スタイルシート #1 はこの埋め込み例に関連するスタイルシートであり、
// スタイルシート #0 は MDN ページ全体に関連するスタイルシート。

const layer = rules[0]; // CSSLayerStatementRule

item.textContent = `この CSS の @layer 文は、 ${layer.nameList.join(
 ", ",
)} レイヤーを宣言しています。`;
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # csslayerstatementrule |

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

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

関連情報
----

* `@layer`
* 名前付きレイヤーのための @layer 文のアットルール
* `CSSLayerBlockRule`
HTMLModElement
==============

**`HTMLModElement`** インターフェイスは、（継承によって `HTMLElement` を通じて利用できる通常のメソッドやプロパティに加えて）改変 (modification) 要素、すなわち `<del>` と `<ins>` を操作するための特有のプロパティを提供します。

EventTarget

Node

Element

HTMLElement

HTMLModElementインスタンスプロパティ
-----------

*親である `HTMLElement` から継承したプロパティがあります。*

`HTMLModElement.cite`

文字列で、 HTML の `cite` 属性の値を反映します。変更点についての説明を含むリソースの URI が入ります。

`HTMLModElement.dateTime`

文字列で、 HTML の `datetime` 属性の値を反映します。変更されたタイムスタンプを示す日時文字列が入ります。

仕様書
---

| Specification |
| --- |
| HTML Standard # htmlmodelement |

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

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

関連情報
----

* このインターフェイスを実装している HTML 要素: `<ins>`, `<del>`
CSSMediaRule
============

**`CSSMediaRule`** は、単一の CSS の `@media` ルールを表すインターフェイスです。

CSSRule

CSSGroupingRule

CSSConditionRule

CSSMediaRuleプロパティ
-----

*祖先である `CSSConditionRule`、`CSSGroupingRule`、`CSSRule` から継承したプロパティもあります。*

`CSSMediaRule.media` 読取専用 

スタイル情報の出力先メディアを表す `MediaList` を返します。

メソッド
----

*固有のメソッドはありません。祖先である `CSSConditionRule`、`CSSGroupingRule`、`CSSRule` から継承したメソッドがあります。*

例
-

 この CSS には、単一のスタイルルールを持つメディアクエリーが含まれています。これは `document.styleSheets[0].cssRules` が返す最初の CSSRule になります。
 したがって、 `myRules[0]` は `CSSMediaRule` オブジェクトを返します。


```css
@media (min-width: 500px) {
  body {
    color: blue;
  }
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0]); // a CSSMediaRule representing the media query.
```

仕様書
---

| Specification |
| --- |
| CSS Conditional Rules Module Level 3 # the-cssmediarule-interface |

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

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