Add minimum browser versions to the documentation

[MrWaip]

Describe the problem

Hello.

We have encountered the fact that the documentation is not entirely clear what minimum browser versions svelte@5 requires.

I would like to understand what things need to be polyfilled on older versions of browsers.

For example, on 70 and 71 versions of Chrome, Svelte does not work because there is no queueMicrotask and getAnimations.

Describe the proposed solution

Supplement the documentation with information on browser support

Importance

would make my life easier

[flayks]

I agree it would be nice to have more informations about what modern means in terms of specs and versions. Although, who is using a 6yo version of Chrome? 😅

[harrisi]

getAnimations became generally available in March 2020. I'm not sure what other features would be more modern than that.

[MrWaip]

Chrome version 70 is a really old device, Android 9 approximately. It depends on the audience, where I work it is very broad. And there are users with old devices on which auto-updates are disabled because there is little memory on the device.

[kevinrenskers]

Safari 12 and 13 are not supported because of this: https://svelte.dev/docs/svelte/v5-migration-guide#Other-breaking-changes-Scoped-CSS-uses-:where(). Would be great to have this specifically mentioned in some kind of browser support table on the Svelte docs. And sadly this is something that cannot be polyfilled (AFAIK).

[stalkerg]

@kevinrenskers Safari 13 is 5 years old, what's the point? Base on stats is nobody use it.

[kevinrenskers]

That's not a reason to not mention which browsers are and which are not supported, no?

There are still companies out there who support older browsers. I work for one of them. It's very annoying to have to guess which browsers are supported by Svelte, which modern features it uses, what has to be polyfilled, etc.

The only thing that Svelte says about all this is that "all modern browsers i.e. not Internet Explorer" are supported. But that's just not true, or at least not specific enough. It really should have a proper list of minimum browser versions, and preferably with a list of specific things to polyfill to extend those versions further back.

[DjakaTechnology]

@kevinrenskers Safari 13 is 5 years old, what's the point? Base on stats is nobody use it.

Just gotten a bite on this. My use case is I'm using tauri which runs on system's webview. It runs on OS bundled safari version which is different than ones that updateable by user.

One of our users is still using old 2012 Macbook Pro, it can't be updated to newer OS so she's stuck with Catalina (2019). The app is unusable for this OS and would like to document it in our minimum app requirement.

In short, I just want to say, this minimum browser requirement documentation is very important for developers that's using Tauri to create desktop apps. atleast for now.

[mcuppi]

Svelte 5 uses private class fields and private class methods, so any browser that doesn't support them will throw a syntax error:

https://caniuse.com/mdn-javascript_classes_private_class_fields
https://caniuse.com/mdn-javascript_classes_private_class_methods

Chrome >= 84
iOS >= 15
Safari >= 15
Firefox >= 90

[kevinrenskers]

Svelte 5 uses private class fields and private class methods, so any browser that doesn't support them will throw a syntax error

My Svelte 5 site works perfectly fine in Safari 12 and 13. I did have to add the following to the html head:

<script src="https://polyfill-fastly.net/v3/polyfill.min.js?features=Promise.allSettled"></script>

I also added a build target of es2015 to my vite.config.js file, and I had to deal with Svelte 5's :where usage in CSS, which doesn't work in Safari 12 and 13. Inside of vite.config.js, inside of plugins, after sveltekit(), you need to add the following custom plugin:

{
  name: "strip-where-selectors",
  enforce: "post",
  transform(code, id) {
    if (id.endsWith(".css")) {
      return code.replace(/:where\((.+?)\)/g, "$1");
    }
    return code;
  },
  async generateBundle(_, bundle) {
    for (const [key, asset] of Object.entries(bundle)) {
      if (asset.type === "asset" && key.endsWith(".css")) {
        asset.source = asset.source.toString().replace(/:where\((.+?)\)/g, "$1");
      }
    }
  },
},

(See also my article about this: https://www.loopwerk.io/articles/2024/svelte5-safari12/)

So this is the kind of stuff that should be documented somewhere: what are the default supported browsers, how do you support older browsers, and what is the absolute minimum browser version then? It still boggles my mind that all that Svelte has to say is that "ancient" browsers don't work, and that's it.

[mcuppi]

I also added a build target of es2015 to my vite.config.js file

Right. That's why your site isn't throwing syntax errors—Vite (via esbuild) is transpiling the code. However, anyone using Svelte without another compiler (swc, esbuild, babel) won't be able to achieve the same result. They're going to need to deal with the browser support targets I originally specified.

[lennard14-cmd]

Enable Snapdragon Performance.txt