demo · v132

interactivity: inert as a CSS property

Toggle interactivity on either panel and try to type or Tab into it. The .inert class sets interactivity: inert (cascade-driven). Compare with the legacy inert attribute on the second panel.

checking support…

panel A — CSS .inert toggleable

last event: (none)

panel B — HTML inert attribute toggleable

last event: (none)
.panel.inert { interactivity: inert; opacity: 0.45; }

see also