Something you may not know about HTML condition comments

Recently, many front-end developers are familiar with HTML code snippets like this:

1 <!--[if lt IE 7]>      
This Code contains some conditional comments. It selectively adds (or does not add) A class Attribute containing the browser version information to the 
1 .foo { color: red;}2 .ie6 .foo { color: yellow;}3 .ie7 .foo { color: blue;}
Further, we can avoid CSS hack like this:
1/***** Selector Hacks ******/2. foo {color: red;} 3 * html. foo {color: yellow;} 4 *: first-child + html. foo {color: blue;} 5 6/***** Attribute Hacks ******/7. foo {color: red; * color: blue; _ color: yellow ;}
"HTML condition annotation" is used to avoid CSS hack. This is a popular and secure and stable technology. There are many versions of code for this technology. Another interesting introduction is from HTML5 Boilerplate:
1 <!--[if lt IE 7]>      
The article is written here, and I feel like it is something everyone may know. In fact, the topic of this article is not to discuss the conditional annotation and CSS hack annotation advantages or disadvantages, nor to discuss which conditional annotation solution is the best. I would like to explain some details about the implementation code of conditional annotation technology.
We will focus on the first sample code in the article. Check the first line of this Code:
<!--[if lt IE 7]> 
Even if we do not have the knowledge of conditional comments, we can literally guess the role of this line of code: in IE 6 or earlier browsers, this line of comment is parsed into 
In the concept system of IE condition annotation, there are two condition annotation types. This type of conditional annotation is called downlevel-hidden. Its syntax is as follows:
<!--[if expression]> HTML <![endif]-->
For more information about the syntax, see the reference resources at the end of the article.
Before discussing the fourth line of code with weird syntax, let's take a look. With the existing HTML condition Annotation Feature, can we achieve the goal of "maintaining the original 
1 <!--[if gt IE 8 | !IE]> 
Can this happen? No. In IE9 browser, if the annotation condition is true, the code is parsed as 
With the existing HTML condition Annotation Feature, we cannot achieve our goal. What should I do?
In the concept system of IE condition annotation, another condition annotation type is called downlevel-revealed. Its syntax (for details about the syntax, see the reference resource at the end of the article) is as follows:
<![if expression]> HTML <![endif]>
Fortunately, we can use the downlevel-revealed type condition annotations to achieve our previous goal.
<![if gt IE 8]> 
The browser parses this line of code as follows: In IE9, the browser will recognize that this is a condition comment and the condition is true, so this code will be parsed as 
However, this code cannot pass (X) HTML verification. To pass the (X) HTML verification, we can use an improved syntax. The code can be changed:
<!--[if gt IE 8]--> 
We added 4 --, which makes the Code look weird, which is a little different from the downlevel-hidden type, but it can be recognized by the IE5-IE9 as a condition comment and processed. For improved code, the IE5-IE8 resolution method remains unchanged. In IE10 and non-ie browsers, <! -- [If gt IE 8] --> <! -- [Endif] --> is parsed as a general comment, and the final result remains unchanged. However, IE9 has a problem: the annotation condition is still true, but the parsing result is changed to --> 
<!--[if gt IE 8]<!--> 
We just added a <! . For the code that has been improved again, the parsing method of the IE5-IE8 remains unchanged. In IE10 and non-ie browsers, <! -- [If gt IE 8] <! --> <! -- [Endif] --> is parsed as a general comment, and the final result remains unchanged. IE9 is fixed.
This line of code is actually the fourth line of code in the example.
Well, this line of weird code is like this.
Reference resources
About Conditional Comments
HTML5 Parsing in IE10