A pattern I've been using a lot recently is use a couple of @supports to use the default focus in IE and fallback to :focus in browsers where :focus-visible is not supported.
:focus
:focus-visible
@supports not (-ms-high-contrast: none) { button:focus { outline: none; box-shadow: inset 0 0 0 1px black, inset 0 0 0 3px white, inset 0 0 0 4px black; } } @supports selector(:focus-visible) { button:focus:not(:focus-visible) { box-shadow: initial; } }
I love this. Adding it to the toolbelt!
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
A pattern I've been using a lot recently is use a couple of @supports to use the default focus in IE and fallback to
:focusin browsers where:focus-visibleis not supported.I love this. Adding it to the toolbelt!