The :focus-visible Trick
Always worth repeating: all interactive elements should have a focus style. That way, a keyboard user can tell when they have moved focus to that element.
But if you use :focus
alone for this, it has a side effect that …
Always worth repeating: all interactive elements should have a focus style. That way, a keyboard user can tell when they have moved focus to that element.
But if you use :focus
alone for this, it has a side effect that …
The :focus-visible
pseudo-class (also known as the “Focus-Indicated” pseudo-class) is a native CSS way to style elements that:
:focus-visible
is used similarly to :focus
: to …
Like Eric Bailey says, if it’s interactive, it needs a focus style. Perhaps your best bet? Don’t remove the dang outlines that focusable elements have by default. If you’re going to rock a button { outline: 0; }
, …
Patrick H. Lauke covers the future CSS pseudo class :focus-visible
. We’re in the early days of browser support, but it aims to solve an awkward situation:
…… focus styles can often be undesirable when they are applied as a
Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.