How to Write conditional styles

As a front-end engineer, we must be familiar with IE. When writing code to implement the design draft, various compatibility issues related to IE often occur. There are also many methods for compatibility processing. The simplest method is to write different styles for the browser. In IE, Each browser has its own set of annotations. Comments in your browser are specially recognized in your browser, and their browsers do not. The following describes how to compile the conditional style. Is a comment in HTML. It is a kind of note added to the Code, so that you or your team members can understand what you are writing, when it is written, and so on. Such comments are not displayed in the browser, however, when you view the source code of the page, you can see this part. The following is a simple example: [html] view plaincopyprint? <! -- Here is the HTML comment --> <div> HTML comment </div> the content in the above section of the Code is the comment part. If we add a Condition Statement on the base above, we can get the expected condition comment. IE has its own set of conditional annotations. There are many advantages of conditional annotations, mainly to make your website style clean and tidy, followed by easy compatibility with various qualified browsers. These benefits make us very interested in conditional comments in an instant. So how should we compile the conditional annotation? Let me take a look. The method for writing conditional styles is very simple. We only need to introduce external style sheets as normal, and then nest conditional comments on the outside. Before using the conditional annotation statement, we must understand the meanings of the conditional annotation attributes and use: 1. gt (greate than): select a conditional version or a later version, does not contain the conditional version itself; 2. lt (less than): This is the opposite of gt, indicating that the version below the conditional version is selected, excluding the conditional version itself; 3. gte (greate than or equal): select a version later than the conditional version, and include the conditional version itself. 4. lte (less than or equal): select a version earlier than the conditional version, and include the conditional version itself; 5 ,!: Select all versions other than the conditional version, regardless of the level. Example of conditional style 1. Support for all IE browsers [html] <! -- [If IE]> <link rel = "stylesheet" href = "IE.css" type = "text/css"/> <! [Endif] --> 2. Support for all browsers except IE [html] <! -- [If! IE]> <link rel = "stylesheet" href = "noIE.css" type = "text/css"/> <! [Endif] --> or [html] <! -- [If! IE]> <! --> <Link rel = "stylesheet" href = "noIE.css" type = "text/css"/> <! -- <! [Endif] --> 3. Only IE10 [html] is supported. <! -- [If IE 10]> <link rel = "stylesheet" type = "text/css" href = "IE10.css"> <! [Endif] --> 4. Only IE9 [html] is supported. <! -- [If IE 9]> <link rel = "stylesheet" type = "text/css" href = "IE9.css"> <! [Endif] --> 5. Only IE8 [html] is supported. <! -- [If IE 8]> <link rel = "stylesheet" type = "text/css" href = "IE8.css"> <! [Endif] --> 6. Only IE7 [html] is supported. <! -- [If IE 7]> <link rel = "stylesheet" type = "text/css" href = "IE7.css"> <! [Endif] --> 7. Only IE6 [html] is supported. <! -- [If IE 6]> <link rel = "stylesheet" type = "text/css" href = "IE6.css"> <! [Endif] --> 8. Support for versions earlier than IE10 (IE9 and IE9) [html] <! -- [If lt IE 10]> <link rel = "stylesheet" type = "text/css" href = "ie9Down.css"> <! [Endif] --> or [html] <! -- [If lte IE 9]> <link rel = "stylesheet" type = "text/css" href = "ie9Down.css"> <! [Endif] --> 9. Support for versions earlier than IE9 (IE8 and IE8) [html] <! -- [If lt IE 9]> <link rel = "stylesheet" type = "text/css" href = "ie8Down.css"> <! [Endif] --> or [html] <! -- [If lte IE 8]> <link rel = "stylesheet" type = "text/css" href = "ie8Down.css"> <! [Endif] --> 10. Support for versions earlier than IE8 (IE7 and IE7) [html] <! -- [If lt IE 8]> <link rel = "stylesheet" type = "text/css" href = "ie7Down.css"> <! [Endif] --> or [html] <! -- [If lte IE 7]> <link rel = "stylesheet" type = "text/css" href = "ie7Down.css"> <! [Endif] --> 11. Support for versions earlier than IE7 (IE6 and IE6) [html] <! -- [If lt IE 7]> <link rel = "stylesheet" type = "text/css" href = "ie6Down.css"> <! [Endif] --> or [html] <! -- [If lte IE 6]> <link rel = "stylesheet" type = "text/css" href = "ie6Down.css"> <! [Endif] --> 12. Versions later than IE9 (IE10 and IE10) [html] <! -- [If gt IE 9]> <link rel = "stylesheet" type = "text/css" href = "ie10Up.css"> <! [Endif] --> or [html] <! -- [If gte IE 10]> <link rel = "stylesheet" type = "text/css" href = "ie10Up.css"> <! [Endif] --> 13. Versions later than IE8 (IE9 and IE9) [html] <! -- [If gt IE 8]> <link rel = "stylesheet" type = "text/css" href = "ie9Up.css"> <! [Endif] --> or [html] <! -- [If gte IE 9]> <link rel = "stylesheet" type = "text/css" href = "ie9Up.css"> <! [Endif] --> 14. Versions later than IE7 (IE8 and IE8) [html] <! -- [If gt IE 7]> <link rel = "stylesheet" type = "text/css" href = "ie8Up.css"> <! [Endif] --> or [html] <! -- [If gte IE 8]> <link rel = "stylesheet" type = "text/css" href = "ie8Up.css"> <! [Endif] --> 15. Versions later than IE6 (IE7 and IE7) [html] <! -- [If gt IE 6]> <link rel = "stylesheet" type = "text/css" href = "ie7Up.css"> <! [Endif] --> or [html] <! -- [If gte IE 7]> <link rel = "stylesheet" type = "text/css" href = "ie7Up.css"> <! [Endif] --> 15. Reference JavaScript tag [html] With condition annotation <! -- [If IE]> <script type = "text/javascript" src = "IE. js"> </script> <! [Endif] --> the preceding figure shows how to create a condition annotation style. You can use one or more of the annotations as needed. Finally, we can summarize that the condition annotation mainly targets ie browsers, so we also call it the IE condition annotation. In this way, we manage individual styles that are compatible with IE, which brings great convenience and benefits. With the conditional annotation, we can easily write the conditional style to solve the problem in a browser. The condition annotations are described here.