:focus-visible not supported by all old browsers #37306

MewenLeHo · 2022-10-12T13:34:48Z

MewenLeHo
Oct 12, 2022

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.
According to https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring, this prefix is non-standard and is not on a standards track so we should not use it on production.
In addition, it may not work even after adding the prefix -moz-focusring as I tested on Browserstack.

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?
Keep using it and add a fallback for some browsers like Firefox 60 to 84?
Keep using it and update the list of supported browsers on .browserslistrc file?

Best regards.
Mewen

Answered by julien-deramond

Oct 12, 2022

My 2 cents. Few elements that could help figuring out what to do next.

Option 1: Update `.browserlistrc`

Current 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 …

View full answer

patrickhlauke · 2022-10-12T14:13:25Z

patrickhlauke
Oct 12, 2022
Collaborator

Ah, good point. I believe the browserlist should have been updated a bit, as Fx84 (which needs -moz-focus-visible) and Chrome 85 (which still needs the option enabled from experimental) are now 2+ years old. @mdo thoughts?

1 reply

julien-deramond Oct 12, 2022
Maintainer

My 2 cents. Few elements that could help figuring out what to do next.

Option 1: Update `.browserlistrc`

Current 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 Safari: 16.0, 15.6, 15.5, 15.4, 15.2-15.3, 15.0-15.1, 14.5-14.8, 14.0-14.4, 13.4-13.7, 13.3, 13.2, 13.0-13.1, 12.2-12.5, 12.0-12.1
KaiOS Browser: 2.5
Opera Mini: all
Opera Mobile: 64
Opera: 91, 90, 89
Safari: 16.0, 15.6, 15.5, 15.4, 15.2-15.3, 15.1, 15, 14.1, 14, 13.1, 13, 12.1, 12
Samsung Internet: 18.0, 17.0

These browsers account for 95.97% of all users globally

By updating to Chrome >= 86 + Firefox >= 85 (and letting Firefox ESR) we got

Updated .browserlistrc

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 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 iOS Safari: 16.0, 15.6, 15.5, 15.4, 15.2-15.3, 15.0-15.1, 14.5-14.8, 14.0-14.4, 13.4-13.7, 13.3, 13.2, 13.0-13.1, 12.2-12.5, 12.0-12.1 KaiOS Browser: 2.5 Opera Mini: all Opera Mobile: 64 Opera: 91, 90, 89 Safari: 16.0, 15.6, 15.5, 15.4, 15.2-15.3, 15.1, 15, 14.1, 14, 13.1, 13, 12.1, 12 Samsung Internet: 18.0, 17.0

These browsers account for 94.91% of all users globally

So we'd loose 1.06% of all users globally.
I haven't done the exercise but maybe some other browsers versions could need an update in this file as well (it would increase this number obviously).
I don't have the answer but I'm raising the question: would it be "OK"?

If we update the file, when do we do it?

IMO updating this file shouldn't be in a dot version of Bootstrap.
Correct me if I'm wrong but we plan to use prefers-color-scheme for the dark mode support in v5.3.0 that seems to need at least Firefox 67 and Chrome 76 (source: https://caniuse.com/?search=prefers-color-scheme). So we'd need here an update of this .browserlistrc as well.

Extra-question here. If we don't update the file right now, do we need to rollback the modifications already merged for :focus-visible? (might be not so simple)

Option 2: `focus-visible` polyfill

If we consider that this .browserlistrc should remain the same for now, another option is to use the focus-visible polyfill: https://github.com/WICG/focus-visible (that's what we use in Boosted actually). The drawbacks for this solution are the following:

this polyfill is always enabled even if the user's browser support :focus-visible
the syntax is a bit different than :focus-visible (see https://github.com/WICG/focus-visible#2-update-your-css)

Answer selected by MewenLeHo

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bootstrap

:focus-visible not supported by all old browsers #37306

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Bootstrap

:focus-visible not supported by all old browsers #37306

Uh oh!

Uh oh!

MewenLeHo Oct 12, 2022

Option 1: Update .browserlistrc

Replies: 1 comment · 1 reply

Uh oh!

patrickhlauke Oct 12, 2022 Collaborator

Uh oh!

julien-deramond Oct 12, 2022 Maintainer

Option 1: Update .browserlistrc

If we update the file, when do we do it?

Option 2: focus-visible polyfill

MewenLeHo
Oct 12, 2022

Option 1: Update `.browserlistrc`

Replies: 1 comment 1 reply

patrickhlauke
Oct 12, 2022
Collaborator

julien-deramond Oct 12, 2022
Maintainer

Option 1: Update `.browserlistrc`

Option 2: `focus-visible` polyfill