Conditional comment style writing method and sample code

As front-end engineers, IE must be familiar to us. When writing code to implement a design draft, various IE compatibility issues often arise. There are many ways to deal with compatibility. The easiest way is to write different styles for different browsers.
Each browser in IE has its own set of comments. Annotations belonging to your own browser will be recognized specifically in your own browser and not by his browser. Next we will show you how to write conditional styles.

It is a comment in HTML language. It is a note added to the code to let yourself or your team members know what you wrote, when you wrote it, etc. This comment will not be displayed in the browser, but you can see this part when viewing the source code of the page, such as the following simple example:

Copy code

The code is as follows:

<div>HTML Comment</div>

The content in the above code is the comment part. Then if we add a conditional statement based on the above, we can get the conditional comment we want. IE has its own set of conditional comments. There are many benefits of conditional comments, the main one is to make your website style neat and refreshing, and the second is to easily be compatible with all eligible browsers. These benefits give us an instant interest in conditional comments. So how should conditional comments be written? Let me take a look at it below.

How to write conditional styles <br />The method is very simple. We just need to import the external style sheet in the normal way, and then nest conditional comments outside. Before using conditional comment statements, there are several conditional comment attributes that we must understand and use:
1. gt (great than): select versions greater than the conditional version, excluding the conditional version itself;
2. lt (less than): This is the opposite of gt, which means selecting the version below the conditional version, excluding the conditional version itself;
3. gte (great than or equal): select versions greater than the conditional version and including the conditional version itself;
4. lte (less than or equal): select the version below the conditional version, including the conditional version itself;
5. !: Select all versions except the conditional version, regardless of high or low.

Conditional Style Examples
1. Support all IE browsers

Copy code

The code is as follows:

2. Support all browsers except IE

Copy code

The code is as follows:

Copy code

The code is as follows:

<link rel="stylesheet" href="noIE.css" type="text/css" />

3. Only supports IE10

Copy code

The code is as follows:

4. Only supports IE9

Copy code

The code is as follows:

5. Only supports IE8

Copy code

The code is as follows:

6. Only supports IE7

Copy code

The code is as follows:

7. Only supports IE6

Copy code

The code is as follows:

8. Support IE10 and below (IE9 and below)

Copy code

The code is as follows:

Copy code

The code is as follows:

9. Support IE9 and below versions (IE8 and below versions)

Copy code

The code is as follows:

Copy code

The code is as follows:

10. Support IE8 and below (IE7 and below)

Copy code

The code is as follows:

Copy code

The code is as follows:

11. Support IE7 and below (IE6 and below)

Copy code

The code is as follows:

Copy code

The code is as follows:

12. Versions higher than IE9 (IE10 and above)

Copy code

The code is as follows:

Copy code

The code is as follows:

13. Versions higher than IE8 (IE9 and above)

Copy code

The code is as follows:

Copy code

The code is as follows:

14. Versions higher than IE7 (IE8 and above)

Copy code

The code is as follows:

Copy code

The code is as follows:

15. Versions higher than IE6 (IE7 and above)

Copy code

The code is as follows:

Copy code

The code is as follows:

16. Reference JavaScript tags with conditional comments

Copy code

The code is as follows:

The above shows how to create conditional comment styles. You can use one or more of them according to your needs. Finally, conditional comments are mainly aimed at IE browsers, so we also call them IE conditional comments. In this way, managing separate styles written for IE compatibility brings great convenience and benefits. With conditional comments we can easily write conditional styles and solve problems in browsers. This is the end of the introduction to conditional comments.

<<: MySQL example to explain single-row functions and character math date process control

>>: Build a severe weather real-time warning system with Node.JS