Limited supportLimited browser support. Check compatibility before use.
Other Limited support

interactivity

The interactivity: inert CSS declaration makes an element and its descendants inert, like when using the inert HTML attribute. Inert elements can't be focused or clicked, their text can't be selected or found using the browser's find-in-page feature.

Other

Overview

The interactivity: inert CSS declaration makes an element and its descendants inert, like when using the inert HTML attribute. Inert elements can't be focused or clicked, their text can't be selected or found using the browser's find-in-page feature.

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: inert CSS declaration makes an element and its descendants inert, like when using the inert HTML attribute. Inert elements can't be focused or clicked, their text can't be selected or found using the browser's find-in-page feature.

Cautions

  • Limited browser support. Check compatibility before use.

Accessibility

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

Related links

Powered by web-features