Legacy Browser in Modern Web Framework

---

Hello Stackers, In this era, many modern web frameworks exist, but of course, we still encounter legacy browsers that still use the old requirement. So for that, developers sometimes have to also consider whether or not to allow legacy browsers to access our web or app.

example :

• Chrome 15 (yes, that’s old) – Works assuming you’re willing to give up on the following Svelte features:
  • svelte/animation – The flip animation requires that the style will have the property transformOrigin, which isn’t suppported (see caniuseit. We can try to patch Svelte to use webkit- prefix, but is it worth it?)
  • svelte/transition – For some reason I have encountered some “DOM Exception type 12” errors, don’t know (and not sure I want to know) how to fix it except not using transitions at all.
  • svelte/motion – Before chrome 24, there is no support both for window.requestanimationframe() and window.performance.now(). There are polyfills for both of them, but the latter use the precision of Date.now() that is awful (for example the counter component on the simple demo uses svelte/motion.spring, and because the precision it’s jumping crazy). For reference, the two polyfills are available here and here (the second one is actually ponyfill, meaning you’ll need to overwrite window.performance to be the value of the exported object there by yourself, see the manual there).

An old version of a Web browser possibly used by people who have not upgraded to the latest version.

Legacy Browser

In this case, an example of a modern frontend framework is Sveltkit. The Sveltekit update does not directly support legacy browsers, so we developers need to add it ourselves to our configuration.

import { sveltekit } from '@sveltejs/kit/vite';
import legacy from '@vitejs/plugin-legacy';

/** @type {import('vite').UserConfig} */
const config = {
	plugins: [
		sveltekit(),
		legacy({
			// For complete list of available options, see:
			// https://www.npmjs.com/package/@vitejs/plugin-legacy#Options
			targets: ['ie >= 11'],
			additionalLegacyPolyfills: [
				'custom-event-polyfill',
				'core-js/modules/es.promise.js',
				'whatwg-fetch',
				// 'global-this' should be used so 'regenerator-runtime' wouldn't do CSP issues
				'core-js/proposals/global-this',
				'regenerator-runtime/runtime',
				'unorm',
				'path-composedpath-polyfill',
				'proxy-polyfill/proxy.min.js'
			]
		}),
	]
};

export default config;

Okay that’s all folks, for the full docs please refer to here … cyaa…