May 30, 2021 Article blog
HTML snippets like this have often been seen recently, and many front-end developers should be familiar with:
1 <!--[if lt IE 7]> <html class="ie6"> <![endif]-->
2 <!--[if IE 7]> <html class="ie7"> <![endif]-->
3 <!--[if IE 8]> <html class="ie8"> <![endif]-->
4 <!--[if gt IE 8]><!--> <html> <!--<![endif]-->This code contains conditional comments that selectively add (or do not add) a class property that contains browser version information to < html > tags, depending on the browser. S pecifically, for IE5-IE8, the < html > tag adds a class property, whose value is determined by the version of the IE. F or IE9, higher IE versions than IE9, and non-IE browsers, < html > remain the same. This allows us to write CSS code that only works for IE5-IE8 older browsers, such as:
1 .foo { color: red;}
2 .ie6 .foo { color: yellow;}
3 .ie7 .foo { color: blue;}
Further, we can avoid CSS hacks 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;} Use HTML Conditional Annotations to avoid CSS hack, a popular and secure technology. T here are many versions of the code for this technique, and one more interesting one comes from HTML5 Boilerplate:
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;}
Writing here, I feel like I've written so much that it's all something you might know. In fact, the topic of this article is not to discuss the pros and cons of conditional comments and CSS hacks, nor to discuss which conditional comment scheme is best, I would like to talk about some of the details of the conditional comment technology implementation code.
Let's focus on the first sample code in the article. Look at the first line of this code:
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
Even if we don't have the knowledge of conditional comments, literally we can guess what this line of code does: in IE6 or earlier browsers, this line of comments is parsed into < html class">" I n other Internet Explorer (IE7-9), it is resolved to empty. I n a non-IE browser, there is no doubt that it will be ignored as a generic HTML comment as we know it. In fact, browsers do.
In the conceptual system of IE conditional comments, there are two types of conditional comments. T he type of conditional comment is called downlevel-hidden. Its syntax is this:
<!--[if expression]> HTML <![endif]-->
The details of the syntax allow you to view the reference resources at the end of the article.
Before we talk about the fourth line of code with weird syntax, let's consider a question. With the features of existing HTML conditional annotations, can we achieve the goal of "IE9, a higher version of IE than IE9, and non-IE browsers, < html > remain as it is"?
1 <!--[if gt IE 8 | !IE]> <html> <![endif]-->2 ...3 </html>
Is that okay? N o. I n the IE9 browser, the comment condition is true and the code resolves to < html >. H owever, in IE10 and non-IE browsers, this line of code is ignored, which causes the HTML document to lack the starting < html > tag. F rom the highlighted HTML, we can clearly see it. In particular, Microsoft has announced that IE10 no longer supports conditional comments.
With the features of existing HTML conditional annotations, we have no way to achieve our goals. What to do?
In the conceptual system of IE conditional comments, there is another type of conditional comment called downlevel-revealed, and its syntax (see the reference resource at the end of the article for specific syntax details) is as follows:
<![if expression]> HTML <![endif]>Fortunately, we can use the condition comments of the downlevel-revealed type to achieve our previous goals.
<![if gt IE 8]> <html> <![endif]>
The resolution for this line of code is this: in IE9, the browser recognizes that this is a conditional comment and that the condition is true, so the code resolves to < html >. I n IE8-IE5, the condition of the comment is false and therefore resolved to empty. I n IE10 and non-IE browsers, <! > and <! t he > will be treated as an unrecognized label, and the entire code will eventually be resolved to < html >. Thanks to Microsoft, our goal has been achieved.
However, this code cannot be verified by (X) HTML. In order to be able to pass (X) HTML validation, we can use an improved syntax that the code can modify to:
<!--[if gt IE 8]--> <html> <!--[endif]-->
We added 4 --, which makes the code look very weird, which is a bit different from the downlevel-hidden type, but it can be recognized by IE5-IE9 as conditional comments and processed. F or improved code, the resolution of IE5-IE8 remains the same. I E10 and non-IE browsers will resolve the <!-- as a general comment > the > <!-- gt IE 8, > <!-- endif, and the end result will remain the same. H owever, there is a problem with IE9: the comment condition is still true, and the parsing result becomes -- > < html >. Let's improve the syntax again, and the code can be modified to:
<!--[if gt IE 8]<!--> <html> <!--[endif]-->
We just added a <! . F or code that has been improved again, the resolution of IE5-IE8 remains the same. I E10 and non-IE browsers will resolve the <!-- <!--> <!-- (if gt IE 8) > as a general comment, and the end result will remain the same. IE9's problem has been fixed.
At this point, we get this line of code, which is actually the fourth line of code in the example.
Well, that's where this weird line of code came from.