:focus-visible not supported by all old browsers #37306
-
|
Hello all, I am currently working on focus for Boosted and I have a problem with the PR "Rework button focus/active styling, with extra changes for checks/radios #37026". @patrickhlauke switched from ':focus' to ':focus-visible' arguing that ':focus-visible' is now supported by most browsers. According to https://caniuse.com/?search=focus-visible it is mostly true. But for Firefox 4-84, it is mentioned that it needs the prefix -moz-focusring. For Chrome, it seems not supported by default too. Howewer if we refer to .browserslistrc file Bootstrap is supposed to support old browsers (e.g. Firefox 68, etc.). So what to do here? Stop using ':focus-visible' since it's not supported by all old browsers? Best regards. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
Ah, good point. I believe the browserlist should have been updated a bit, as Fx84 (which needs |
Beta Was this translation helpful? Give feedback.
My 2 cents. Few elements that could help figuring out what to do next.
Option 1: Update
.browserlistrcCurrent browser support
npx autoprefixer --info (0.000001 hrs)Browsers:
Chrome for Android: 105
Firefox for Android: 104
QQ Browser: 13.1
UC for Android: 13.4
Android: 105
Chrome: 106, 105, 104, 103, 102, 101, 100, 99, 98, 97, 96, 95, 94, 93, 92, 91, 90, 89, 88, 87, 86, 85, 84, 83, 81, 80, 79, 78, 77, 76, 75, 74, 73, 72, 71, 70, 69, 68, 67, 66, 65, 64, 63, 62, 61, 60
Edge: 105, 104, 103
Firefox: 105, 104, 103, 102, 101, 100, 99, 98, 97, 96, 95, 94, 93, 92, 91, 90, 89, 88, 87, 86, 85, 84, 83, 82, 81, 80, 79, 78, 77, 76, 75, 74, 73, 72, 71, 70, 69, 68, 67, 66, 65, 64, 63, 62, 61, 60
iOS …