interactivity
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The interactivity CSS property specifies whether an element and its descendant nodes are set to be inert.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
interactivity Experimental | 135 | 135 | | | 135 | |
auto Experimental | 135 | 135 | | | 135 | |
inert Experimental | 135 | 135 | | | 135 | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.modal-backdrop {
interactivity: inert;
}
.step:not(.active) {
interactivity: inert;
opacity: 0.5;
} Live demo
Use cases
-
Using interactivity
Experimental: This is an experimental technology
Cautions
- Limited browser support. Check compatibility before use.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.