Patrick H. Lauke befasst sich mit der zukünftigen CSS-Pseudo-Klasse :focus-visible. Wir stecken noch in den Anfängen der Browserunterstützung, aber sie zielt darauf ab, eine peinliche Situation zu lösen
… Fokusstile können oft unerwünscht sein, wenn sie als Ergebnis einer Maus-/Pointer-Interaktion angewendet werden. Ein klassisches Beispiel hierfür sind Buttons, die eine bestimmte Aktion auf einer Seite auslösen, wie z. B. das Fortsetzen eines Karussells. Während es wichtig ist, dass ein Tastaturnutzer sehen kann, wann ihr Fokus auf dem Button liegt, kann es für einen Maussutzer verwirrend sein, wenn sich das Aussehen des Buttons nach dem Anklicken ändert – was sie sich fragen lässt, warum die Stile „haften“ geblieben sind oder ob sich der Zustand/die Funktionalität des Buttons irgendwie geändert hat.
Wenn wir :focus-within *anstelle* von :focus verwenden, gibt dies dem Browser die Freiheit, Fokusstile *nicht* anzuwenden, wenn er feststellt, dass sie unnötig sind, aber sie dennoch anwendet, wenn z. B. das Element mit der Tabulatortaste angetippt wird.
Der beängstigende Teil ist „anstelle von“. Wir können einfach mitten in den Browser-Support einsteigen, wie er gerade ist. Nicht einmal @supports kann uns helfen. Aber Patrick hat einige Ideen.
button:focus { /* some exciting button focus styles */ }
button:focus:not(:focus-visible) {
/* undo all the above focused button styles
if the button has focus but the browser wouldn't normally
show default focus styles */
}
button:focus-visible { /* some even *more* exciting button focus styles */ }