recursal/MDN huggingface dataset:
CSSStyleDeclaration.getPropertyCSSValue()
=========================================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**CSSStyleDeclaration.getPropertyCSSValue()** メソッドインターフェイスは、プロパティの CSS 値を含む `CSSValue` を返します。プロパティ名が一括指定プロパティの場合は `null` を返すことに注意して下さい。

**メモ:** このインターフェイスは、型付けされた CSS オブジェクトモデルを作成する試みの一部でした。この試みは放棄されており、ほとんどのブラウザーは実装していません。

この目的を達成するには、以下のものを使用することができます。

* `CSSStyleDeclaration.getPropertyValue()` が型付けなしの CSS オブジェクトモデルにあり、広く対応されています。
* `Element.computedStyleMap()` が最近の CSS 型付きオブジェクトモデル API にありますが、対応が少なく実験的なものと考えられています。

構文
--


```js
getPropertyCSSValue(property)
```

### 引数

`property`

文字列で、取得するプロパティ名を表します。

### 返値

プロパティの CSS 値を含む `CSSValue` です。存在しない場合は `null` を返します。

例
-

次の JavaScript コードは、 CSS の `color` プロパティの計算済みの RGB 値を含むオブジェクトを取得します。


```js
const style = window.getComputedStyle(elem, null);
const rgbObj = style.getPropertyCSSValue("color").getRGBColorValue();
```

仕様書
---

この機能はもともと、 DOM Style Level 2 仕様書で定義されていましたが、それ以降の標準化の取り組みからは外れています。

この機能は、最新の、しかし互換性のない、 CSS 型付きオブジェクトモデル API に取って代わられ、現在は標準化されています。

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSStyleDeclaration.getPropertyPriority()
=========================================

**CSSStyleDeclaration.getPropertyPriority()** メソッドインターフェイスは、その CSS プロパティに明示的に設定されたすべての優先度を文字列で返します。

構文
--


```js
getPropertyPriority(property)
```

### 引数

`property`

文字列で、チェックするプロパティ名を表します。

### 返値

 存在する場合は優先度（`"important"` など）を表します。
 存在しない場合は、空文字列を返します。

例
-

以下の JavaScript コードは、 `margin` が CSS セレクターのルールで important と記されているかどうかをチェックします。


```js
const declaration = document.styleSheets[0].cssRules[0].style;
const isImportant = declaration.getPropertyPriority("margin") === "important";
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-getpropertypriority |

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

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

**CSSStyleDeclaration.parentRule** は読み取り専用のプロパティで、このスタイルブロックの親である `CSSRule` を返します。例えば、 CSS セレクターのスタイルを表す `CSSStyleRule` です。

値
-

この宣言ブロックを含む CSS ルール、またはこの `CSSStyleDeclaration` が `CSSRule` に割り当てられていない場合は `null` を返します。

例
-

次の JavaScript コードは、 `CSSStyleDeclaration` から親の CSS スタイルルールを取得します。


```js
const declaration = document.styleSheets[0].rules[0].style;
const rule = declaration.parentRule;
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-parentrule |

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

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

**`cssText`** は `CSSStyleDeclaration` インターフェイスのプロパティで、その要素の**インライン**スタイル宣言のみのテキストを返したり設定したりします。

**スタイルシート**のルールを動的に設定するためには、動的なスタイル情報の利用を参照してください。

スタイルシートのスタイルルールである `CSSRule.cssText` と混同しないようにしてください。

値
-

文字列で、この要素のインラインスタイル宣言のテキストが入ります。

例
-


```html
<span id="s1" style="color: red;"> Some text </span>

<script>
 const elem = document.getElementById("s1");
 alert(elem.style.cssText); // "color: red;"
</script>
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-csstext |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSStyleDeclaration.removeProperty()
====================================

**`CSSStyleDeclaration.removeProperty()`** メソッドインターフェイスは、 CSS スタイル宣言オブジェクトからプロパティを削除します。

構文
--


```js
removeProperty(property)
```

### 引数

* `property`
    + 文字列で、削除するプロパティ名を表します。なお、複数語からなるプロパティ名はハイフン区切りであって、キャメルケースではありません。
### 返値

文字列で、削除される前の CSS プロパティの値と等しいものです。

### 例外

`NoModificationAllowedError` `DOMException`

プロパティまたは宣言ブロックが読み取り専用の場合に発生します。

例
-

次の JavaScript コードは、 CSS の `background-color` プロパティをセレクタールールから削除します。


```js
const declaration = document.styleSheets[0].rules[0].style;
const oldValue = declaration.removeProperty("background-color");
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-removeproperty |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSStyleDeclaration.getPropertyValue()
======================================

