focus-within-polyfill

:focus-within Pseudo-Class Polyfill

• How to use
• Browser support
• :focus-within MDN

The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus.

More information on MDN.

How to use

This package is available both as production ready script and as a package. The script can be downloaded here, or installed with a package manager.

# npm
npm install focus-within-polyfill --save

# yarn
yarn add focus-within-polyfill

When the polyfill is included via a script tag it will create a focusWithin object with a loadPolyfill and a unloadPolyfill method to initialize the code. On the other hand when imported as a dependency the same methods are exposed.

/* ES6 */
import { polyfill, unloadPolyfill } from 'focus-within-polyfill'

polyfill() 			// load polyfill
unloadPolyfill()	// unload polyfill


/* ES5 */
<script src='path/to/focus-within-polyfill.js'></script>

focusWithin.polyfill()			// load polyfill
focusWithin.unloadPolyfill() 	// unload polyfill

Browser Support

• Natively supported in Chrome
• Natively supported in Firefox
• Natively supported in Safari
• Natively supported in Opera
• IE 11
• Edge