twbs
Update .browserslistrc
Warning Work In Progress
Description / Motivation & Context
Based on https://github.com/twbs/bootstrap/discussions/37306, I'm starting a PR to update our list of supported browsers contained in .browserslistrc.
Actual support
npx autoprefixer --info
npx autoprefixer --info (0.000679 hrs) Browsers: Chrome for Android: 106 Firefox for Android: 105 QQ Browser: 13.1 UC for Android: 13.4 Android: 106 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: 106, 105, 104 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 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.0These browsers account for 95.92% of all users globally
:focus-visible
We already began to use :focus-visible but haven't updated yet our .browserslistrc. Let's check what is the impact and if we can consider that we live with this mismatch we have now and fix it for the next v5.3.0.
⚠️ Temporary added https://github.com/twbs/bootstrap/pull/37309/commits/60ff612061f3a61be1472001f09b8605b37ae0b3 in this PR in order to do some BrowserStack testing.
See also https://github.com/orgs/twbs/discussions/37306
TODO: check what values would need to be changed and what is the impact
TODO: change values in .browserslistrc
prefers-color-scheme
Will be used in the dark mode. TODO: add more details
TODO: explain what values need to be changed
TODO: change values in .browserslistrc
xlink:href → href
See https://github.com/twbs/bootstrap/pull/39222
Breaking changes too important for now
- Dialog element
- gap property for flexbox
- But what about https://github.com/twbs/bootstrap/blob/42e99cc59f6e87795e25d751bcfaf3be711191b4/scss/_nav.scss#L147
Others
- [ ] https://github.com/twbs/bootstrap/pull/35857/files#r1031450909 (linear gradient)
- [ ] https://github.com/twbs/bootstrap/pull/38159 (
:hasselector) - [ ] https://mastodon.social/@patrick_h_lauke/110708951082107982 (
:hasselector +:focus-visible) - [x] https://github.com/twbs/bootstrap/issues/39705
- [ ] If Safari version >= 14.5 see https://github.com/twbs/bootstrap/pull/40844 via https://github.com/twbs/bootstrap/pull/37309/commits/e5fdf7f0edbf04a9d9c1c9f87f0ad6404cfcc810
- [ ]
gapof.nav-underline - [x] https://github.com/twbs/bootstrap/issues/41046
Type of changes
- [x] Breaking change (fix or feature that would change existing functionality)
Checklist
- [x] I have read the contributing guidelines
- [x] Run
npx update-browserslist-db@latestto update ourpackage-lock.json - [ ] Check if we don't need other features in a near future
- [ ] My change introduces changes to the documentation
- [ ] I have updated the documentation accordingly
- [ ] I have added tests to cover my changes
Hey there,
Bringing my stone up there. ~~It seems like Bootstrap already uses backface-visibility which is quite well supported apart from Safari. It seems like it was really well supported since last year (15.4) only. Should we drop the property, update the support, let it as-is as progressive enhancement ?~~
https://caniuse.com/mdn-css_properties_backface-visibility
EDIT: Should we try to introduce container media queries ? (https://caniuse.com/css-container-queries)
@louismaximepiton
It seems like it was really well supported since last year (15.4) only.
Your CanIUse link shows that backface-visibility has been supported with the -webkit- prefix since 2013, though? Bootstrap uses AutoPrefixer, so the prefixed version is automatically added into the built CSS. You can see that in action here for .carousel-item.
