Determine browser minbar for v9 from current master

[ling1726]

We need to determine what the minimum browser version minbars are for Fluent UI v9. This will involve going through our code base and the codebases of all v9 dependencies and analyze:

• ECMAscript syntax and APIs
• Browser platform APIs (i.e. ResizeObserver, MutationObserver, CustomEvent)
• CSS APIs

We can use https://caniuse.com/ to check what are the oldest versions for each of our supported browsers that we can use.

If possible, try to do this with automation so that we can regularly check what our minbar is and if we ever exceed it by accident. Typescript lib.dom types are tied with ecmascript versions which is not a completely accurate mapping to browser supported features.

[Hotell]

Most preferable is to have one source of truth for customers and us(tooling), so all of this is done automatically.

We can/should leverage browserlist:

1. query by browsers: https://browserslist.dev/?q=bGFzdCA0IHZlcnNpb25zLCBub3QgZGVhZCwgbm90IGllIDEx
2. query by features: https://browserslist.dev/?q=c3VwcG9ydHMgZXM2LW1vZHVsZSBhbmQgc3VwcG9ydHMgcmVzaXplb2JzZXJ2ZXIgYW5kIHN1cHBvcnRzIGN1c3RvbWV2ZW50IGFuZCBzdXBwb3J0cyBtdXRhdGlvbm9ic2VydmVyIGFuZCBzdXBwb3J0cyBvYmplY3QtZW50cmllcyBhbmQgc3VwcG9ydHMgcHJlZmVycy1jb2xvci1zY2hlbWUgYW5kIHN1cHBvcnRzIGZsZXhib3gtZ2FwIGFuZCBzdXBwb3J0cyBjc3MtbG9naWNhbC1wcm9wcyBhbmQgc3VwcG9ydHMgY3NzLW5vdC1zZWwtbGlzdCBhbmQgc3VwcG9ydHMgY3NzLXZhcmlhYmxlcw%3D%3D
   • ❤️ this is quite excellent as we can query by API features rather than just browsers !
   • only limitation at the moment is that the supports query doesn't support all types (like https://caniuse.com/mdn-javascript_operators_optional_chaining) - but it can be extended on our part ✅

Desired outcome should look something like this:

MUI approach:

source: https://mui.com/getting-started/supported-platforms/

• additional bonus is having that browserlist spec if consumer needs to do more deep dive regarding browser support

Carbon

source: https://github.com/Sage/carbon#browser-support

Antd

https://ant.design/docs/react/introduce#Environment-Support

Vuetify

https://vuetifyjs.com/en/getting-started/browser-support/

[Hotell]

CSS support:

autoprefixer can handle some fallbacks automatically without significant perf bottleneck (although shipping bigger CSS chunks) to consumers via standard CSS "last definition wins" approach.

This has limitations of course.

some css API's cannot be "polyfilled" , to name a few that we use/might use:

• Flex box gap
• at rules
• media queries with selectors like prefers-color-scheme
• pseudo selectors (:not ) https://developer.mozilla.org/en-US/docs/Web/CSS/:not
• CSS variables