Author: YJW

Background Management project Browser compatibility Overview

IE / Edge Firefox Chrome Opera 360 QQ
(Photo)360 browser (photo)QQ browser
IE10, Edge last 2 version last 2 version latest latest latest

Framework, configuration, and dependency libraries

Our background management system project is developed based on Ant Design framework and built with Ant Design Pro scaffolding. Therefore, according to the browser compatibility of Ant Design, it can fully support modern browsers, IE 11 and Edge. There will also be some support for IE 9/10.

For IE 9/10, we can solve some compatibility problems by polyfill.

Generally, this can be handled using babel-preset-env, but since our background project uses Umi, it can also be implemented directly by configuring Targets. The targets configuration automatically introduces polyfill and syntax conversion. The configured targets are merged to the default value, so there is no need to repeat the configuration.

export default { 
    targets: {
        ie: 9,}};Copy the code

As polyfill is used for grammar conversion, it should be noted that reference to dependent library must refer to local library instead of reference to external CDN, because external CDN is directly referenced without polyfill, which will result in ES6 grammar cannot be converted into ES5 grammar. IE 10 and below does not support or fully support ES6.

export default {
  externals: {
    // if is production externals react react-dom and bizcharts
    / /... (NODE_ENV === 'production'
    / /? { react: 'React', 'react-dom': 'ReactDOM', bizcharts: 'BizCharts' }
    / / : {}).}},Copy the code
<! DOCTYPE html><html lang="en">
  <head>
    <! -- < script SRC = "/ / gw.alipayobjects.com/os/lib/react/16.8.1/umd/react.production.min.js" > < / script > -- >
    <! -- < script SRC = "/ / gw.alipayobjects.com/os/lib/react-dom/16.8.1/umd/react-dom.production.min.js" > < / script > -- >
    <! -- < script SRC = "/ / gw.alipayobjects.com/os/lib/bizcharts/3.4.3/umd/BizCharts.min.js" > < / script > -- >
  </head>
  <body>
  </body>
</html>
Copy the code

Also, since IE 10 and below does not support ES6 syntax, we must refer to the dependent libraries with code that has been converted to ES5 syntax. By default, node_modules does not convert any libraries when the project is packaged, so if you have only the original ES6 version of library code, you can configure the project to convert the libraries when the project is packaged.

In our project, the two libraries soonCity and CN-Validator need to be converted. If the SAME ES6 syntax is used in other libraries during the development process, it can also be added to the extraBabelIncludes configuration.

export default {
  extraBabelIncludes: [
	path.resolve("node_modules/sooncity/src"),
    path.resolve("node_modules/cn-validator/lib")]}Copy the code

Note: webGL is not supported by IE 10 or later. Dynamic loading of UMi-plugin-react dVA is not supported by IE 10 or later. If dynamic loading is configured, the browser will report an error.

There is no solution to this problem. You can refer to thisISSUEKeep tracking.

Therefore, if you want to achieve IE 10 compatibility of the browser, you can only disable dVA dynamic loading

export default {
  plugins: [
    'umi-plugin-react',
    {
      dva: {
        dynamicImport: undefined,}}]};Copy the code

Finally, you need to pay attention to the version of the dependent library. Some of the dependency libraries are optimized for browser compatibility issues in the new version, which is very convenient for us to develop.

  • Antd: Update to 3.25.3 or later is recommended
  • Umi: You are advised to upgrade to 2.12.5 or later

If the package-lock.json file of the project is not submitted to git repository, the dependency package version may be uncontrollable during online compilation and deployment. You are advised to remove package-lock.json from.gitignore and submit it.

Second, code compatibility optimization

During the development process, you can pay attention to the details of the code to ensure browser compatibility. Here are some common problems:

Regular expression

Modern browsers like Chrome/FireFox support ES6 syntax and therefore support regular expressions when building RegExp, such as:

console.log("1 + 2".replace(new RegExp(/ \ + /.'g'), ' '));
Copy the code

But for IE, this is not supported, can be changed to the following:

console.log("1 + 2".replace(new RegExp(\ \ "+".'g'), ' '));
console.log("1 + 2".replace(/\+/g.' '));
Copy the code

ScrollBar

Browsers with different kernels, such as Internet Explorer, Chrome, and FireFox, have different ways to write scroll bars and support different properties. The basic writing is as follows:

