HTMLElement: inert プロパティ

Baseline 2023

Newly available

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

HTMLElement の inert プロパティは、この要素の inert 属性の値を反映します。論理値で、存在する場合は、フォーカスイベントや支援技術からのイベントを含む、要素に対するユーザーの入力イベントをブラウザーが「無視」するようにします。ブラウザーは、要素でのページ検索やテキスト選択も無視することができます。これは、モーダルのような UI を構築する際に、モーダルが表示されているときにフォーカスをモーダル内に「閉じ込める」場合に便利です。

メモ: 対話要素や重要なコンテンツを inert 属性を持つ要素内に入れ子にしてはいけません。不活性コンテンツとその子孫は、すべてのユーザーにとってフォーカスも知覚もできないからです。

値

論理値で、その要素が不活性である場合は true、それ以外の場合はこの値は false になります。

例

HTML

html
<div>
  <label for="button1">ボタン 1</label>
  <button id="button1">不活性ではありません</button>
</div>
<div inert>
  <label for="button2">ボタン 2</label>
  <button id="button2">不活性です</button>
</div>

CSS

css
[inert] > * {
  opacity: 0.5;
}

結果

メモ: この属性は、それ自体では、ブラウザーに表示されるコンテンツは視覚的変化を与えません。上の例では、inert 属性を持つ要素の直系の子孫が半透明になるように CSS が適用されています。

仕様書

Specification
HTML Standard
# dom-inert

ブラウザーの互換性

BCD tables only load in the browser

関連情報