[material-ui] Update browser supports in v6 about material-ui HOT 12 OPEN

I don't think we need this issue as an umbrella, we should rather have

@DiegoAndai It can make sense but I think we also need to know the full picture of v6 browser support. I needed this issue to know if my comment in #40258 (comment) is right or wrong. We can't make a tradeoff on the supported versions with each browser in isolation, it's the whole that matters since developers ship the same JavaScript file for all their clients.

The v6 brainstorm list idea was moved here and linked in the #30660 issue. Some of these already have github issues that are included in the v6 milestone (for example #30671, #32546) but not all yet.

Alright, let's get this list to GitHub, the sooner the better. I created a new one: #40960.

from material-ui.

Depending on the browsers we drop support for, we might no longer need the @babel/runtime transpilation util.

For example #41071 that needs it for the spread operator for IE 11 partial support https://caniuse.com/?search=spread%20operator

from material-ui.

It would be great to define right now what's going to be Material UI v6 browser support so that MUI X v7 @flaviendelangle @cherniavskii @DiegoAndai can make the corresponding breaking changes, we would eventually be in sync in the BC slots of 2024.

So far, I'm only aware of:

• IE 11 will be removed
• CSS flex gap -> we need to bump to Firefox 78, Chrome 91, Safari 14.1

The main difference would be the Safari bump from 12.5, released around 2019 to 14.1 released in Apr 29, 2021.

But is this wise? I guess Safari is the bottleneck, so it's about checking the release notes of Safari: https://webkit.org/blog/category/news/ to find more constraining limits 🤔:

• Safari 17.0: CSS popup, more CSS display: contents fixes,
• Safari 16.5: CSS selector nesting,
• Safari 16.4: CSS :dir(ltr), Media Queries level 4, Custom CSS properties, Fix outline + border radius
• Safari 16.2: CSS color-mix
• Safari 16.0: CSS container query, CSS Subgrid, CSS has(:target), CSS display: contents
• Safari 15.4: CSS has support, CSS svw unit, CSS :focus-visible.
• Safari 15.0: CSS aspect ratio

Looking at the use of Safari out there, it seems that we could go up to have Safari 16.0 as the minimum version (released Sep 12, 2022), per https://caniuse.com/css-container-queries, the % of browsers left on the side looks within what's acceptable.

Should we go higher? Unclear. color-mix looks pretty cool to significantly reduce the number of CSS variables, but maybe for Material UI v7.

from material-ui.

Maybe it could be:

• Material UI v6: Safari v15.4 to get :focus-visible
• Material UI v7: Safari v16.2 to get color-mix

Sounds good to me 👍🏼

from material-ui.

We discussed with the Core styled team today, and we settled on Safari v15.4 for v6 👍🏼

For v7, Safari v16.2 is the initial idea, but we'll have to discuss further with the Base UI team when work for that version starts.

from material-ui.

BTW, we have a .browserslistrc file in the repo, is it actually being used?
Should we bump the browsers version there?

from material-ui.

Hey, @oliviertassinari! This is considered for v6 👍🏼. I don't think we need this issue as an umbrella, we should rather have:

• One for IE (#14420, already included in the v6 milestone)
• One for Safari
• One for this idea: "With the update of the default browsers, we can likely remove all of this normalization logic... (link)"

Do you agree? I can create the missing ones

The v6 brainstorm list idea was moved here and linked in the #30660 issue. Some of these already have github issues that are included in the v6 milestone (for example #30671, #32546) but not all yet. This was done to make the #30660 issue more concise.

from material-ui.

• A requirement: we probably want to make sure we can use flex gap, e.g. https://github.com/mui/mui-x/pull/11529/files#diff-47ba3ae9e7d214448776b30bfed8130d9cae1a144ee7a768f1ba771f75386d94R67

from material-ui.

We'll need color-mix for Material Design 3 (Material UI v7, Q4 2024). We had to use it already in material-next, so we must update to at least 16.2 by v7. Would it be better to stop at 14.1 in v6 or go straight for 16.2? Does MUI X have any requirements for the Safari version?

I added this topic for the next Material UI meeting, which is next Tuesday 27; let me know if we need an answer sooner than that.

Can I Use usage table

from material-ui.

Material UI v7, Q4 2024

@DiegoAndai Today, Safari v16.2 feels a bit borderline, 3% of global usage would be missing:

but 2024 Q4, this sounds ok.

Maybe it could be:

• Material UI v6: Safari v15.4 to get :focus-visible
• Material UI v7: Safari v16.2 to get color-mix

from material-ui.

Does MUI X have any requirements for the Safari version?

We have one :focus-visible that is already in production 😬

from material-ui.

imho, 15.4 is a bit too radical for v6, given both latest ReactNative & Expo have iOS 13 as the minimum.
The idea to use mui'd be harder to sell to clients within web-based apps react-native-webview.

Targeting iOS 14 for V6 makes more sense for the case above, as the to-be-released Expo v51 probably would start to target iOS 14 also.

EDIT: if MUI starts targeting iOS 15.4 as the minimum, it'd be great to have a list of specific iOS >=15.4 features you plan to use, so any mui's user could attempt to polyfill them.

from material-ui.