:focus-visible CSS pseudo-class

Today I learned: There's an alternative to :focus, that's only applied, when selecting the element via keyboard: :focus-visible.

The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class, and the UA determines via heuristics that the focus should be specially indicated on the element (typically via a “focus ring”). Entry on caniuse.com

Unfortunately support is not great yet. But there's a polyfil and a way to enhance progressively (Video, about minute 41:00):

:focus:not(:focus-visible) {
 /* styles */
}