Closed8
inert属性について調べてみる
Keita Hinoこちらを中心に見ていく。
まだ正式にサポートしているブラウザはなさそう？
Chrome はバージョン 102 でサポートされる予定。
Keita Hinoざっくりとした理解
- inert 属性が付与されると、サブツリー全体が不活性（リンクが押せなくなったり）になる
- 似た属性として disabled 属性がある。個別に指定したい場合は disabled の方が適切っぽい
- inert は boolean 属性
参考
Keita Hinoデモサイトが用意されていた。
サンプルだと div 要素に対して inert 属性が指定されていて、子要素を操作できなくなっている。
Keita HinoWebkit のブログが分かりやすい。
ここから上記ブログを読んでの理解。
inert と同様、操作不可にするための disabled 属性があるが、こちらはフォームコントロール以外にはつけることができない。
フォームコントロール以外の要素を操作不可にするには tabindex="-1"をつけてフォーカスされないようにしたり、user-select: none のスタイルをあてて選択できないようにしたりと、手間がかかった。
intert 属性はこれらの問題を解決するために提案された。
Keita Hinoカルーセルに inert 属性をつけたデモが紹介されていた。
「アクティブではないスライドも表示したいけど、操作はさせたくない」という場合でも inert 属性で簡単に制御できるんだ。便利〜👏
Keita HinoChrome 102 で inert 属性が追加されていた🎉
Keita Hino2023/02/08 時点
Firefox 以外のブラウザーは inert 属性をサポートしている。
先日、Interrop 2023 で取り組む機能が公開され、その中に inert 属性も含まれていたので、2023年内に Firefox もサポートしてくれるはず...!
Keita HinoFirefox 112 で inert 属性がサポートされました！
これにより、全モダンブラウザでサポートされたことになります🎉
このスクラップは2023/04/13にクローズされました