feat(browserlist): Browserlist updated

[louismaximepiton]

Note: Please transform - [ ] into - (NA) in the description when things are not applicable

Related issues

NA

Description

Update the browserlistrc.

Result of the browserlist support for Africa can be seen here: https://browsersl.ist/#q=%23+https%3A%2F%2Fgithub.com%2Fbrowserslist%2Fbrowserslist%23readme%0A%0A%3E%3D+0.5%25%0Alast+2+major+versions%0Anot+dead%0AChrome+%3E%3D+120%0AFirefox+%3E%3D+121%0AFirefox+ESR%0AiOS+%3E%3D+15.6%0ASafari+%3E%3D+15.6%0Anot+Explorer+%3C%3D+11%0ASamsung+%3E%3D+23&region=alt-af ~ 96.1% coverage

Result of the browserlist support for Europe can be seen here: https://browsersl.ist/#q=%23+https%3A%2F%2Fgithub.com%2Fbrowserslist%2Fbrowserslist%23readme%0A%0A%3E%3D+0.5%25%0Alast+2+major+versions%0Anot+dead%0AChrome+%3E%3D+120%0AFirefox+%3E%3D+121%0AFirefox+ESR%0AiOS+%3E%3D+15.6%0ASafari+%3E%3D+15.6%0Anot+Explorer+%3C%3D+11%0ASamsung+%3E%3D+23&region=alt-eu ~ 92.3% coverage

Motivation & Context

So mainly, the browserlist that we have, will embed these new features. I took into account that the release v1 won't happen before 6month, so the browserlist here take this into account. So browsers exposed here will be more used until then.

This list is based on cross searches done on https://caniuse.com/, https://developer.mozilla.org/, https://www.browserstack.com/, and https://webstatus.dev/?q=baseline_date%3A2023-01-01..2023-12-31&num=100. Furthermore,, the base list was based on age of browsers (around end of 2023) and features that we already needed in our recent development.

New features

New features (compared to Boosted) fully supported, available with the proposed browserlist that might be useful for us.

Feature	Language
:has()	CSS selector
New color spaces: lch() oklch() oklab() lab()	CSS functions
inert	HTML attribute
:nth-child()	CSS selector
mask-image	CSS property
:autofill	CSS pseudo class
@layer	CSS media query
:modal	CSS pseudo class
sv, lv, dv units	CSS units
transform3D(), transform function rotate(), translate(), ...	CSS functions
navigator.locks	JS API
<dialog>	HTML tag
:focus-visible	CSS pseudo class
structuredClone()	JS function
Array.at()	JS function
Array.findLast(), Array.findLastIndex()	JS function
::backdrop	CSS pseudo-element
@media with a dynamic range	CSS media query
hardwareConcurrency()	JS function
@media prefers-contrast	CSS media query
scroll-behavior	CSS property
Streams	JS Object
String.at	JS function
color()	CSS function
dirname	HTML attribute
MathML	HTML/CSS
display can take two values	CSS property
<translate>	HTML tag
:is()	CSS selector
gap is now supported everywhere	CSS property
:where()	CSS selector
:default	CSS pseudo class
inline-size	CSS property
ARIA reflection	JS Element API (https://www.w3.org/TR/wai-aria-1.2/#accessibilityroleandproperties-correspondence)

Things that are available but I can't see any applications right now.

Feature	Language
NumberFormatv3	JS
create Stylesheets in JS	JS

Features that we might consider if we update our browserlist:

Baseline 2023

Feature	Language	Blocking browser(s)
@container queries	CSS queries	Safari 16.0
color-mix()	CSS function	Safari 16.2
CompressionStream	JS Object	Safari 16.4
sin(), cos(), tan(), ... and sqrt(), pow(), log(), exp(), hypot()	CSS functions	Samsung 25
CSS nesting	CSS	Safari 17.2
loading="lazy" for iframes	HTML attribute	Safari 16.4
document.requestStorageAccess()	JS function	Samsung 25
clip-path: fill-box	CSS property value	Samsung 25
@media with a range inside	CSS media query	Safari 16.4
:dir() with ltr or rtl	CSS pseudo class	Safari 16.4, Samsung 25
cap unit	CSS unit	Safari 17.2, Samsung 25
<search> tag	HTML tag	Safari 17.0, Samsung 25
lh and rlh unit	CSS unit	Safari 16.4
animation-composition	CSS property	Safari 16.0
@media for overflow	CSS media query	Safari 17.0
image-set	CSS property	Safari 17.0
slot assignment	JS function	Safari 16.4
URL.canparse()	JS function	Safari 17.0, Samsung 25
:user-valid and :user-invalid	CSS pseudo class	Safari 16.5, Samsung 25
subgrid	CSS property	Safari 16.0, Samsung 24
hyphens	CSS property	Safari 17.0
@media scripting	CSS media query	Safari 17.0, Samsung 25
@media update screen frequency	CSS media query	Safari 17.0
screen.orientation	JS API	Safari 16.4
e, pi, and infinite	CSS calc keywords	Safari 16.0
<imagesrcset>	HTML tag	Safari 17.2

Baseline 2024

Feature	Language	Blocking browser(s)
:state	CSS pseudo class	Chrome 125, Safari 17.4, FF 126, Samsung 27

Baseline 2025

Feature	Language	Blocking browser(s)
<popover>	HTML tag, JS API	Safari 17.0, Firefox 125

Other

Feature	Language	Blocking browser(s)
contain	CSS	Safari 16.0
@media forced colors	CSS media query	Safari 16.0
overflow: clip	CSS property value	Safari 16.0
overscroll-behavior	CSS property	Safari 16.0
@media the screen resolution	CSS media query	Safari 16.0
Array.isSorted(), ...	JS functions	Safari 16.0

Types of change

• Refactoring (non-breaking change)

Live previews

Checklist

Contribution

• I have read the contributing guidelines

Accessibility

• My change follows accessibility good practices; I have at least run axe

Design

• My change respects the design guidelines defined in Orange Design System
• My change is compatible with a responsive display

Development

• My change follows the developer guide
• I have added JavaScript unit tests to cover my changes
• I have added SCSS unit tests to cover my changes

Documentation

• My change introduces changes to the documentation and/or I have updated the documentation accordingly

Checklist (for Core Team only)

• My change introduces changes to the migration guide
• My new component is well displayed in Storybook
• My new component is compatible with RTL
• Manually run BrowserStack tests
• Manually test browser compatibility with BrowserStack (Chrome >= 60, Firefox >= 60 (+ ESR), Edge, Safari >= 12, iOS Safari, Chrome & Firefox on Android)
• Code review
• Design review
• A11y review

After the merge

• Manually launch Percy tests

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	4b4e66e
🔍 Latest deploy log	https://app.netlify.com/projects/boosted/deploys/684fbf2a2300260008feacb4
😎 Deploy Preview	https://deploy-preview-2929--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[MaxLardenois]

Nice work on the documentation of new/potential features