Limited support Limited browser support. Check compatibility before use.

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.

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

    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.

Related links