Comments on: Managing User Focus with :focus-visible

By: Simon Weaver

Simon Weaver — Thu, 06 Jun 2024 14:37:49 +0000

Great article. It helps a lot with my work. Thanks for sharing these effective and helpful ways.

By: Chris DeMars

Chris DeMars — Tue, 09 Apr 2024 18:45:25 +0000

In reply to basher. Sounds like a cool idea.

By: Chris L

Chris L — Tue, 09 Apr 2024 12:50:44 +0000

:has gives us :focus-visible-within too, even though its not a thing in CSS officially. Useful for those complex components.

:has(*:focus-visible)

By: Decipher Zone

Decipher Zone — Tue, 09 Apr 2024 09:35:11 +0000

Thanks For Sharing!!
I am now sure about using it well in my codes without any doubts.

By: basher

basher — Mon, 08 Apr 2024 08:31:43 +0000

I prefer to use box-shadow for :focus-visible, and have a transparent outline which will then work nicely in Windows high contrast mode.

Here’s an example – https://github.com/basher/Web-UI-Boilerplate/blob/master/ui/src/stylesheets/mixins/_focus.scss#L46

By: Sora2455

Sora2455 — Sun, 07 Apr 2024 23:26:10 +0000

Given that most browsers that don't support :focus-visible also won't support @supports not, a much better fallback would be to set your focus styles with :focus, then remove both them and the defaults with a :focus:not(:focus-visible) selector.