-
Notifications
You must be signed in to change notification settings - Fork 124
Open
Description
Currently Chrome with experimental flag enabled supports ":focus-visible" polyfill. It would be nice if polyfill could be enabled only if current browser doesn' support ":focus-visible".
To do that, I propose to check pseudo-class support using this method:
supportsPseudo = function (pseudoClass) {
// Get the document stylesheet
var ss = document.styleSheets[0];
// Create a stylesheet if one doesn't exist
if (!ss) {
var el = document.createElement('style');
document.head.appendChild(el);
ss = document.styleSheets[0];
document.head.removeChild(el);
}
// Test the pseudo-class by trying to style with it
var testPseudo = function () {
try {
if (!(/^:/).test(pseudoClass)) {
pseudoClass = ':' + pseudoClass;
}
ss.insertRule('html' + pseudoClass + '{}', 0);
ss.deleteRule(0);
return true;
} catch(e) {
return false;
}
};
// Run the test
return testPseudo();
};
And then in polyfill modify code on the line 306 with:
if (typeof document !== 'undefined' && !supportsPseudo("focus-visible")) {
// Apply the polyfill to the global document, so that no JavaScript
// coordination is required to use the polyfill in the top-level document:
applyFocusVisiblePolyfill(document);
}
After that we will be able to write css rules for both native ":focus-visible" and polyfill version:
:focus:not(:focus-visible) {
outline: 0;
}
.js-focus-visible :focus:not(.focus-visible) {
outline: 0;
}
yoanmalie, samulisuomi, iaintodd-sparkle, Schweinepriester and ryuran
Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
Milestone
Relationships
Development
Select code repository
Activity
emilio commentedon Aug 29, 2020
Drive by, but that's a really really expensive way to test for a pseudo-element.
try { document.querySelector(":focus-visible"); return true; } catch { return false }
should be much faster.Justineo commentedon Aug 30, 2020
I’m afraid this requires double your style declarations for
.focus-visible
to make it work with or without the “polyfill” (technically this project isn’t a real polyfill).kutensky commentedon Aug 30, 2020
Yeap, that will require a double style declaration. But on the other hand, when browsers start to support his feature (Chrome is going to start supporting it from v.86), no js run will be needed. Currently, polyfill does a lot of background work that isn't good for performance.
robdodson commentedon Oct 9, 2020
Very good points from everyone.
It sounds like if we land this then we should use @emilio's implementation, but also land a note in the README which explains the need to double up your style declarations. We could also add a note that if folks would prefer, they can use the postcss plugin (https://github.com/csstools/postcss-focus-visible) which I think will let them write their CSS using
:focus-visible
and then it'll do the right thing depending on their browser support matrix. I'm not a post-css expert but I think that's how it works :)ryuran commentedon Nov 15, 2022
Related to #244
This condition could help