Look at that! The :focus-visible
pseudo-selector is now supported in Firefox, as of version 85 which shipped yesterday. I had to rush over to the MDN Docs just to confirm, and yep, the :focus-visible
page has been updated to reflect the news.
What’s so cool about :focus-visible
? It’s all about the blue focus ring that displays around elements that are in focus. It’s sort of a happy medium between loving the outline for accessibility purposes (gotta know what element is selected when tabbing on a keyboard) but not-really-loving how it looks (gotta have everything follow brand).
The strategy has largely been an all-or-nothing choice between using a custom outline
when any element is in :focus
(great, but that means for both keyboard tabbing and mouse clicks) or ditching the outline
altogether (not great, like ever). :focus-visible
accomplishes the same thing as :focus
, but uses a browser’s knowledge of user inputs (or heuristics) to determine whether the focus is coming from a keyboard or a mouse.
(Are a browser’s heuristics perfect at determining the input? That depends. Things get murky once we start factoring in things like touch interactions.)
That means, we get to remove the default focus ring (yay!) for the right types of interactions (double yay!) and display our own custom styles while we’re at it (triple yay!). Allow me to pluck Andy Adams’ fine example straight from our almanac. Note that :focus-visible
cannot remove the focus ring like :focus
can, so the two are used together:
.next-image-button:focus {
outline: none;
}
.next-image-button:focus-visible {
outline: 3px solid blanchedalmond; /* That'll show 'em */
}
Chrome implemented :focus-visible
back in 2018. Firefox had it’s own prefixed version, :-moz-focusring
, prior to this implementation. Safari? Go vote for the feature!
The post :focus-visible Support Comes to Firefox appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!