**CSSStyleDeclaration.getPropertyValue()** メソッドインターフェイスは、指定された CSS プロパティの値を含む文字列を返します。

構文
--


```js
getPropertyValue(property)
```

### 引数

`property`

文字列で、チェックするプロパティ名（ハイフン区切り）を表します。

### 返値

プロパティの値が入った文字列です。設定されていなかった場合、空文字列を返します。

例
-

次の JavaScript コードは、 CSS セレクタールールの `margin` プロパティの値を問い合わせます。


```js
const declaration = document.styleSheets[0].cssRules[0].style;
const value = declaration.getPropertyValue("margin"); // "1px 2px"
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-getpropertyvalue |

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

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

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

**`ExtendableCookieChangeEvent()`** コンストラクターは、`ServiceWorkerRegistration.oncookiechange()` に渡されるイベント型である新しい `ExtendableCookieChangeEvent` オブジェクトを生成します。このコンストラクターは、変更イベントが発生するとブラウザーによって呼ばれます。

**メモ:** このコンストラクターは、通常は製品のウェブサイトでは必要ありません。主な使用法は、このイベントのインスタンスが必要なテストです。

構文
--


```js
new ExtendableCookieChangeEvent(type)
new ExtendableCookieChangeEvent(type, options)
```

### 引数

`type`

イベントの名前を表す文字列です。大文字と小文字は区別され、ブラウザーは常に `cookiechange` に設定します。

`options` 省略可

*`ExtendableEvent()` で定義されたプロパティに加え*、以下のプロパティを持ちうるオブジェクトです。

`changed`

変更された Cookie が格納された配列です。

`deleted`

削除された Cookie が格納された配列です。


### 返値

新しい `ExtendableCookieChangeEvent` オブジェクトです。

仕様書
---

| Specification |
| --- |
| Cookie Store API # dom-extendablecookiechangeevent-extendablecookiechangeevent |

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

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

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

`ExtendableCookieChangeEvent` インターフェイスの読み取り専用プロパティ **`changed`** は、与えられた `ExtendableCookieChangeEvent` のインスタンスで変更されたすべての Cookie を返します。

値
-

オブジェクトの配列で、変更された Cookie が格納されています。それぞれのオブジェクトは以下のプロパティを持ちます。

`name`

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

`value`

Cookie の値を表す文字列です。

`domain`

Cookie のドメインを表す文字列です。

`path`

Cookie のパスを表す文字列です。

`expires`

ミリ秒単位の UNIX 時間で与えられるタイムスタンプで、Cookie の有効期限を表します。

`secure`

Cookie がセキュアコンテキスト (HTTP ではなく HTTPS) のサイト由来かを表す `boolean` です。

`sameSite`

以下の `SameSite` の値のいずれかです。

`"strict"`

Cookie はファーストパーティコンテキストでのみ送信され、サードパーティのウェブサイトから発信されたリクエストでは送信されません。

`"lax"`

Cookie は通常のクロスサイトサブリクエスト (たとえば、サードパーティサイトへの画像やフレームの読み込み) では送信されませんが、ユーザーが発信元のサイト内へ移動するとき (すなわち、リンクをたどるとき) は送信されます。

`"none"`

Cookie はすべてのコンテキストで送信されます。


例
-

この例では、Cookie が設定されると、イベントリスナーがコンソールに `changed` プロパティを記録します。この配列の最初の要素には、今設定されたばかりの Cookie を表すオブジェクトが格納されています。


```js
self.addEventListener("cookiechange", (event) => {
  console.log(event.changed[0]);
});

