IE10/11 3 solutions that do not support conditional annotations

The conditional annotations (Conditional comments) for IE are designed specifically for IE browsers, which are not recognized by other browsers at all. Use conditional comments to differentiate between code that writes CSS for browsers.

<!--[If ie]>
<link href= "Ie.css" rel= "stylesheet" >
<! [endif]-->
<!--[If ie6]>
<style type= "Text/css" >
/* Styles for IE6 goes here * *
</style>
<! [endif]-->
<!--[If Lt ie7]>
<style type= "Text/css" >
/* Styles for IE7 goes here * *
</style>
<! [endif]-->
<!--[If LTE ie8]>
<style type= "Text/css" >
/* Styles for IE8 goes here * *
</style>
<! [endif]-->
<!--[If GT ie9]>
<style type= "Text/css" >
/* Styles for IE9 goes here * *
</style>
<! [endif]-->
<!--[if GTE ie9]>
<style type= "Text/css" >
/* Styles for IE9 goes here * *
</style>
<! [endif]-->
<!--[if! Ie]>-->
<style type= "Text/css" >
/* styles goes but should not appear in ie5-9 * *
</style>
<!--<! [endif]-->

However, when IE's version reaches 10/11, this conditional comment (described on MSDN) is not supported at first.

It is reasonable to say that from the beginning of IE9, IE began to be accepted by web developers, many people will IE9 browser and Firefox, Google Browser collectively known as the modern browser, because they began to implement the new HTML5 and CSS3 unified standards. But the wish is good, the reality is brutal, many web developers in the development practice found that the same CSS on the IE9/10/11 and other browser rendering effect is not the same. That is to say, we still need conditional comments.

So, how do you implement a conditional annotation on a IE10/11 that does not support conditional annotations?

method One: Use the Ie=emulateie9 property to instruct the browser to use the IE9 rendering technique

IE9 is supported for conditional annotations.

<meta http-equiv= "x-ua-compatible" content= "IE=EMULATEIE9" >

Add the above meta tag to the head of the HTML page so that IE10/11 can recognize the conditional annotation, and we can write the pertinent CSS code like IE6/7/8. But there is a drawback, obviously, the browser will be able to IE9 rendering mode, rather than the latest IE10/11 technology.

method Two: Use media query statement +-ms-high-contrast Property

A CSS Media query statement is an advanced CSS conditional statement that determines whether a CSS can take effect based on some property and attribute values. Here, we want to use a IE10/11 unique attribute, which is-ms-high-contrast, only IE10/11 implements this property, it can have two values active or none, use the following media query statement:

@media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {
/* ie10+ CSS styles go here * *
}

Firefox browser, Google Browser does not recognize this attribute, so will not execute the query in the CSS, so as to achieve the effect of conditional execution.

method Three: Use JavaScript to determine the type of browser

First use JavaScript to determine whether it is IE browser, if so, on the page
var ms_ie = false;
var ua = window.navigator.userAgent;
var old_ie = ua.indexof (' msie ');
var new_ie = ua.indexof (' trident/');

if ((Old_ie > 1) | | (New_ie >-1)) {
Ms_ie = true;
}

if (Ms_ie) {
Document.documentElement.className + + "ie";
}

With this iconic CSS class, we can write CSS code differently in CSS.

. testclass{
* * Here to write General css*/
}

. ie. testclass{
* * Here is written specifically for IE css*/
}

These three methods can realize the substitution effect of the conditional annotation in the IE10/11, each have each use scene, we choose which one to use according to the software's running environment.


ie10 CSS hack conditional annotations and other compatible ways to sort

method One: Characteristic detection: @cc_on

We can use IE proprietary conditional compilation (conditional compilation) with conditional annotations to provide hack for ie10: the IE exclusion condition annotation in the script to ensure that ie6-9 does not recognize it, and then its function detects the name @ cc_on. Over here:


The code is as follows:

<! DOCTYPE html>
<meta charset=utf-8/>
<title>js bin</title>
<body>
<!--[if! ie]><!--<script>
if (/* @cc_on!@*/false) {
document.documentelement.classname+= ' Ie10 ';
}
</script><!--<! [endif]-->
</body>

Please note/* @cc_on! This exclamation point in the middle of the @*/.
This allows you to add a class= "Ie10″" to the HTML element in Ie10, and then you can uninstall this selector for the Ie10 style:


The code is as follows:

. Ie10. Example {
/* ie10-only styles go here/*
}

Conditional compilation supports all versions of IE browsers, not supported by other browsers. But it is likely that after IE11 out, this method will fail ...
It is to be noted that conditional compilation does not support the use of the app in Windows Store and is only supported in IE browsers.
Of course, we can also use the traditional UA to ie10 HTML elements to add class method to achieve.
Unlike other solutions, which are actually dependent on JavaScript in this way, we are against it from another point of view.
Of course someone has released an improved version of this detection feature that will not include IE11, and does not require conditional annotations. However, it raises the "Eval is evil" JS warning error message.
Here's a demo:
Here, I created an eval warning that the alternate version does not have:
Http://jsbin.com/okuzut/2/edit
You can also try, this is just to print out the current IE version, this version is not tested:
Http://jsbin.com/okuzut/1/edit
However, this seems to be in IE8 error, read as "IE5" until you refresh the page, very strange.

method Two: @media-ms-high-contrast

IE10 supports media queries and then supports-ms-high-contrast this property, so we can use it to hack ie10:


The code is as follows:

@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {
/* ie10-specific styles go here/*
}

This type of writing can be adapted to high contrast and default mode. So it's possible to cover all the ie10 patterns.
Then this approach may also take effect in the later IE11.
Of course, method Two can also be used with method one by one:


The code is as follows:

if (Window.matchmedia ("screen and (-ms-high-contrast:active), (-ms-high-contrast:none)"). Matches) {
Document.documentElement.className + = "Ie10";
}

Instance:


The code is as follows:

<! DOCTYPE html>
<meta charset=utf-8/>
<title>js bin</title>
<body>
</body>


method Three: @media 0

This is a bit perverted and not perfect, because IE9 also supports media and hack:


The code is as follows:

@media screen and (min-width:0\0) {
/* IE9 and IE10 rule sets go here * *
}

However, it is estimated that the rear ie10 will also spread to the Windows 7 platform, so IE9 will disappear, just look at the IE8 and IE7 share, this may not happen.