Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
postcss-focus-visible
Advanced tools
Package description
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.
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; }
This package is a PostCSS plugin that polyfills the :any-link pseudo-class. It is similar to postcss-focus-visible in that it provides a way to use newer pseudo-classes in CSS and compiles them into a format that is compatible with older browsers.
postcss-custom-selectors is another PostCSS plugin that allows you to define custom pseudo-classes and selectors. While it doesn't directly polyfill :focus-visible, it offers similar functionality in terms of extending CSS capabilities and ensuring compatibility with older browsers.
This plugin polyfills the :not() CSS pseudo-class to make it work with lists of complex selectors. It is similar to postcss-focus-visible in that it enhances CSS selector capabilities and ensures cross-browser compatibility.
Readme
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 :
```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.
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:
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;
}
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.
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;
}
FAQs
Use the :focus-visible pseudo-selector in CSS
The npm package postcss-focus-visible receives a total of 4,609,212 weekly downloads. As such, postcss-focus-visible popularity was classified as popular.
We found that postcss-focus-visible demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.