The inert attribute allows web authors to mark parts of the DOM tree as inert. When a node is inert: - Hit-testing must act as if the 'pointer-events' CSS property were set to 'none'. - Text selection functionality must act as if the 'user-select' CSS property were set to 'none'. - If it is editable, the node behaves as if it were non-editable. - The user agent may ignore the node for the purposes of find-in-page. (also aboxhall@)

Motivation

Developers need to make content temporarily non-interactive in a range of circumstances; the most common is when implementing modal UI, but other examples include previous/next slide previews in a slide show, and making currently inactive content non-interactive during verification or other other time-consuming blocking operations. While the modal UI use case would benefit from an API directly addressing that use case, any API designed for that case would still need to use the concept of inertness, and this API is a very minimal addition to that concept which is easy for developers to understand, which enables all of the use cases described above, including non-modal cases.

Demo

Documentation

Specification

Specification link


Final published standard: Recommendation, Living Standard, Candidate Recommendation, or similar final form

Status in Chromium

Blink>HTML


Enabled by default (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owner

Intent to Prototype url

Intent to Prototype thread

Search tags

inert, focus, accessibility, keyboard, events, pointer,

Last updated on 2022-05-05