Update .browserslistrc

[julien-deramond]

Warning
Work In Progress

Description / Motivation & Context

Based on #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.0

These 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 60ff612 in this PR in order to do some BrowserStack testing.

See also https://github.com/orgs/twbs/discussions/37306

• Caniuse reference

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

• Caniuse reference

TODO: explain what values need to be changed
TODO: change values in .browserslistrc

xlink:href → href

See #39222

Breaking changes too important for now

• Dialog element
• gap property for flexbox
  • But what about

    bootstrap/scss/_nav.scss

    Line 147 in 42e99cc

    gap: var(--#{$prefix}nav-underline-gap);

Others

• https://github.com/twbs/bootstrap/pull/35857/files#r1031450909 (linear gradient)
• Fix selector for form floating background #38159 (:has selector)
• https://mastodon.social/@patrick_h_lauke/110708951082107982 (:has selector + :focus-visible)
• Flex gap #39705
• If Safari version >= 14.5 see Docs: Remove mention about Safari's limited support flexbox gap #40844 via e5fdf7f
• gap of .nav-underline
• Switch to using range context queries #41046

Type of changes

• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• Run npx update-browserslist-db@latest to update our package-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

[louismaximepiton]

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)

[voltaek]

@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.