Firefox 85 Ships :focus-visible
Firefox version 85, released yesterday, now includes support for the :focus-visible pseudo-class. The MDN documentation has already been updated to reflect the change.
The selector addresses a long-standing design dilemma: the default focus ring is essential for keyboard users to track their position on the page, yet it often clashes with a site's visual identity. Previously, developers were stuck with an all-or-nothing choice — either apply a custom outline to any element matched by :focus (which fires for both keyboard and mouse interactions) or remove the outline entirely, at the cost of accessibility.
Like :focus, :focus-visible matches focused elements, but it relies on the browser's heuristics to determine whether the focus originated from a keyboard or a pointing device. This makes it possible to strip the default focus ring for mouse clicks while still providing custom, visible focus indicators for keyboard navigation. It's worth noting that these heuristics are not infallible, particularly where touch interactions are concerned.
Since :focus-visible cannot suppress the focus ring the way :focus can, the two selectors are typically combined to achieve the desired effect:
.next-image-button:focus {
outline: none;
}
.next-image-button:focus-visible {
outline: 3px solid blanchedalmond; /* That'll show 'em */
}Chrome has supported :focus-visible since 2018. Firefox previously offered a vendor-prefixed alternative, :-moz-focusring. Safari remains the notable holdout; Igalia is currently seeking funding to bring the feature to WebKit, as Brian Kardell explains. WebKit bugs can be tracked and voted on via the WebKit bug tracker.
