:focus-visible Support Comes to Firefox

Firefox 85 version officially supports :focus-visible pseudo-class selector! what does that mean? Let's take a look together.

As the MDN documentation has been updated, the highly anticipated :focus-visible pseudo-class selector is now natively supported in Firefox 85.

:focus-visible is that it cleverly balances accessibility and visual aesthetics. We all know that the focus profile is crucial for accessibility (especially when navigating the keyboard), but the default blue focus profile does not always fit the brand design.

In the past, we faced a dilemma: either use a custom outline, which displays when all elements get focus (whether it is a keyboard or mouse click), or cancel the outline completely, sacrificing accessibility. And :focus-visible solves this problem perfectly. It uses browser user input information (or heuristics) to determine whether the focus comes from the keyboard or the mouse.

(Can the browser's heuristics perfectly distinguish the input method? It depends on the situation. Once touch interaction is involved, the situation becomes complicated.)

This means that we can remove the default focus ring (awesome!), and only display custom styles when needed (keyboard interaction) (awesome!). Let's look at an example (thanks to Andy Adams):

 <code>.next-image-button:focus { outline: none; } .next-image-button:focus-visible { outline: 3px solid blanchedalmond; /* 自定义焦点样式*/ }</code>

It should be noted that :focus-visible does not completely remove the focus ring like :focus , so the two are usually used together.

Chrome was implemented as early as 2018 :focus-visible . Firefox also had its own prefix version before :-moz-focusring . Safari user? Go and vote for this feature! Igalia is raising funds and working to add it to the Safari browser! Brian Kardell explained this in detail.

The above is the detailed content of :focus-visible Support Comes to Firefox. For more information, please follow other related articles on the PHP Chinese website!