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