← Back to release summary

Use :focus-visible in the default UA style sheet

Category
CSS
Type
Chromium catches up
Status
Enabled by default (Chrome 90)
Intent stage
Prepare to ship

Summary

Change the Chromium default UA style sheet to use :focus-visible instead of :focus pseudo-class to paint the focus indicator (outline). This will avoid that elements show a focus indicator (because they're focused and match :focus) while they don't match :focus-visible.

Motivation

:focus-visible has been shipped in Chromium 86, however Chromium hasn't updated the default UA style sheet like the :focus-visible spec indicates: "User agents should also use :focus-visible to specify the default focus style, so that authors using :focus-visible will not also need to disable the default :focus style." So right now when you click an element like "<div tabindex="0">Focus me</div>" you get a focus indicator (because it matches :focus and the UA style sheet is seeting an outline in that case), but the element doesn't match :focus-visible (as expected). The problem is that :focus-visible is not enough to style the default focus indicator showed by Chromium, and people need to use a workaround to remove it from :focus when it doesn't match :focus-visible: :focus:not(:focus-visible) { outline: 0; } Once Chromium changes the UA style sheet to use :focus-visible instead of :focus this workaround won't be needed anymore. This change on the UA style sheet will cause a change of behavior for users, when they click on that kind of elements they no longer will get a focus indicator, but that's exactly the main purpose of :focus-visible. Many websites were disabling :focus all together due to this problem, so not showing it by default seems the way to go. Also websites can still use :focus pseudo-class if they want to always show a focus indicator.

Standards & signals

Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

Samples: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

Explainers: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

View on chromestatus.com