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

Editor to share with you how to achieve conditional annotation style in web development, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

As front-end engineers, IE must be no stranger to us. When writing code to implement a design draft, a variety of compatibility issues related to IE often arise. There are also many ways to deal with compatibility. The easiest way is to write different styles for browsers.

Each browser in IE has its own set of comments. Comments that belong to his own browser are specifically identified in his own browser, and his browser does not. Next we will show you how to write conditional styles.

Is a comment in the HTML language. It is a kind of note added to the code to let yourself or your team members know what you are writing, when you write, and so on. This comment will not be displayed in the browser, but you can see this part when you look at the source code of the page, such as the following simple example:

The code is as follows:

HTML comment

The part of the above code is the comment part. Then if we add a conditional statement to the above basis, we can get the conditional comments we want. IE has its own set of conditional notes. Conditional comments have many benefits, mainly to make your site style clean and clean, followed by easy compatibility with all qualified browsers. These benefits make us instantly interested in conditional comments. So how should conditional comments be written? Next, I'll take a look at it.

The method of compiling conditional style

The method is simple, we just need to introduce the external stylesheet in the normal way, and then nest conditional comments on the outside. Before specifically using conditional comment statements, there are several conditional comment attribute meanings that we must understand and will use:

1. Gt (greate than): select a version above the conditional version, excluding the conditional version itself

2. Lt (less than): this is just the opposite of gt. It means to select a version below the conditional version, excluding the conditional version itself.

3. Gte (greate than or equal): select the conditional version or above, and include the conditional version itself

4. Lte (less than or equal): select the version below the conditional version and include the conditional version itself

5.!: select all versions except the conditional version, regardless of high or low.

An instance of a conditional style

1. Support all IE browsers

The code is as follows:

2. Support all browsers except IE

The code is as follows:

Or

The code is as follows:

3. Only IE10 is supported

The code is as follows:

4. Only IE9 is supported

The code is as follows:

5. Only IE8 is supported

The code is as follows:

6. Only IE7 is supported

The code is as follows:

7. Only IE6 is supported

The code is as follows:

8. Support the following versions of IE10 (IE9 and IE9 below)

The code is as follows:

Or

The code is as follows:

9. Support the following versions of IE9 (IE8 and IE8 below)

The code is as follows:

Or

The code is as follows:

10. Support the following versions of IE8 (IE7 and IE7 below)

The code is as follows:

Or

The code is as follows:

11. Support the following versions of IE7 (IE6 and IE6 below)

The code is as follows:

Or

The code is as follows:

12. Versions higher than IE9 (IE10 and IE10 and above)

The code is as follows:

Or

The code is as follows:

13. Versions higher than IE8 (IE9 and IE9 and above)

The code is as follows:

Or

The code is as follows:

14. Versions higher than IE7 (IE8 and IE8 and above)

The code is as follows:

Or

The code is as follows:

15. Versions higher than IE6 (IE7 and IE7 and above)

The code is as follows:

Or

The code is as follows:

16. Reference JavaScript tags with conditional comments

The code is as follows:

The above shows how to create conditional comment styles, and you can use one or more of them according to your needs. Finally, it is concluded that conditional comments are mainly aimed at IE browsers, so we also call them IE conditional comments. In this way, we manage separate styles for IE compatibility, which brings great convenience and benefits. With conditional comments, we can easily write conditional styles, which can solve a problem in the browser.

These are all the contents of the article "how to implement conditional annotation styles in web development". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.