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.
About us and this blog
We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.
Request a free quote
We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.
Subscribe to our newsletter!
More from our blog
See all postsRecent Posts
- How to Animate the Details Element March 3, 2021
- The State Of Mobile And Why Mobile Web Testing Matters March 3, 2021
- The Best Font Loading Strategies and How to Execute Them March 3, 2021