Unngå focus-styling på elementer utenfor tastaturnavigasjon

Jeg kom nylig over en snutt som har vist seg å være litt nyttig i tilfeller der man ønsker en tydelig fokusmarkering - men bare når du faktisk navigerer med tastatur, og ikke når du f.eks bruker mus og trykker på et interaktivt element.

[css]
:focus-visible {
  outline: 2px solid var(--focus-outline-color);
}

@supports not selector(:focus-visible) { :focus { outline: 2px solid var(--focus-outline-color); } }

Litt løst forklart, naturligvis, men poenget er iallefall å falle tilbake på en vanlig fokusindikator i de tilfellene der det ikke støttes (som inkluderer ganske nye versjoner av mange nettlesere, tro det eller ei), mens man lar nettleseren avgjøre når den skal vises der selektoren er støttet. Både caniuse.com og MDN har god dokumentasjon på støtte og funksjon.