Shulou(Shulou.com)06/01 Report--

This article mainly introduces the HTML condition notes of the knowledge points of what the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that you read the knowledge points of this HTML condition notes which articles will have a harvest, let's take a look.

Recently I've seen a lot of HTML snippets like this, which many front-end developers should be familiar with:

1 2 3 4

This code contains conditional comments that selectively add (or not) a class attribute that contains browser version information to the tag depending on the browser. Specifically, for IE5-IE8, the tag adds a class attribute whose value is determined by the version of the IE. For IE9, IE versions later than IE9, and non-IE browsers, leave it as is. In this way, we can write CSS code that works only for older browsers such as IE5-IE8, such as:

1 .foo {color: red;} 2 .ie6 .foo {color: yellow;} 3 .ie7 .foo {color: blue;}

Further, we can avoid CSS hack like this:

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

Use "HTML conditional comments" to avoid CSS hack, which is a popular and safe and stable technology at present. There are many versions of the code for this technology, and another interesting one comes from HTML5 Boilerplate:

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

At the end of the article, I feel that I have written so much that everyone may know. In fact, the topic of this article is not to discuss the advantages and disadvantages of conditional annotations or CSS hack, nor which conditional annotation scheme is the best. I would like to talk about some details of conditional annotation technology implementation code.

Let's focus on the sample code in the first paragraph of the article. Look at the first line of this code:

Even if we have no knowledge of conditional comments, we can literally guess what this line of code does: in IE6 or earlier browsers, this line of comments will be parsed into. In other IE browsers (IE7-9), it is parsed to empty. In non-IE browsers, there is no doubt that it will be treated as a general HTML comment as we are familiar with, and it will be ignored. In fact, browsers do this.

In the conceptual system of IE conditional comments, there are two types of conditional annotations. The type of conditional comment is called downlevel-hidden. Its syntax goes like this:

See the Resources at the end of the article for a detailed description of the syntax.

Before we talk about the fourth line of code with strange syntax, let's think about a question. With the existing feature of HTML conditional annotations, can we achieve the goal of "leaving it as is in IE9, higher IE versions than IE9, and in non-IE browsers?"

1 2... 3

Is that okay? No. In the IE9 browser, the comment condition is true and the code resolves to. However, in IE10 and non-IE browsers, this line of code is ignored, resulting in a lack of opening tags in the HTML document. We can clearly see it from the highlighted HTML. 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 goal. What shall I do?

In the conceptual system of IE conditional annotations, there is another type of conditional annotations called downlevel-revealed, whose syntax looks like this:

HTML

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

The browser parsing for this line of code looks like this: in IE9, the browser recognizes that this is a conditional comment and the condition is true, so this code parses to. In IE8-IE5, the condition of the comment is false, so it is parsed to empty. In IE10 and non-IE browsers, and as unrecognized tags, the entire code is eventually parsed to. Thanks to Microsoft, our goal has been achieved.

However, this code cannot be verified by (X) HTML. In order to pass the (X) HTML validation, we can use an improved syntax where the code can be modified to:

We added four-- which makes the code look very weird, which is a little different from the downlevel-hidden type, but it can be recognized by IE5-IE9 as a conditional comment and processed. For the improved code, the parsing of IE5-IE8 remains the same. IE10 and non-IE browsers will parse them as general comments, and the final result will remain the same. However, there is a problem with IE9: the comment condition is still true, but the parsing result becomes-- >. Let's improve the syntax again, and the code can be modified to:

We just added a general comment to parse, and the final result remains the same. IE9's problem has been fixed.

This is the end of the article on "what are the knowledge points of HTML condition Notes". Thank you for reading! I believe you all have a certain understanding of "what are the knowledge points of the HTML conditional Notes". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.