Ever felt inert?

Lacking the ability or strength to move, is what ‘inert’ means according to a google search. Notably, in the frontend world, its meaning isn’t that far off. ‘inert’ is a boolean expression that can be used on a HTML element like this:

<dialog inert>...</dialog>

When used it tells the browser to ignore it. It also makes the browser ignore input events like click or focus. Used on a section it will ignore all the children in the section and elements like links or buttons can’t be reached. One useful usecase is when added to elements that are visually hidden or offscreen, like when collapsed or paginated. When ‘inert’ is added it gets removed from both the tab order and the accessibility tree.

This attribute is most effective when used on groups of elements. Otherwise, we also have the ‘disabled’ state in HTML and ‘:disabled’ in CSS to consider.

Nice right!?