Skip to content
Polyfill for the HTML inert attribute
Branch: master
Clone or download
Latest commit d307e9a Nov 20, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore gitignore Dec 5, 2016
CONTRIBUTING.md
LICENSE initial commit May 18, 2015
README.md 2017 updates to README Feb 10, 2017
bower.json restore tests by old mocha dep Nov 20, 2017
demo.html simplify demo Jun 10, 2015
inert-polyfill.css remove IE9/10 hack Aug 4, 2016
inert-polyfill.js update to 0.2.5 Nov 20, 2017
inert-polyfill.min.js
package.json
shadow.html
suite.js restore tests by old mocha dep Nov 20, 2017
test.html don't overwrite native support Sep 8, 2017

README.md

Polyfill for the inert HTML attribute. Check out a small demo.

The inert attribute is a draft feature of HTML. As of Feb 2017, no browser has a native implementation of inert. However, there is active development inside Chrome, and other browsers have shown some renewed interest.

From the HTML spec-

A node (in particular elements and text nodes) can be marked as inert. When a node is inert, then the user agent must act as if the node was absent for the purposes of targeting user interaction events, may ignore the node for the purposes of text search user interfaces (commonly known as "find in page"), and may prevent the user from selecting text in that node.

While not a replacement for proper state management, web developers can use the inert attribute to prevent access to subtrees. This could be useful to prevent access to active HTML forms, to enable modal-like popovers, or to block user interaction while awaiting the result of an asynchronous operation.

Example

<div inert>
  <button>I'm unclickable!</button>
  <input type="text" placeholder="I'm unfocusable!" />
</div>

Usage

Include the inert-polyfill script at the end of your page. There are no other initialization steps.

The polyfill prevents tab-focusing, using the accessKey to access an element, the click event (mostly for sanity, as elements should be unfocusable), and any other approach to focus.

Installation

You may optionally install via NPM or Bower-

$ npm install inert-polyfill
$ bower install inert-polyfill

Supports

This polyfill works on modern versions of all major browsers. It also supports IE9 and above, although links and buttons may appear clickable (IE9 and IE10 do not support pointer-events, although there is a polyfill).

Limitations

Most limitations revolve around keyboard access and the tab key-

  • Most browsers don't support emulating tab events, so positive values of tabIndex may be ignored
    • Avoid relying on a specific tab order
  • Inert elements at the very start or end of a page may prevent tab access to the browser's chrome
  • While tabbing over inert elements, inner elements may still receive intermediate focus and blur events

Other limitations include-

  • Content within an inert element may still be searched for (using the browser's Find box) or selected
  • Focused elements that become inert due to surrounding HTML changes will remain focused
  • Inert will work within a shadow root, but the CSS to support it is not included

If these limitations do not work for your project, there is also a WICG polyfill, which uses MutationObserver to recursively walk HTML trees to clear tabIndex (clearing or setting to -1). This is more correct, but will incur a performance hit when inert is enabled or disabled. The GoogleChrome hosted polyfill simply overloads focus and related events to prevent focus.

Release

Compile code with Closure Compiler.

// ==ClosureCompiler==
// @compilation_level ADVANCED_OPTIMIZATIONS
// @output_file_name inert-polyfill.min.js
// ==/ClosureCompiler==

// code here
You can’t perform that action at this time.