Socket
Socket
Sign inDemoInstall

postcss-focus-visible

Package Overview
Dependencies
7
Maintainers
3
Versions
16
Alerts
File Explorer

Advanced tools

Install Socket

Protect your apps from supply chain attacks

Install

postcss-focus-visible

Use the :focus-visible pseudo-selector in CSS

    9.0.1latest
    GitHub
    npm

Version published
Maintainers
3
Weekly downloads
6,588,815
increased by7.21%

Weekly downloads

Package description

What is postcss-focus-visible?

The postcss-focus-visible npm package is a PostCSS plugin that polyfills the :focus-visible pseudo-class. It allows developers to style elements that have focus only when they are focused via keyboard input, providing better accessibility and user experience. This is particularly useful for avoiding focus styles when clicking on elements with a mouse, which can sometimes be visually disruptive.

What are postcss-focus-visible's main functionalities?

Polyfill :focus-visible

This feature allows developers to use the :focus-visible pseudo-class in their CSS, which the plugin then compiles into a backward-compatible format. The output CSS works in conjunction with a JavaScript detection script to apply focus styles only when an element is focused via the keyboard.

/* Input CSS */
:focus-visible { outline: 1px solid black; }

/* Output CSS */
.js-focus-visible :focus:not(.focus-visible) { outline: none; }
.js-focus-visible .focus-visible { outline: 1px solid black; }

Other packages similar to postcss-focus-visible

Readme

Source

PostCSS Focus Visible PostCSS Logo

npm version CSS Standard Status Build Status Discord

npm install postcss-focus-visible --save-dev

PostCSS Focus Visible lets you use the :focus-visible pseudo-class in CSS, following the Selectors Level 4 specification.

To use this feature you need to do two things :

  • add the PostCSS plugin that transforms the selector into a class or attribute
  • add the focus-visible polyfill that sets the attribute or class on elements in a browser

'Can I use' table


```pcss
:focus:not(:focus-visible) {
	outline: none;
}

/* becomes */

:focus:not(.focus-visible).js-focus-visible, .js-focus-visible :focus:not(.focus-visible) {
	outline: none;
}
:focus:not(:focus-visible) {
	outline: none;
}

PostCSS Focus Visible duplicates rules using the :focus-visible pseudo-class with a .focus-visible class selector, the same selector used by the focus-visible polyfill.

Usage

Add PostCSS Focus Visible to your project:

npm install postcss postcss-focus-visible --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssFocusVisible = require('postcss-focus-visible');

postcss([
	postcssFocusVisible(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS Focus Visible runs in all Node environments, with special instructions for:

Options

preserve

The preserve option determines whether the original notation is preserved. By default, it is preserved.

postcssFocusVisible({ preserve: false })
:focus:not(:focus-visible) {
	outline: none;
}

/* becomes */

:focus:not(.focus-visible).js-focus-visible, .js-focus-visible :focus:not(.focus-visible) {
	outline: none;
}

replaceWith

The replaceWith option defines the selector to replace :focus-visible. By default, the replacement selector is .focus-visible.

postcssFocusVisible({ replaceWith: '[data-focus-visible-added]' })
:focus:not(:focus-visible) {
	outline: none;
}

/* becomes */

<example.preserve-true.expect.css>

Note that if you want to keep using focus-visible polyfill, the only acceptable value would be [data-focus-visible-added], given that the polyfill does not support arbitrary values.

disablePolyfillReadyClass

The disablePolyfillReadyClass option determines if selectors are prefixed with an indicator class. This class is only set on your document if the polyfill loads and is needed.

By default this option is false. Set this to true to prevent the class from being added.

postcssFocusVisible({ disablePolyfillReadyClass: true })
:focus:not(:focus-visible) {
	outline: none;
}

/* becomes */

:focus:not(.focus-visible) {
	outline: none;
}
:focus:not(:focus-visible) {
	outline: none;
}

Keywords

FAQs

Last updated on 15 Dec 2023

Did you know?

Socket installs a GitHub app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc