diff --git a/.browserslistrc b/.browserslistrc index 372fa796cb..89e713146d 100644 --- a/.browserslistrc +++ b/.browserslistrc @@ -1,20 +1,34 @@ # https://github.com/browserslist/browserslist#readme # # Each floor is set by the newest platform feature v6 already requires, since -# the floor has to hold for the whole 6.x line: +# the floor has to hold for the whole 6.x line — we cannot raise it in a minor. +# Versions below are from MDN's browser-compat-data, not from memory; re-query +# it when adding a feature rather than assuming caniuse tracks it (it does not +# track @property, @starting-style or transition-behavior at all). # -# light-dark() Chrome 123, Edge 123, Safari 17.5 — the color system resolves -# every theme decision through it, and color-mix(), with no -# fallback, so below it dark mode simply does not work. -# :has() Firefox 121 — validation and focus states on Multi Select and -# Autocomplete, the sidebar navigation indicators, calendar -# ranges and the rating icons are selected with it. An -# unsupported :has() invalidates the entire rule it appears in, -# so this is not a graceful degradation. +# Feature Sets the floor for Used by +# ------------------------- ------------------- ------------------------------ +# light-dark() Chrome 123 every theme decision resolves +# Safari/iOS 17.5 through it, with no fallback +# @starting-style Firefox 129 Menu's entry animation +# transition-behavior: Firefox 129 the same rule +# allow-discrete +# @property Firefox 128 `inherits: false` on the nine +# utility custom properties; the +# colour and opacity utilities +# leak into descendants without it +# :has() Firefox 121 validation and focus states, +# sidebar indicators, calendar +# ranges, rating icons +# +# :has() no longer sets the Firefox floor — @property and @starting-style +# arrived after this file was first written and both sit above it. @property is +# the one that matters: an unsupported @starting-style only drops an animation, +# but an ignored `inherits: false` is a live bug. # # Declaring anything lower would be fiction; raising it further is a product -# choice we have not made. The JS floor rides along (everything the sources use -# is older than this line). +# choice we have not made. Upstream Bootstrap v6 sits at Chrome 130 / Firefox 132 +# / Safari 18, so this line stays more permissive than theirs. # # Run `npx browserslist --coverage` after any change and update the figure on # the browsers & devices docs page. @@ -25,7 +39,7 @@ unreleased versions Chrome >= 123 Edge >= 123 -Firefox >= 121 +Firefox >= 129 iOS >= 17.5 Safari >= 17.5 diff --git a/docs/src/content/docs/getting-started/browsers-devices.mdx b/docs/src/content/docs/getting-started/browsers-devices.mdx index 8876f5764b..8016799d48 100644 --- a/docs/src/content/docs/getting-started/browsers-devices.mdx +++ b/docs/src/content/docs/getting-started/browsers-devices.mdx @@ -10,8 +10,8 @@ CoreUI for Bootstrap supports the **latest, stable releases** of all major brows Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform's web view API, are not explicitly supported. However, CoreUI for Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below. The floor is set by the platform features v6 depends on, with no fallbacks -shipped: **Chrome 123, Edge 123, Firefox 121, Safari 17.5 and iOS 17.5**. -Together with the evergreen lines below, this covers about 87% of global usage +shipped: **Chrome 123, Edge 123, Firefox 129, Safari 17.5 and iOS 17.5**. +Together with the evergreen lines below, this covers about 86% of global usage as measured with `npx browserslist --coverage`. Each floor is set by the newest feature v6 already requires, because the floor @@ -20,11 +20,20 @@ has to hold for the whole 6.x line: | Feature | Sets the floor for | | --- | --- | | `light-dark()` | Chrome and Edge 123, Safari and iOS 17.5 — every theme decision resolves through it, and `color-mix()`, with no fallback | +| `@starting-style`, `transition-behavior: allow-discrete` | Firefox 129 — the Menu's entry animation | +| `@property` | Firefox 128 — `inherits: false` on the colour and opacity utilities' custom properties | | `:has()` | Firefox 121 — validation and focus states on Multi Select and Autocomplete, the sidebar navigation indicators, calendar ranges and the rating icons are all selected with it | -A browser below the floor does not merely lose polish: an unsupported -`:has()` invalidates the whole rule it appears in, and unresolved -`light-dark()` leaves colors unset. +A browser below the floor does not merely lose polish. An unsupported `:has()` +invalidates the whole rule it appears in, and unresolved `light-dark()` leaves +colors unset. `@property` is the quietest of the three and the one worth +knowing about: without it the registrations are ignored, custom properties +inherit again, and a colour or opacity utility on a container tints everything +nested inside it. + +Versions come from MDN's browser compatibility data. Note that caniuse does not +track `@property`, `@starting-style` or `transition-behavior` at all, so +`browserslist "supports …"` cannot answer for them. You can find our supported range of browsers and their versions [in our `.browserslistrc` file](https://github.com/coreui/coreui/blob/main/.browserslistrc): @@ -35,7 +44,7 @@ unreleased versions Chrome >= 123 Edge >= 123 -Firefox >= 121 +Firefox >= 129 iOS >= 17.5 Safari >= 17.5 diff --git a/docs/src/content/docs/migration/v6.mdx b/docs/src/content/docs/migration/v6.mdx index f40a5f8076..7f5e3ee30c 100644 --- a/docs/src/content/docs/migration/v6.mdx +++ b/docs/src/content/docs/migration/v6.mdx @@ -42,9 +42,13 @@ description: "Track and review changes to the CoreUI for Bootstrap source files, Breaking -**The minimum supported browsers are now Chrome 123, Edge 123, Firefox 121, +**The minimum supported browsers are now Chrome 123, Edge 123, Firefox 129, Safari 17.5 and iOS 17.5.** `light-dark()` sets the Chrome/Edge/Safari floor; -`:has()` sets Firefox 121, since validation and focus states on Multi Select, +`@starting-style` and `transition-behavior: allow-discrete` set Firefox 129 (the +Menu's entry animation) and `@property` needs 128 — its `inherits: false` +registrations are what stop the colour and opacity utilities leaking into +descendants, so an older Firefox does not lose an animation, it gets a bug. +`:has()` sets a lower bound of Firefox 121, since validation and focus states on Multi Select, Autocomplete and the pickers, the sidebar navigation indicators, calendar ranges and the rating icons are all selected with it — and an unsupported `:has()` invalidates the entire rule it appears in. This is the floor the v6 color system already required in practice: