Two forms of conditional annotation: lower hidden and lower displayed

Time:2020-9-26

Conditional comment is a statement conditionally interpreted by Microsoft Internet Explorer in HTML source code. Conditional annotations can be used to provide and hide code to Internet Explorer.
Conditional annotations first appeared in Microsoft’s Internet Explorer 5 browser and were supported until Internet Explorer 9. Microsoft has announced that it will stop supporting pages in standard mode – such as HTML5 – in Internet Explorer 10, but the use of this technology (in compatibility view) on older web pages will continue to work.

Conditional annotation is a very common means to deal with compatibility problems

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<! -- HTML5 shim and Respond.js  To make IE8 support HTML5 elements and media queries -- >
<! -- warning: when accessing a page through the file: // protocol (that is, drag and drop the HTML page directly into the browser) Respond.js  It doesn't work -- >
<!--[if lt IE 9]>
  <script></script>
  <script></script>
<![endif]-->

The above example is the official compatibility writing of bootstrap,if lt IE 9If less than ie 9, that is to say, when the browser version is less than IE9, execute the following statement. Of course, less than or equal to IE 9 is not included. If less than or equal to, it is LTE (less than or equal to), Greater than (GT) and greater than or equal to (GTE) can be obtained in the same way. It can be said that the writing method of general condition annotation is very clear. Therefore, the focus of this record is not here, but how to use conditional annotation by browsers other than ie.

I wrote this at first:

<!--[if !IE]>
<script type="text/javascript"~/Scripts/jquery-2.1.4.min.js")  %>"></script>
<![endif]-->

<!--[if lt IE 9]>
    <script type="text/javascript"~/Scripts/jquery-1.12.4.min.js")%>"></script>
<![endif]-->

Take it for granted!IEIt can be recognized by other browsers to achieve the purpose of loading different versions of jQuery. However, in fact, conditional annotation is normal and only supported by ie5-ie9. This is a unique use of IE, so there are problems in compatibility processing. Let’s look at the above example. If the conditional annotation of version 2.1.4 is removed, it can be used normally in most cases, but it can be used in the ring below IE9 Two versions of jQuery will be loaded in the environment, and errors may be reported because some writing methods of higher version jQuery are not supported. Is there a better solution? Yes, the answer lies in the different ways of writing conditional annotations, which are called lower level hiding and lower level displaying.

Down level hidden

The lower layer hiding is the writing method we used above, which is easy to understand and is more commonly used. However, non IE browsers will regard it as a common comment and completely ignore the contents inside.

<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->

Lower level displayed

However, if you want to write conditional comments that are valid for other browsers, you need to write them in a lower level. First of all, let’s look at a nonstandard writing method of lower level display

<![if !IE]>
<link href="non-ie.css" rel="stylesheet">
<![endif]>

This example shows what should be exposed only to non IE browsers, because the condition is false to IE (and therefore the content is ignored), and the tags themselves are not recognized (and therefore ignored) in non IE browsers. This is not a valid HTML or XHTML. Microsoft acknowledges that this syntax is not a standardized markup, with the intention that these tags will be ignored by other browsers and expose their contents.

So if you want to meet the W3C standard, how to write it? The answers are as follows:

<!--[if !IE]>-->
<link href="non-ie.css" rel="stylesheet">
<!--<![endif]-->

At first glance, there is no difference between these writing methods. However, if you look at the syntax coloring, you can find the difference. In the lower level display state, the statements in the conditional comments are colored, which means that they have been recognized, while the lower level is hidden. On the contrary, the reason is that the writing method of lower level display is to annotate the statement of conditional annotation. As we mentioned earlier, browsers other than ie will annotate the conditional annotation All the contents in the are ignored as normal comments. When we comment out the conditional comments, browsers other than ie can recognize the middle statement. Therefore, a more reasonable compatibility writing method can be as follows:

<!--[if !IE]>-->
<script type="text/javascript"~/Scripts/jquery-2.1.4.min.js")  %>"></script>
<!--<![endif]-->

<!--[if lt IE 9]>
    <script type="text/javascript"~/Scripts/jquery-1.12.4.min.js")%>"></script>
<![endif]-->

When using ie5-ie9, normal recognition condition annotation, skip!IESection, readlt IE 9When using other versions, ignore the conditional annotation and read version 2.1.4 jQuery