X-UA-Compatibles

Today, looking at Jingdong page code, we found the X-UA-Compatibles this meta-information attribute, not very clear, Baidu a little, to do the next record

X-UA-Compatible attribute is a characteristic of IE browser IE8 began offering a version that allows developers to specify document mode IE browser to use when parsing the page by setting the meta tags.

Popular speaking, IE browser version simulate this label can be achieved.

First of all, we have to understand, through the X-UA-Compatible properties can only emulate older version than the current version, can not simulate high version.

Secondly, we have to understand IE document mode several points.

Quirks Mode
IE7 mode
IE8 mode
IE9 mode
IE10 fashion
IE11 mode

IE7 or later has the same name as a document mode, while IE6 and IE6 The following is only one mode, called "Quirks Mode". It was translated into quirks mode, what is important, we know that this is essentially equivalent to the analog to IE6, IE5 because more than IE6 browser prehistoric modern humans basically can not find people still in use.

X-UA-Compatible tag syntax

The first, directly specify a version of IE standard document mode.

The following is an example of an analog IE8 requirements:

(Note: this, IE6 is invalid in IE7, because the X-UA-Compatible is IE8 support only)

The following is an example of an analog IE9 requirements:

(Note: This is not only in IE7, IE6 is invalid, it is also invalid in IE8, because they can not simulate higher than the current version)

Second, specify a version of IE, but allow exceptions.

IE version number plus the front Emulate, on behalf of, the beginning of the page if there <! DOCTYPE> tag on the use of the version of the standard document IE mode, otherwise the odd mode (i.e. equivalent IE = IE5)

The following is an example of an analog IE8 requirements:

The example code, if the beginning of your page with <! DOCTYPE> tag, the simulation IE8, is equivalent to:

If at the beginning of your page is not <! DOCTYPE> tag, the analog IE6, equivalent to:

We do not recommend using this syntax.

Third, always use the latest version of the document mode.

The following are examples:

According to the code example, IE browser will always use the latest version of the document mode, such as IE8 document mode is accessed by IE8, IE9 is the access mode with IE9, IE10 mode is accessed with IE10, IE11 mode is accessed with IE11.

Note: This declaration is not superfluous, if you do not use IE = edge mark, IE browser will be based on your web page content using compatible view, may adopt earlier.

Unless not going to be compatible with all legacy IE, otherwise it is not recommended to use this syntax.

In addition to standard usage, there are some special uses, such as:

This code means that, if the Google Chrome Frame (Google Chrome Frame) installation using Google browser kernel mode, otherwise use the latest IE mode.

Cross-compatible versions of IE ideas

As described above, X-UA-Compatible only simulate mounted lower than the current version, you can not simulate later. According to this feature, compatible with the following ideas.

If we are going down to compatible IE8, then we should add pages marked in advance:

Web page HTML / CSS / JS code compatibility processed in the browser IE8 document mode, do not use more than IE8 document mode features.

So, we only need to maintain a IE8 compatible code, and whether the user is in IE9 / IE10 / IE11 access are the same as IE8 access. (To be down to IE9 or IE10 are compatible and so on.)

Then add the following versions upgrade to IE8 old IE browser prompts, or jump to upgrade tips IE browser page, such as the X-UA-Compatible Code added:

The absence of exceptional circumstances, due to the following versions of IE11 has stopped updating, either the user or from the security point of view, we should not re-IE11 compatible with the following versions of the code from the workload.

In this case, we can use the following tag:

Then add the following versions upgrade to IE11 older versions of IE browser tips, or jump to the IE browser upgrade prompt page, add in the X-UA-Compatible Code:

(IE10 if IE does not support the statement, but @cc_on IE10 and is more specific to older versions of IE conditional compilation statements, and therefore can be used to determine whether, among other IE version of IE11.)

Dual-core browser compatibility ideas

Most of the domestic browser with IE kernel and Chromium core, dual-core browser automatically select the kernel based on the page content when a user accesses the page. However, dual-core browser also provides a meta tag similar to the X-UA-Compatible characteristics, allowing web developers selected by marking the kernel.

First, the kernel using Chromium (speed mode)

Second, the use IE 8/9/10/10 core (IE standard mode, the support portion HTML5)

Third, the use IE 6/7 core (IE compatibility mode is not supported HTML5)

If the site using the latest CSS3 / write HTML5, then we should make use Chromium kernel (ie Webkit core) rendering.

code show as below:

The first line 360 acting on the browser, QQ browser binuclear other domestic browser, the browser acting on the second row of other dual-core.

If the site is better in IE effect, then, we may ask them to use the IE rendering standard kernel.

code show as below:

In fact, since IE11 following versions have been stopped updating, most of the front-end open source projects are no longer compatible with the following IE11 legacy IE. Down to IE8 compatible version of the site has very few, compatible with IE7 / IE6 is almost extinct.

However, even if only a sparse few older versions of IE users visit the site each day, we should not let him see a garbled screen. Face still using older versions of IE users, we can prompt friendly upgrade your browser and visit.

By following code when the user has stopped using the updated IE10 or older versions of IE to access the site will automatically jump to the browser upgrade page:

In summary, we offer the following three code examples.

Example 1: suitable for optimized site for a specific IE version.

Sample scenario: the site is optimized for IE9, IE9 uses the default standard document mode IE10 / IE11 and dual-core browser. The IE8 and below the IE browser to visit the page jump to upgrade tips.

code show as below:

Example Two: Appropriate for optimized HTML5 but more user-friendly website for a specific IE version.

Sample scenario: the site is optimized for IE9, Chrome but better access effect, using the default Chrome core dual-core browser access, priority to IE9 standards document mode IE10 / IE11 access. The IE8 and below the IE browser to visit the page jump to upgrade tips.

code show as below:

Example Three: Microsoft still supports only support and update of IE11 browser.

Sample scenario: Microsoft has stopped taking into account the updated version of IE10 and lower IE, for an improved user safety and a better experience, no longer support older IE. When using the default Chrome core dual-core browser access, jump to the page when prompted to upgrade the older version of IE IE11 access.

(@Cc_on old IE is IE10 and more specific conditional compilation statements can be used to determine whether the inter IE11 IE version.)

code show as below:

X-UA-Compatible tag syntax

Cross-compatible versions of IE ideas

Dual-core browser compatibility ideas

Guess you like