/* Chrome */ /* scrollbar */ :-webkit-scrollbar {width: 4px; height: 4px; background-color: transparent; } /* webkit-scrollbar-track {background-color: transparent; border-radius: 4px; } /* Define slider */ :-webkit-scrollbar-thumb {background-color: green; border-radius: 24px; } /* The scrollbar button (up and down arrows) */ ::-webkit-scrollbar-button{} /* The scrollbar has no track part of the slider */ ::-webkit-scrollbar-track-piece {} /* */ :-webkit-scrollbar-corner {Copy the code
/* FireFox */ / scroller {width: thin; width: thin; Auto/thin/None scrollbar-color: #0A4C95 #C2D2E4; // Slider color slider color}Copy the code
/* IE */ /* scroller {scrollbar-arrow-color: #f4ae21; // Scrollbar-face-color: #333; // Scrollbar-3dlight-color: #666; // Scrollbar-highlight-color: #666; // Scrollbar-shadow-color: #999; // Scrollbar -darkshadow-color: #666; // Scrollbar-track-color: #666; // Scrollbar-base-color :#f8f8f8; } /* Controls the behavior of the scrollbar when the contents of the element overflow. The options are as follows: */ /* auto: the initial value is equivalent to inherit */ /* scrollbar: Scroller {-ms-autohiding-scrollbar; -ms-overflow-style: scrollbar; }Copy the code

Note: IE Edge has removed the non-standard CSS property configuration associated with the scrollbar in older versions of IE, so no scrollbar property changes can be made.

When dealing with scrollbar style, there is also the problem of scrollbar width and height uncertainty. This is where we can use vw over Vh and %. When width: 100vw is assigned, the resulting width includes the scroll bar width, while width: 100% does not. Using the appropriate notation at the right time, or calculating the difference between the two, will help us develop the desired style.

gradient

The gradient attribute of CSS3 is invalid in IE 9 and below, you can add the gradient effect through IE filter:

.button { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); // Compatible WITH IE 9 BACKGROUND: -moz-Linear-gradient (top, #000000 0%, # FFFFFF 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%); background: -o-linear-gradient(top, #000000 0%,#ffffff 100%); background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%); background: linear-gradient(to bottom, #000000 0%,#ffffff 100%); }Copy the code

Modern browsers like Chrome/FireFox support ES6 syntax and therefore support regular expressions when building RegExp, such as:

console.log("1 + 2".replace(new RegExp(/ \ + /.'g'), ' '));
Copy the code

Display: Flex layout is not supported in IE 9 or later. You need to use a different style to get around this problem. Cross-domain requests Internet Explorer 9 and later do not support cross-domain requests with headers. You can avoid this problem by other means, such as server-side rendering. Placeholder IE 9 and below don’t support/tag attributes. You can achieve placeholder -like effects by configuring value and listening for Focus and Blur events.

Text overflow

IE/Firefox does not support automatic inheritance of TEXT-overflow: Ellipsis. You need to configure this element.

.button { display: block; max-width: 116px; height: 32px; text-overflow: ellipsis; -ms-text-overflow: ellipsis; overflow: hidden; > span { display: block; max-width: 116px; text-overflow: ellipsis; -ms-text-overflow: ellipsis; overflow: hidden; }}Copy the code

Drag and drop event

IE use dragEvent. DataTransfer. SetData method, the key must be ‘Text’, for there is no limit to the other browsers.

dragEvent.dataTransfer.setData('Text'.JSON.stringify(model))
Copy the code

File to read

IE does not support the readAsBinaryString method of FileReader. If the front end needs to read data from non-text files, you can use readAsArrayBuffer instead and convert the arrayBuffer.

if(! FileReader.prototype.readAsBinaryString) { FileReader.prototype.readAsBinaryString =function (fileData) {
    var binary = ' ';
    var pt = this;
    var reader = new FileReader();
    reader.onload = function (e) {
      var bytes = new Uint8Array(reader.result);
      var length = bytes.byteLength;
      for (var i = 0; i < length; i++) {
          binary += String.fromCharCode(bytes[i]);
      }
      if(pt.target) {
        pt.target.result = binary
      } else {
        pt.target = { result: binary }; } pt.onload(pt); } reader.readAsArrayBuffer(fileData); }}Copy the code

Style to write

If we want to assign style to an element, IE will report that it is not allowed to assign read-only attributes in strict mode. You can solve the problem in the following ways:

ele.style = 'height: 6px; width: 200px; ' In strict mode, ele.style is considered read-only.

ele.style.height = '6px' // Write it correctly, assigning a value to a style
ele.className = 'classA' // Write the style to be overwritten under a class name
Copy the code