- DelphiTools - https://www.delphitools.info -

Is “inert” the HTML Feature Of The Year?

With Chrome 102 HTMLElement.inert [1] attribute is now active, it is also in the Firefox/Edge/Safari nightlies, so will hopefully become available for those soon.

This inert attribute aims to make interactive HTML inert as a rock.
Yes, it only took 32 years to disable interactivity like in HTML 1.0, hurrah!

To quote MDN:

The HTMLElement property inert is a boolean value that, when present, makes the browser “ignore” user input events for the element, including focus events and events from assistive technologies.

So it is like good old Enabled from the VCL. And this is a great addition to HTML!

Why is this little attribute so great ? Well because it eliminates in one fell swoop a whole lot of complexity.

For your own components, before inert you had to either

For third party components, before inert you had to either

For modals, before inert you had to

Personally this attribute came just at the right time as I was implementation a leafletjs [2] based map. Leafletjs is a cool little maps library, but where disabling was really not a design consideration. And for its plugins, it was not even on the radar…

For further reading see Introducing inert [3] on the Chorme dev blog.