The :focus-visible Trick

All interactive elements should have a focus style, which is a best practice worth repeatedly highlighting. This way, the keyboard user can know whether the focus has moved to the element.

However, if you only use :focus to achieve this, there will be side effects that many people don't like. This means that when you click on the interactive element (with the mouse), you will see the focus style. As a mouse user, you don't need this kind of feedback because you just moved the cursor there and clicked it. Whatever your opinion on this, it has bored a lot of people over the years that they completely removed the focus style, which has caused serious damage to the accessibility of the network.

What if we only apply focus styles when using the keyboard to focus elements (not the mouse)? Lea Verou pointed out this a few years ago:

That's the response to Chrome canceling the feature (hiding it behind the logo). Very clever.

A few years later, Chrome released it without the need for a logo. They agree with Lea's idea:

By using :focus-visible with :focus , you can go a step further and provide different focus styles based on the user's input device. This is useful if you want the focus indicator to depend on the accuracy of the input device:

 <code>/* 使用键盘聚焦按钮将显示一条虚线黑线。*/ button:focus-visible { outline: 4px dashed black; } /* 使用鼠标、触摸或触笔聚焦按钮将显示一个细微的投影。*/ button:focus:not(:focus-visible) { outline: none; box-shadow: 1px 1px 5px rgba(1, 1, 0, .7); }</code>

I suggest you try using these selectors without using button selectors so that they apply globally!

There is more to go into, so I will link more information here:

• The Chromium blog post introduces the heuristics of selectors. This is tricky. Just like there is an algorithm to determine whether :focus-visible will match, you just need to trust it in general. It also introduces Firefox has long had :-moz-focusring , but its behavioral differences are large enough that it is not recommended if you pursue consistent behavior.
• Matthias Ott gave some good introduction to this in his blog, such as using the official polyfill and how to properly view the styles in DevTools (a new checkbox is provided for this).
• We've also introduced this before. In that post, we mentioned Lea's tweet, and she thinks that when it's actually released, its usage will surge. Let's wait and see (and hopefully so)!
• Our yearbook entry contains a lot of details.

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