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

Installation and daemon configuration of Redis on Windows and Linux

Conditional comment style writing method and sample code

Installation and daemon configuration of Redis on Windows and Linux

Implementation steps for building Webpack5-react scaffolding from scratch (with source code)

An example of how to query data in MySQL and update it to another table based on conditions

How to enable Swoole Loader extension on Linux system virtual host

mysql executes sql file and reports error Error: Unknown storage engine'InnoDB' solution

Implementation of Docker Compose multi-container deployment

How to prevent website content from being included in search engines

CSS text alignment implementation code

WeChat applet calculator example

Super detailed teaching on how to upgrade the version of MySQL

Recommend

Vue uses Split to encapsulate the universal drag and slide partition panel component

What are the benefits of semantic HTML structure?

JS, CSS and HTML to implement the registration page

Implementing image fragmentation loading function based on HTML code

MySQL SQL statement performance tuning simple example

ES6 loop and iterable object examples

Vue mobile terminal determines the direction of finger sliding on the screen

How to use worm replication in Mysql data table

Advantages and disadvantages of Table layout and why it is not recommended

Vue implements user login and token verification

Multi-service image packaging operation of Dockerfile under supervisor

How to install MySQL 5.7.28 binary mode under CentOS 7.4

In-depth analysis of Flex layout in CSS3

Solution to the problem of slow docker pull image speed

Summary of methods for creating, listing, and deleting Docker containers on Linux