Front end: Compatibility with IE is not possible, not in this life


BOSS: I’ll give you a 50% raise


Front end: Internet Explorer is the best browser I’ve ever used (Sincere Face)

It’s heartbreaking when your webpage uses the latest popular technology (React, CSS3, ES6/7, etc.) and is required to be compatible with IE, but IE has been around for so long that it’s unrealistic to expect it to just disappear. So as a front end with (MEI) chasing (ban) chasing (FA) let’s look at compatibility with IE (IE11 is only considered here, other IE antique versions are advised to be abandoned).

React is one of the most popular and used front-end libraries for writing front-end pages, so we’ll focus on compatibility with IE11 in the React environment.

Use the highest version of Internet Explorer

React runs on browsers that support ES5 syntax, which requires Internet Explorer to be at least as old as Internet Explorer 9. Some Windows systems with lower versions of Windows will use the lower version of IE engine to render the page by default. If the page needs to run on the higher version of IE engine, you need to add the following code to the HTML page.

1
Copy the code
 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Copy the code

The page will then be loaded using the highest version of the IE engine on the system. More information can be found here.

ES 6/7

Now more and more web pages began to use ES6 syntax, ES6 compared with ES5 added a lot of new features and syntax sugar, reduce some of the original JS syntax confusion, make the code more concise, let JS developers more efficient.

React works on browsers that support ES5, including IE9 and IE10, but if you use the ES6/7 syntax, you’ll need to do a few extra things to make it compatible with IE11.

React Polyfill

Most React developers Create their projects using the Create React App, a Facebook React scaffolding tool that allows newcomers to quickly Create React projects.

The scaffolding repository contains some polyfills that make the React project work perfectly in Internet Explorer.

features

  • supportPromise.async/await
  • supportwindow.fetch
  • supportObject.assign
  • supportSymbol
  • supportArray.from

Using the step

  • throughnpm install react-app-polyfillInstall the polyfill
  • In the entry file (usually issrc/index.jsThe first line of) introduces the library
1
2
Copy the code
 
Import 'react-app-polyfill/ IE11 ';Copy the code

Read more here.

core-js

Even with React Polyfill, your project may not run on IE11 because React Polyfill does not support all ES6 syntax. In this case, we can choose another third-party library, core-js. In addition to the React Polyfill feature (window.fetch does not support it), the library also supports some common es6/7/8 apis, such as array.includes, string.includes, String. startsWith, etc., will work on browsers that do not support these features.

Using the step

  • throughnpm install core-jsCommand to install
  • In the entry file (usually issrc/index.jsThe first line of) introduces the library
1
2
Copy the code
 
// Import import 'core-js' on the first line of the file;Copy the code

Core-js contains most of React Polyfill’s functionality (except window.fetch), so it’s usually not necessary to use both libraries together, just core-js.

CSS variable

Variables are already included in many CSS preprocessors, such as Less and Sass. However, in the latest CSS syntax, variables can be used as follows:

One, two, three, four, five, six, sevenCopy the code
 
:root {
  --main-bg-color: brown;
}

.app {
  background-color: var(--main-bg-color);
}
Copy the code

Although Microsoft already supports CSS variables in the Edge browser, unfortunately, they are still not supported in IE11. To run code with CSS variables in IE11, we need to introduce the csS-vars-ponyfill library.

Method of use

  • First install the library by commandnpm install css-vars-ponyfill.
  • Then import the library in the entry file.
1, 2, 3, 4, 5, 6, 7, 8, 9Copy the code
 
import cssVars from 'css-vars-ponyfill'; // cssVars() is configured by default; CssVars ({// vars});Copy the code

Css-vars-ponyfill converts the CSS variables in the project to the corresponding variable values in IE11, so that the project with CSS variables can run in IE11.

Flexbox

The Flexbox flexible box layout has been around for a while and has been popular with front-end developers, and is slowly being adopted by other platforms such as React Native.

Flexbox is already supported by all browsers… Except FOR IE, IE only partially supports some bugs that cannot be fixed. For specific reasons, you Can refer to Can I Use.

So how do I run Flexbox properly in IE11? At this point we can use a few tricks to make our CSS special styles run only on IE.

In fact, there are CSS selectors for each browser to make CSS work only on the browser. For example, IE11’s special selectors look like this:

1
2
3
4
Copy the code
 
// IE11
_:-ms-fullscreen, :root .selector {
  property: value;
}
Copy the code

The CSS code in this selector will only work in IE11, not in other browsers.

There are also IE10 special selectors listed below:

1
2
3
4
Copy the code
 
// IE10
_:-ms-input-placeholder, :root .selector {
  property: value;
}
Copy the code

This allows us to fine-tune our Flexbox layout with some CSS code that only IE can run.

More information can be found here:

  • Separating Internet Explorer 10 and 11 via CSS Hacks
  • CSS3 Media Query to target only Internet Explorer (from IE6 to IE11+), Firefox, Chrome, Safari and/or Edge

conclusion

Articles from the HTML, JS and CSS aspects introduces how compatible IE11 browser, but here are just some problems often encountered by the author is introduced, actually in the process also compatible browser will encounter more complex scenarios, need according to the specific issues specific analysis, comments and hope to have the relevant experience of my classmates, thank you.