Some things you might not know about HTML conditional annotations

Recently, HTML snippets like this have often been seen, and many front-end developers should be familiar with:

1 <!--[if Lt IE 7]> 2 <!--[if IE 7]> 3 <!--[if IE 8]> 4 <!--[if GT IE 8]><!-->
This code contains conditional comments that, depending on the browser, selectively add (or not add) a class attribute to the
1. foo {color:red;}
2. IE6. foo {color:yellow;}
3. IE7. foo {color:blue;}

Further, we can avoid CSS hack similar to this:

1/***** selector (Selector) Hacks ******/
2. foo {color:red;}
3 * HTML. foo {color:yellow;}
4 *:first-child+html. foo {color:blue;}
5
6/***** Property (Attribute) Hacks ******/
7. foo {color:red; *color:blue; _color:yellow;}

Using "HTML conditional annotations" to avoid CSS hack is a popular and relatively safe and stable technique. The code for this technique has many versions, and a more interesting one, from HTML5 boilerplate:

1 <!--[if Lt IE 7]> 2 <!--[if IE 7]> 3 <!--[if IE 8]> 4 <!--[if GT IE 8]><!-->
The article writes here, I feel, wrote so many, all is the thing that everybody probably knows. In fact, the topic of this article is not to discuss the condition annotation and CSS hack which is inferior, also is not to discuss which kind of conditional annotation scheme is best, I want to say some conditional annotation technology implementation code details.

We focus on the first example code of the article. Look at the first line of this code:

<!--[if Lt IE 7]>
Even if we don't have the knowledge of conditional annotations, we can literally guess what this line of code does: in IE6 or lower browsers, this line of comments is parsed into
In the concept system of IE conditional annotation, there are two kinds of conditional annotation types. The type of this conditional annotation is called Downlevel-hidden. Its syntax is this:

<!--[if expression]> HTML <! [endif]-->

The syntax details show that you can view the reference resources at the end of the article.

Before we talk about the fourth line of code that's going to be a weird syntax, let's start with a question. With the features of existing HTML conditional annotations, can we achieve the goal of "IE9, more IE9 versions of IE, and,
1 <!--[if GT IE 8 |! Ie]> 2 ...
3
Is that OK? No. In the IE9 browser, the comment condition is true and the code resolves to
With the features of existing HTML conditional annotations, we have no way to achieve our goals. What to do?

In the concept system of IE conditional annotation, there is another conditional annotation type called downlevel-revealed, and its syntax (see the reference resources at the end of the article for specific syntax details) is this:

<! [If Expression]> HTML <! [endif]>

Fortunately, we can use conditional annotations of the downlevel-revealed type to achieve the previous goal.

<! [If GT IE 8]>
The parsing for this line of code is this: in IE9, the browser recognizes that this is a conditional comment and the condition is true, so this code resolves to
However, this code is not validated by (X) HTML. To be able to pass through (X) HTML validation, we can use an improved syntax that the code can modify to:

<!--[if GT IE 8]-->
We've added 4--which makes the code look very weird, a bit different from the Downlevel-hidden type, but it can be recognized by IE5-IE9 as a conditional annotation and processed. For improved code, the parsing of IE5-IE8 is not changed. IE10 and non-IE browsers will interpret <!--[if GT ie 8]--> <!--[endif]--> as a general comment and the final result is unchanged. However, IE9 has a problem: the annotation condition is still true, and the parse result becomes-
<!--[if GT IE 8]<!-->
We just added a <!. For code that has been modified again, the IE5-IE8 is resolved in the same way. IE10 and non-IE browsers will interpret <!--[if GT ie 8]<!--> <!--[endif]--> as a general comment and the final result is unchanged. 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.

Some things you might not know about HTML conditional annotations