const one_day = 24 \* 60 \* 60 \* 1000;
cookieStore.set({
  name: "cookie1",
  value: "cookie1-value",
  expires: Date.now() + one_day,
  domain: "example.com",
});
```

仕様書
---

| Specification |
| --- |
| Cookie Store API # dom-extendablecookiechangeevent-changed |

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

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

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

`ExtendableCookieChangeEvent` インターフェイスの読み取り専用プロパティ **`deleted`** は、与えられた `ExtendableCookieChangeEvent` のインスタンスで削除されたすべての Cookie を返します。

値
-

オブジェクトの配列で、削除された Cookie が格納されています。それぞれのオブジェクトは以下のプロパティを持ちます。

`name`

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

`value`

Cookie の値を表す文字列です。

`domain`

Cookie のドメインを表す文字列です。

`path`

Cookie のパスを表す文字列です。

`expires`

ミリ秒単位の UNIX 時間で与えられるタイムスタンプで、Cookie の有効期限を表します。

`secure`

Cookie がセキュアコンテキスト (HTTP ではなく HTTPS) のサイト由来かを表す `boolean` です。

`sameSite`

以下の `SameSite` の値のいずれかです。

`"strict"`

Cookie はファーストパーティコンテキストでのみ送信され、サードパーティのウェブサイトから発信されたリクエストでは送信されません。

`"lax"`

Cookie は通常のクロスサイトサブリクエスト (たとえば、サードパーティサイトへの画像やフレームの読み込み) では送信されませんが、ユーザーが発信元のサイト内へ移動するとき (すなわち、リンクをたどるとき) は送信されます。

`"none"`

Cookie はすべてのコンテキストで送信されます。


例
-

この例では、Cookie が削除されると、イベントリスナーがコンソールに `deleted` プロパティの最初の要素を記録します。これには、削除されたばかりの Cookie を表すオブジェクトが格納されています。


```js
self.addEventListener("cookiechange", (event) => {
  console.log(event.deleted[0]);
});
```

仕様書
---

| Specification |
| --- |
| Cookie Store API # dom-extendablecookiechangeevent-deleted |

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

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

**`ProgressEvent.lengthComputable`** は読み取り専用のプロパティであり、論理値のフラグで、 `ProgressEvent` が関係するリソースに計算可能な長さがあるかどうかを示します。そうでない場合、`ProgressEvent`プロパティは重要な値を持ちません。

値
-

論理値です。

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-progressevent-lengthcomputable |

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

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

関連情報
----

* 所属先の `ProgressEvent` インターフェイス
ProgressEvent: ProgressEvent() コンストラクター
=======================================

**`ProgressEvent()`** コンストラクターは、長いプロセスの現在の完了状況を表す `ProgressEvent` を新しく生成して返します。

構文
--


```js
new ProgressEvent(type)
new ProgressEvent(type, options)
```

### 引数

`type`

 このイベントの名前の文字列です。
 大文字小文字を区別し、ブラウザーは `loadstart`, `progress`, `abort`, `error`, `load`, `timeout`, `loadend` の何れかを設定します。


`options` 省略可

オブジェクトで、*`Event()` で定義されているプロパティに加え*、以下のプロパティを持つことができます。

`lengthComputable` 省略可

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

`loaded` 省略可

数値で、基礎となるプロセスで既に実行された作業量を表します。行われた作業の割合は、このプロパティと `ProgressEvent.total` を用いて計算することができます。 HTTP を使用してリソースをダウンロードする場合、これはヘッダーやその他のオーバーヘッドではなく、コンテンツそのものの部分のみを表します。既定値は `0` です。

`total` 省略可

基礎となるプロセスが実行中の作業の総量を表す数値です。 HTTP を使用してリソースをダウンロードする場合、これはヘッダーやその他のオーバーヘッドではなく、コンテンツそのものを表します。既定値は `0` です。


### 返値

新しい `ProgressEvent` オブジェクトです。

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-progressevent-progressevent |

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

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

関連情報
----

* 所属先の `ProgressEvent` インターフェイス
ProgressEvent: total プロパティ
==========================

**`ProgressEvent.total`** は読み取り専用のプロパティであり、 64 ビット符号なし整数値で、処理または転送されるデータの全体の大きさを示します。 HTTP 通信の場合は、これはメッセージの本文の大きさ (`Content-Length`) であり、ヘッダーやその他のオーバーヘッドは含みません。

このイベントの `lengthComputable` プロパティが `false` であった場合、この値は意味がなく、無視されます。

値
-

整数です。

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-progressevent-total |

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

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

関連情報
----

* 所属先の `ProgressEvent` インターフェイス
ProgressEvent: loaded プロパティ
===========================

**`ProgressEvent.loaded`** は読み取り専用プロパティであり、整数で基礎となるプロセスの既に行われた仕事の量を表します。進捗率は、このプロパティと `ProgressEvent.total` から計算することができます。
 HTTP を使用してリソースをダウンロードする場合、この値はバイト単位を示し（ビット単位ではありません）、ヘッダーやその他のオーバーヘッドを除いた内容物自体のみを表します。

値
-

数値です。

仕様書
---

| Specification |
| --- |
| XMLHttpRequest Standard # dom-progressevent-loaded |

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

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

関連情報
----

* 所属先の `ProgressEvent` インターフェイス
ValidityState.rangeUnderflow
============================

Baseline 2023
-------------

Newly availableSince March 2023, 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
**`rangeUnderflow`** は **`ValidityState`** オブジェクトの読み取り専用プロパティで、 `<input>` の値がユーザーに変更された後、その要素の `min` 属性に設定された制約に適合しないことを示します。

フィールドが数値の性質を持つ場合、例えば date, month, week, time, datetime-local, number, range の何れかの型であり、 `min` が設定されており、値が `min` の値に設定された制約に適合しない場合、 `rangeUnderflow` プロパティが true になります。

次のようになっていたとします。


```html
<input type="number" min="20" max="40" step="2" />
```


`value < 20` であれば、 `rangeUnderflow` は true になります。 `true` の場合、その要素は CSS の `:invalid` および `:out-of-range` 擬似クラスに一致します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-validitystate-rangeunderflow |

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

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

関連情報
----

* `ValidityState.rangeOverflow`
* 制約検証
* フォーム: データフォームの検証
* `step` 属性
* `max` 属性
ValidityState.tooShort
======================

Baseline 2023
-------------

Newly availableSince March 2023, 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
**`tooShort`** は **`ValidityState`** オブジェクトの読み取り専用プロパティで、 `<input>`, `<button>`, `<select>`, `<output>`, `<fieldset>`, `<textarea>` の何れかの値がユーザーによって変更された後、要素の `minlength` 属性で指定されたコード単位長よりも短くなったことを示します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-validitystate-tooshort-dev |

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

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

関連情報
----

* ガイド: 制約検証
* チュートリアル: フォームデータの検証
ValidityState.patternMismatch
=============================

Baseline 2023
-------------

Newly availableSince March 2023, 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
**`patternMismatch`** は **`ValidityState`** オブジェクトの読み取り専用プロパティで、 `<input>` 要素の値がユーザーによって編集された後で、その要素の `pattern` 属性で設定された制約に適合するかどうかを示します。

`patternMismatch` プロパティは、以下の条件がすべて真である場合にのみ、true となります。

* そのフィールドが `pattern` 属性に対応している場合 — つまり、 `<input>` の `type` が text, tel, email, url, password, search のいずれかであった場合
* `pattern` 属性の値が有効な正規表現に設定されていた場合
* `<input>` 値が `pattern` の値で設定された制約に適合していない場合
例
-

以下のものがあったとします。


```html
<p>
  <label
 >電話番号を (123)456-7890 の形で入力してください (<input
 name="tel1"
 type="tel"
 pattern="[0-9]{3}"
 placeholder="###"
 aria-label="3 桁の市外局番"
 size="2" />)-
    <input
 name="tel2"
 type="tel"
 pattern="[0-9]{3}"
 placeholder="###"
 aria-label="3 桁の市内局番"
 size="2" />
    -
    <input
 name="tel3"
 type="tel"
 pattern="[0-9]{4}"
 placeholder="####"
 aria-label="4 桁の加入者番号"
 size="3" />
  </label>
