Limited support Limited browser support. Check compatibility before use.

interactivity

The interactivity CSS property specifies whether an element and its descendant nodes are set to be inert.

Other

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

Inert(not-)

CSS Inert(not-) demo.

PreviewFullscreen

Auto(normal)

CSS Auto(normal) demo.

PreviewFullscreen

step style UI

CSS step styleUI demo.

PreviewFullscreen

Use cases

  • Using interactivity

    The interactivity CSS property specifies whether an element and its descendant nodes are set to be inert.

Cautions

  • Limited browser support. Check compatibility before use.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links