CSS Selectors 4 Pseudo-Class :focus-visible

CSS

The :focus-visible pseudo-class makes it easier for developers to create focus styles that appropriately match the user's input modality. It is designed to help prevent a common anti-pattern where developers remove focus outlines for mouse users, and inadvertently make their sites inaccessible to keyboard users.

Comments

This pseudo-class applies while an element matches the :focus pseudo-class and the UA determines via heuristics that the focus should be made evident on the element. (Many browsers show a “focus ring” by default in this case.) Note: Firefox currently ships a similar selector, :-moz-focusring, which the :focus-visible pseudo-class is based on. However, they have not yet publicly declared support for :focus-visible.

Specification

Editor's draft

Status in Chromium

Blink>CSS


Behind a flag (tracking bug) in:

  • Chrome for desktop release 67
  • Chrome for Android release 67

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • Mixed public signals
  • No public signals
  • No public signals
  • Positive

Owner

Last updated on 2018-04-13