npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

wicg-inert

v3.1.3

Published

A polyfill for the proposed inert API

Downloads

444,352

Readme

The inert attribute/property allows web authors to mark parts of the DOM tree 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.

Furthermore, a node which is inert should also be hidden from assistive technology.

Details

Polyfill

Installation

npm install --save wicg-inert

We recommend only using versions of the polyfill that have been published to npm, rather than cloning the repo and using the source directly. This helps ensure the version you're using is stable and thoroughly tested.

This project provides two versions of the polyfill in package.json.

  • main: Points at dist/inert.js which is transpiled to ES3.
  • module: Points at dist/inert.esm.js which is transpiled to ES3.

If you do want to build from source, make sure you clone the latest tag!

Usage

1. Either import the polyfill, or add the script to your page

import "wicg-inert";

OR…

    ...
    <script src="/node_modules/wicg-inert/dist/inert.min.js"></script>
  </body>
</html>

2. Toggle inert on an element

const el = document.querySelector('#my-element');
el.inert = true; // alternatively, el.setAttribute('inert', '');

Legacy Browser Support

If you want to use inert with an older browser you'll need to include additional polyfills for Map, Set, Element.prototype.matches, and Node.prototype.contains.

In accordance with the W3C's new polyfill guidance, the inert polyfill does not bundle other polyfills.

You can use a service like https://cdnjs.cloudflare.com/polyfill to download only the polyfills needed by the current browser. Just add the following line to the start of your page:

<script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?version=4.8.0&features=Map%2CSet%2CElement.prototype.matches%2CNode.prototype.contains"></script>

Strict Content Security Policy

By default, this polyfill will dynamically insert some CSS, which requires the style-src rule of your Content Security Policy to allow 'unsafe-inline'.

It is possible avoid doing so by including those rules from a CSS stylesheet, as follows (the id property is used by the polyfill to know if it needs to dynamically add the missing rules):

<link rel="stylesheet" type="text/css" href="inert.css" id="inert-style" />

The stylesheet should include the following rules:

[inert] {
  pointer-events: none;
  cursor: default;
}

[inert], [inert] * {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

Performance and gotchas

The polyfill attempts to provide a reasonable fidelity polyfill for the inert attribute, however please note:

  • It relies on mutation observers to detect the addition of the inert attribute, and to detect dynamically added content within inert subtrees. Testing for inert-ness in any way immediately after either type of mutation will therefore give inconsistent results; please allow the current task to end before relying on mutation-related changes to take effect, for example via setTimeout(fn, 0) or Promise.resolve().

    Example:

const newButton = document.createElement('button');
const inertContainer = document.querySelector('[inert]');
inertContainer.appendChild(newButton);
// Wait for the next microtask to allow mutation observers to react to the
// DOM change
Promise.resolve().then(() => {
  expect(isUnfocusable(newButton)).to.equal(true);
});
  • Using the inert property, however, is synchronous.

  • The polyfill will be expensive, performance-wise, compared to a native inert implementation, because it requires a fair amount of tree-walking. To mitigate this, we recommend not using inert during performance sensitive actions (like during animations or scrolling). Instead, wait till these events are complete, or consider using requestIdleCallback to set inert.

Testing

Tests are written using ES5 syntax. This is to avoid needing to transpile them for older browsers. There are a few modern features they rely upon, e.g. Array.from and Promises. These are polyfilled for the tests using https://cdnjs.cloudflare.com/polyfill. For a list of polyfilled features, check out the polyfill section in karma.conf.js.

Big Thanks

Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs