HTML condition comments and html comments

HTML condition comments and html comments

The common HTML comment format is

<! -- Comment -->

IE5 ~ IE9 also supports a specialIf condition comment(It seems a bit similar to the syntax structure during template rendering)

<! -- [If IE]> html statement <! [Endif] -->

In this way, the hack code can be concentrated in one segment when dealing with IE browser compatibility issues, or other unexpected uses

If condition annotations are divided into three forms:

1. Whether it is IE (I .e :!)

<! -- [If IE]> html code <! [Endif] --> <! -- [If! IE]> html code <! [Endif] -->

2. Which version of IE is used (I .e.: =)

<! -- [If IE 6]> html code <! [Endif] --> <! -- [If IE 8]> html code <! [Endif] -->

3. the IE (that is, <, <=,>,> =) of the specified range)

<! -- Browsers earlier than IE8 will execute internal html code. To include IE8, use lte --> <! -- [If lt IE 8]> html code <! [Endif] --> <! -- IE7 or a later version of the browser will execute internal html code. To include IE7, use gte --> <! -- [If gt IE 7]> html code <! [Endif] -->

 

Conditional comments

IE5 ~ The perspective of IE9 is:

The perspective of other browsers is:

If you want the so-called html code IE5 ~ In the if condition comment ~ Although IE9 can recognize but cannot be executed, other browsers can also recognize and execute the code.

<! -- [If! IE]> --> html code <! -- <! [Endif] -->

The idea is to comment out the prefix and suffix of the conditional annotation syntax structure.

IE5 ~ The perspective of IE9 is changed:

The perspective of other browsers becomes:

The middle code can be identified.

I personally think a note when using conditional comments

<!--[if !IE]>--><script src="js/jquery-3.2.1.min.js"></script><!--<![endif]--><!--[if IE]><script src="js/jquery-1.12.4.min.js"></script><![endif]-->

If you can only use one of the top two in each browser, you must remember to consider IE9, because it can also recognize conditional annotations (It seems that IE9 is the transition from IE to modern advanced browsers. CSS3 only supports a part of it, but some problems exists in IE proprietary.)