IE conditional comment how to play

IE conditional comment how to play

If you have played with conditional annotations, you can omit the following introductory remarks.

IE Conditional comment (Conditional comments) is the private code of IE browser, is a syntax comment block similar to if judgment, supported on IE5.

That's what the code looks like.

!--[If IE 6]>

You are using IE6

! [endif]--> Copy Code

His syntax is an ordinary HTML comment!–comments–> the branch block starts with the [if condition (conditional)]>! [endif] End. Conditions and JS in the If very similar, Boolean type, you can use the browser features as a condition, such as IE, ie 6, IE 7, also support non (!), with (&), or (|), parentheses, greater than (GT), greater than or equal (GTE), less than (le), less than equal (LTE).

The intuitive code is as follows:

P class= "Accent" >

!--[If ie]>

According to the conditional comment this is Iebr/>

! [endif]-->

!--[If IE 6]>

According to the conditional comment this is IE 6br/>

! [endif]-->

!--[If IE 7]>

According to the conditional comment this is IE 7br/>

! [endif]-->

!--[If IE 8]>

According to the conditional comment this is IE 8br/>

! [endif]-->

!--[If IE 9]>

According to the conditional comment this is IE 9br/>

! [endif]-->

!--[If GTE IE 8]>

According to the conditional comment this is IE 8 or higherbr/>

! [endif]-->

!--[If Lt IE 9]>

According to the conditional comment this is IE lower than 9br/>

! [endif]-->

!--[If LTE IE 7]>

According to the conditional comment this was IE lower or equal to 7BR/>

! [endif]-->

!--[If GT IE 6]>

According to the conditional comment this is IE greater than 6br/>

! [endif]-->

!--[if! Ie]>--

According to the conditional comment this was not iebr/>

!-- ! [endif]-->

/p> Copy Code

More detailed information can be viewed in the Microsoft MSDN documentation

After the basic introduction, this thing can do ie browser detection, so it becomes a CSS compatible multi-version browser one of the scenarios.

Most commonly used scenario 1

!--[If IE 8]>

Link href "rel=" stylesheet "type=" text/css "media=" screen "/>

! [endif]-->

!--[If IE 7]>

Link hr "rel=" stylesheet "type=" text/css "media=" screen "/>

! [endif]-->

!--[If Lt IE 7]>

Link href= "ss" rel= "stylesheet" type= "text/css" media= "screen"/>

! [endif]--> Copy Code

Can not only solve the browser differences, but also to ensure that the standardization of CSS, avoid a lot of private CSS properties as hack way.

But this will increase the number of file loading, maintenance code also increased, there is no better way?

Use Scenario 2

!--[If Lt IE 7]>html class= "IE6 oldie" lang= "en" >! [endif]-->

!--[If IE 7]>html class= "IE7 oldie" lang= "en" >! [endif]-->

!--[If IE 8]>html class= "IE8 oldie" lang= "en" >! [endif]-->

!--[If GT IE 8]>!--> HTML lang= "zh" >!--! [endif]--> Copy Code

The problem in Scenario 1 is solved. The prioritization of selectors makes it easy to resolve differences.

With the conditional comments, JS can also benefit from the total, eliminating the use of JS to determine the browser type and version.

For example, conditional annotations can work if your page wants to use the HTML5 tag.

!--[If LTE IE 8]>

Script>

(function () {

var e= "Abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,

Footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video ". Split (', '),

I=e.length;

while (i--) {

Document.createelement (E[i]);

}

})();

/script>

! [endif]--> Copy Code

Another example: IE6 background image cache Problem!--[if IE 6]>

Script>

Document.execcommand ("Backgroundimagecache", false, true);

/script>

! [endif]--> Copy Code

It can even help JS to get the browser information directly, most libraries and scheme-aware browsers are processed by useragent string, and most of the scenarios are also if (Iexx) {Doxx}

function Isie (v)

var V=v | | "",

Tester=document.createelement (' div ');

Tester.innerhtml= '!--[if IE ' + V + ']>i>/i>! [endif]--> ';

Return!! Tester.getelementsbytagname (' i ') [0];

Copy the Code

form:hect/

You can also play in the HTML code

Body>

!--[If LTE IE 8]>

p> Dear users, your browser version is too low, it is recommended that you upgrade your browser for a better experience ..../p>

! [endif]--> Copy Code

Perhaps there are more ways to play, waiting for your discovery and sharing.

Finally, the conditional comment is not limited to HTML, JS can also have, that is the characteristics of JScript, this kind of pit daddy is still less good, because JS in the comments are always to be compressed out.

Script>

/script> Copy Code

IE conditional comment how to play