</p>
```


ここでは、北米の電話番号のための 3 つの部分があり、電話番号の 3 つの構成要素すべてを包含する暗黙のラベルが、それぞれ 3 桁、3 桁、4 桁を期待しています。それぞれが `pattern` 属性によってそのように定義されています。

値が長すぎたり短すぎたり、数字ではない文字が含まれていたりすると、 `patternMismatch` が true になります。 `true` の場合、要素は CSS の `:invalid` 擬似クラスに一致します。


```css
input:invalid {
  border: red solid 3px;
}
```


この場合、値の長さを決定するのはパターンであるため、値が長すぎたり短すぎたりした場合に発生するのは `patternMismatch` であり、 `validityState.tooLong` や `validityState.tooShort` ではないことに注意してください。代わりに `minlength` と `maxlength` 属性を使用していたら、 `validityState.tooLong` または `validityState.tooShort` が true になるかもしれません。

**メモ:** pattern 属性がない場合、 `email` 入力型は、少なくとも `x@y` に一致する必要があり、 `url` 型は、少なくとも x: に一致する必要があります。無効な場合、pattern 属性がない場合（またはその入力型で pattern 属性が無効な場合）は `validityState.typeMismatch` が true になります。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-validitystate-patternmismatch |

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

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

関連情報
----

* 制約検証
* フォーム: データフォームの検証
* 正規表現
ValidityState.tooLong
=====================

Baseline 2023
-------------

Newly availableSince March 2023, 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
**`tooLong`** は **`ValidityState`** オブジェクトの読み取り専用のプロパティで、 `<input>` や `<textarea>` の値がユーザーに変更された後、その要素の `maxlength` 属性で設定された最大コード単位長を超えているかどうかを示します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-validitystate-toolong-dev |

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

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

関連情報
----

* 制約検証
* フォーム: データフォームの検証
ValidityState.badInput
======================

Baseline 2023
-------------

Newly availableSince March 2023, 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
**`badInput`** は ValidityState オブジェクトの読み取り専用のプロパティで、ブラウザーが変換できない入力をユーザーが行ったかどうかを示します。例えば、数値の入力欄に文字列がある場合です。

値
-

論理値です。

例
-


```html
<input type="number" id="age" />
```



```js
const input = document.getElementById("age");
if (input.validity.badInput) {
  console.log("Bad input detected…");
} else {
  console.log("Content of input OK.");
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-validitystate-badinput-dev |

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

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

関連情報
----

* ガイド: 制約検証
* チュートリアル: フォームデータの検証
ValidityState.typeMismatch
==========================

Baseline 2023
-------------

Newly availableSince March 2023, 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
**`typeMismatch`** は **`ValidityState`** オブジェクトの読み取り専用プロパティで、 `<input>` の値がユーザーによって変更された後、その要素の `type` 属性で設定された制約に適合していないことを示します。

`type` 属性が特定の文字列を期待している場合、例えば email や url 型で、型で設定された制約に適合しない値である場合は、 `typeMismatch` プロパティが true になります。

email 入力型は `multiple` 属性が存在するかどうかに応じて、1 つ以上の有効なメールアドレスを期待します。有効なメールアドレスには、メールの先頭部分と、トップレベルドメインの有無にかかわらず、ドメインが含まれます。email 入力の値が、空の文字列、単一の有効なメールアドレス、または、`multiple` 属性が存在する場合はカンマで区切られた 1 つ以上のメールアドレスでない場合は、`typeMismatch` となります。

url 入力型は、`multiple` 属性が存在するかどうかに応じて、 1 つ以上の有効な URL を想定しています。有効な URL には、プロトコル、任意で IP アドレス、または任意でサブドメイン、ドメイン、トップレベルドメインの組み合わせが含まれます。 URL 入力の値が空の文字列、単一の有効な URL、または `multiple` 属性が存在する場合はカンマで区切られた 1 つまたは複数の URL でない場合は、 `typeMismatch` となります。

| 入力型 | 値 | 期待される値 |
| --- | --- | --- |
| email | `x@y` や `x@y.z` | [TLD] の有無にかかわらず、メールアドレス |
| url | `x:` や `x://y.z` | プロトコルやプロトコル付きの完全 URL |

例
-

次のような例があったとします。


```html
<p>
  <label>
    Enter an email address:
    <input type="email" value="example.com" />
  </label>
</p>
<p>
  <label>
    Enter a URL:
    <input type="url" value="example.com" />
  </label>
</p>
```



```css
input:invalid {
  border: red solid 3px;
}
```


上記のものは、メールアドレスが単なるドメインであり、 URL にプロトコルがないため、`typeMismatch`が発生します。

`typeMismatch` は、 `type` 属性で期待される `value` の値と、実際に存在するデータとの間に不一致がある場合に発生します。 `typeMismatch` は数あるエラーのひとつで、 email と url の入力型にのみ関係します。他の入力型では、提供された値が型に基づく期待値と一致しない場合、異なるエラーが発生します。例えば、 number の入力値が浮動小数点数でない場合、 `badInput` が `true` になります。メールが `required` であるにもかかわらず空の場合は、 `valueMissing` が `true` になります。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-validitystate-typemismatch |

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

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

関連情報
----

* 制約検証
* フォーム: データフォームの検証
* 正規表現
ValidityState.stepMismatch
==========================

Baseline 2023
-------------

Newly availableSince March 2023, 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
**`stepMismatch`** は **`ValidityState`** オブジェクトの読み取り専用プロパティで、 `<input>` の値がユーザーに変更された後、その要素の `step` 属性に設定された制約に適合しないことを示します。

フィールドが数値の性質を持つ場合、例えば date, month, week, time, datetime-local, number, range の何れかの型であり、 step の値が `any` ではなく、値が `step` と `min` の値に設定された制約に適合しない場合に、 `stepMismatch` が true になります。フォームコントロールの値から `min` の値を引き、 `step` 値 (省略時は既定で 1) がゼロでない場合、一致しないと言えます。

次のようになっていたとします。


```html
<input type="number" min="20" max="40" step="2" />
```


`(value - min) % 2 != 0` であれば、 `stepMismatch` は true になります。

`true` の場合、その要素は CSS の `:invalid` および `:out-of-range` 擬似クラスに一致します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-validitystate-stepmismatch |

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

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

関連情報
----

* 制約検証
* フォーム: データフォームの検証
* `step` 属性
ValidityState.valueMissing
==========================

Baseline 2023
-------------

Newly availableSince March 2023, 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
**`valueMissing`** は **`ValidityState`** オブジェクトの読み取り専用プロパティで、必須 (`required`) のコントロール、例えば `<input>`, `<select>`, `<textarea>` の値が空であることを示します。

`required` 属性が設定されており、`<option>` が選択されていない場合、または `<textarea>` やユーザーが編集できる `<input>` が空の場合、 `valueMissing` 属性は `true` になります。このプロパティは、フィールドが必須かつ値がない場合にのみ `true` となります。フィールドが必須でない場合、またはフィールドが必須でも値がある場合には、値は `false` となります。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-validitystate-valuemissing-dev |

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

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

関連情報
----

* 制約検証
* フォーム: データフォームの検証
* 正規表現
ValidityState.rangeOverflow
===========================

Baseline 2023
-------------

Newly availableSince March 2023, 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
**`rangeOverflow`** は **`ValidityState`** オブジェクトの読み取り専用プロパティで、 `<input>` の値がユーザーに変更された後、その要素の `max` 属性に設定された制約に適合しないことを示します。

フィールドが数値の性質を持つ場合、例えば date, month, week, time, datetime-local, number, range の何れかの型であり、 `max` が設定されており、値が `max` の値に設定された制約に適合しない場合、 `rangeOverflow` プロパティが true になります。

次のようになっていたとします。


```html
<input type="number" min="20" max="40" step="2" />
```


`value > 40` であれば、 `rangeOverflow` は true になります。 `true` の場合、その要素は CSS の `:invalid` および `:out-of-range` 擬似クラスに一致します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-validitystate-rangeoverflow |

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

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

関連情報
----

* `ValidityState.rangeUnderflow`
* 制約検証
* フォーム: データフォームの検証
* `step` 属性
* `min` 属性
ShadowRoot.delegatesFocus
=========================

**`delegatesFocus`** は `ShadowRoot` インターフェイスの読み取り専用プロパティで、シャドウルートがフォーカスを委任する場合は `true`、そうでなければ `false` を返します。

`true` の場合、シャドウ DOM のフォーカスを受け取れない部分がクリックさると、フォーカスを受け取ることができる最初の部分がフォーカスを受け取り、シャドウホストが `:focus` のスタイルになります。

このプロパティの値は `Element.attachShadow()`) に渡されたオブジェクトの `delegatesFocus` プロパティを使用して設定します。

### 値


```js
let customElem = document.querySelector('my-shadow-dom-element');
let shadow = customElem.shadowRoot;

  ...

// Does it delegate focus?
let hostElem = shadow.delegatesFocus;
```

仕様書
---

| Specification |
| --- |
| DOM Standard # shadowroot-delegates-focus |

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

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

**`styleSheets`** は `ShadowRoot` インターフェイスの読み取り専用プロパティで、シャドウツリーに明示的にリンクされるか埋め込まれたスタイルシートを表す `CSSStyleSheet` オブジェクトの `StyleSheetList` を返します。

構文
--


```js
shadowRoot.styleSheets;
```

### 値

`CSSStyleSheet` オブジェクトの `StyleSheetList` です。

例
-


```js
let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;
let styleSheets = shadow.styleSheets;
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-documentorshadowroot-stylesheets |

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

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