As a front end attacker, browser compatibility is a must to face the problem, browser compatibility is ultimately caused by the inconsistency of the browser kernel, then what is the kernel? A developer writes code to a specification, and a browser developer develops something to render that code to a specification into a page, called an engine or a kernel.

Focus on

Browser kernel

Webkit(V8 engine) : Chrome, Opera, Safari, domestic browser and mobile

Gecko: Firefox

Trident: Internet Explorer, (The latest version of Internet Explorer is Edge)

Here is a dry list of how to distinguish the current browser kernel code:

H5 judgment

<! --[if IE6]> <! [endif]--> <! --[if LTE IE6]> IE6 and below is recognized <! [endif]--> <! --[if IE6]> IE6 <! [endif]--> <! --[if gte IE6]> IE6 or above is recognized <! [endif]--> <! --[if gt IE6]> <! [endif]--> <! --[if IE]> All IE recognized <! [endif]--> <! --[if !IE]><! --> < p style = "margin-bottom: 0pt; margin-bottom: 0pt; - <! [endif]-->Copy the code

Js judgment

// Use es6 syntax, do not support es6 editor remember Babel oh!
const IEVersion = () = > {
  const userAgent = navigator.userAgent; // Get the browser userAgent string
  const isIE =
    userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; // Check whether Internet Explorer <11
  const isEdge = userAgent.indexOf("Edge") > -1 && !isIE; // Check whether the Internet Explorer Edge browser is available
  const isIE11 =
    userAgent.indexOf("Trident") > -1 && userAgent.indexOf("The rv: 11.0") > -1;
  if (isIE) {
    const reIE = new RegExp("MSIE (\\d+\\.\\d+);");
    reIE.test(userAgent);
    const fIEVersion = parseFloat(RegExp["$1"]);
    if (fIEVersion === 7) {
      return 7;
    } else if (fIEVersion === 8) {
      return 8;
    } else if (fIEVersion === 9) {
      return 9;
    } else if (fIEVersion === 10) {
      return 10;
    } else {
      return 6; / / IE version < = 7}}else if (isEdge) {
    return "edge"; //edge
  } else if (isIE11) {
    return 11; //IE11
  } else {
    return -1; // Not Internet Explorer}};Copy the code

details

Speaking of here, friends should be roughly some browser compatibility issues to understand it! The following is a list of the browsers involved in each kernel:

Trident(IE kernel) :

Internet Explorer 6, Internet Explorer 7, Internet Explorer 8 (Trident 4.0), Internet Explorer 9 (Trident 5.0), Internet Explorer 10 (Trident 6.0), 360 Secure Browser (1.0-5.0 for Trident, 6.0 for Trident+Webkit, 7 for Trident+Blink) Cheetah Ultra Light Browser, 360 Ultra Fast Browser (7.5 before Trident+Webkit, 7.5 for Trident+Blink) Cheetah Secure Browser (1.0 to 4.2 for Trident+Webkit, 4.3 and later for Trident+Blink) Cheetah Ultralight Browser, Maxgame (Maxgame 1.x, 2.x for IE kernel, 3.x for IE and Webkit dual core), Baidu Browser (early version), Window of the World browser [2] (originally IE kernel, In 2013, Chrome+IE kernel was adopted, 2345 browser, Tencent TT, Taobao browser, collecting, editing and reading browser, Sogou High-speed browser (1. X is Trident, Trident+Webkit 2.0 and later), Alcloud Browser (earlier version), Rising Secure Browser, Slim Browser, GreenBrowser, Afan Browser (12 Previous versions), 115 browser, 155 browser, Flash Browser, N oxidation browser, Candy browser, Rainbow Browser, Shadow browser, Brave Unlimited browser, 114 browser, Ant browser, Feteng Browser, Speed Browser, Zorro browser, Dolphin Browser (iPhone/iPad/Android), UC Browser (Blink kernel +Trident kernel).

Gecko(Firefox Kernel) :

Mozilla Firefox, Mozilla SeaMonkey, WaterFox (64-bit open source version of Firefox), Iceweasel, Epiphany (early version), Flock (early version), K-Meleon. Presto(ex Opera kernel) (deprecated) :

The kernel used in Opera12.17 and earlier has been discontinued and deprecated.

Webkit(Safari kernel,Chrome kernel prototype, open source) :

Maxgame Browser 3, [1] Apple Safari (Win/Mac/iPhone/iPad), Symbian mobile browser, Android default browser.

Blink:

The rendering engine is a branch of the WebCore component of the open source WebKit engine and is available in Chrome (28 and later), Opera (15 and later) and Yandex browsers.

The above differences in the browser kernel only for understanding, what is wrong with welcome to correct! Feel good, welcome to leave a big thumbs up 👍! Thank you very much!