interactivity
実験的: これは実験的な技術です
本番環境で使用する前に、ブラウザーの互換性表を注意深く確認してください。
`interactivity` CSS プロパティは、要素とその子孫ノードが不活性に設定されているかどうかを指定します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
interactivity 実験的 | 135 | 135 | | | 135 | |
auto 実験的 | 135 | 135 | | | 135 | |
inert 実験的 | 135 | 135 | | | 135 | |
基本構文
CSS
.modal-backdrop {
interactivity: inert;
}
.step:not(.active) {
interactivity: inert;
opacity: 0.5;
}ライブデモ
実務での使いどころ
-
モーダル背景のインタラクション無効化
モーダルダイアログ表示時に背景コンテンツを不活性化し、モーダル内のみ操作可能な状態を作ります。
注意点
- 2026年3月時点でChrome/Edgeのみの対応です。互換性が必要な場合はinert HTML属性の使用を検討してください。
アクセシビリティ
- 不活性化された要素がスクリーンリーダーからも適切に除外され、フォーカス順序に含まれないことを確認してください。