読者です 読者をやめる 読者になる 読者になる

inertとは何だろう

HTML5などにはinert(不活性)という概念があります。イナートと読むのでしょう(たぶん)。

inertなノードとその子孫はユーザーによる操作の対象にはならない、そうです。ブラウザーによってはinertなノードを選択できなかったり、ページ内検索の対象としないかもしれません。また、inertなノードはフォーカスを受け取ることもありません。

SVGにはpointer-eventsというプロパティがあり、pointer-events:none;を指定すると要素がマウス操作などを受け取らない(奥の要素がマウス操作などを受け取る)ように設定できますが、それを思い出しました。

それはともかく、ノードがinertになる状況として、モーダルダイアログの裏にきている時があります。dialog要素のshowModal()を使ってモーダルダイアログを表示すると、dialog要素(とその祖先要素と子孫ノード)以外のノードがinertになります。これによって、モーダルコンテンツ以外がユーザーによって不用意に操作されることを防ぐことができます。

また、HTML 5.1やHTML Living Standardではinert属性が定義され、要素を手動でinertにすることができます。

<div inert>これはinertな要素です</div>

とはいえ、inertなノードをユーザーが操作することはできないので、使い所には注意しないと本当に「使えない」ページができてしまいます。手動でinertにする場面は、あまり思いつきませんが、例えば、アニメーションしながら画面から消えてゆく要素をユーザーが不用意に操作しないようにアニメーションを始めた段階でinertにする、などがあるかもしれません。