Proprietary condition annotation in IE browser under HTML--Experience Exchange

Source: Internet
Author: User
Tags first row
In the process of learning and applying Web standard Web pages, the compatibility of Web pages to browsers is a problem that is often contacted. Because Microsoft's Internet Explorer (IE) occupy the majority of the browser market, in addition to Firefox, opera and so on. These browsers need to be compatible.
At the same time, in terms of IE, as a result of the upgrade of IE version of the replacement, the current visitors to use the main IE5 (IE5.5), IE6 and IE7 of the three versions. The 3 versions of the Web Standard Web page (XHTML+CSS) that we make are not as good as they appear. Also, other non-ie browsers and IE have different explanations for some CSS. Therefore, through the proprietary conditions in IE browser annotation can be targeted to the definition of related properties.
Original address: http://www.quirksmode.org/css/condcom.html
Conditional comments can only be used for explorer 5+ Windows (IE) (conditional comments are supported from IE5). If you have more than one IE installed, the conditional annotation (Conditional comments) will be the highest version of IE (currently IE 7).
Conditional comments can only be used under Windows Internet Explorer (IE), so we can add special instructions to IE with conditional comments.
Popular point, conditional annotation is some if judgment, but these judgments do not execute in the script, but are executed directly in the HTML code, for example:

<!--[If ie]>
This is normal HTML code.
<! [endif]-->

1, the basic structure of the conditional annotation and the HTML annotation (<!---->) are the same. Browsers other than IE will therefore look at them as normal annotations and ignore them entirely.
2,ie will determine whether the contents of the conditional annotation are parsed as if the normal page content is parsed according to the IF condition.
3, conditional annotations use the HTML annotation structure, so they can only be used in HTML files, not in CSS files.
You can use the following code to detect the version of the current IE browser (note: No effect is visible in non IE browsers)
<!--[If ie]>
<!--[if IE 5]>
<! [endif]-->
<!--[if IE 5.0]>
<! [endif]-->
<!--[if IE 5.5]>
<! [endif]-->
<!--[if IE 6]>
<! [endif]-->
<!--[if IE 7]>
<! [endif]-->
<! [endif]-->

If the current browser is IE, but the version is lower than IE5, you can use the <!--[if LS ie 5]&gt, of course, according to the conditional annotation can only be under the ie5+ environment, so <!--[if LS ie 5]> will not be executed at all.

LTE: Is the shorthand for less than or equal to, meaning less than or equal to.
LT: It is the shorthand for less than, which means less than.
GTE: is the shorthand for greater than or equal to, which is greater than or equal to the meaning.
GT: is the shorthand for greater than, which means greater than.
! : Is not equal to the meaning, and JavaScript is not equal to the same judge character


Conditional comments belong to CSS hack? Does the conditional judgment belong to CSS hack?
Strictly speaking, it belongs to CSS hack. Because, like other real CSS hack, it allows us to give some browsers special styles, plus it doesn't rely on a browser bug to control another browser's style. In addition, conditional judgments can be used to do things that are beyond the scope of the CSS hack (though this rarely happens).
Because conditional judgment does not depend on the hack of a browser, it is a thoughtful feature, so I believe it can be used safely. Of course, other browsers may also be able to support conditional judgments (not so far), but it seems that they should not use syntax such as <!--[if ie]>.
How conditional comments should be applied
This article explained at the outset, because IE each version of the browser to our web Standard page interpretation is not the same, specifically to the CSS interpretation of different, we in order to compatible with these, we can use conditional annotation to define, and ultimately achieve compatibility purposes. Like what:

<!--call the CSS.CSS style sheet by default first-->
<link rel= "stylesheet" type= "Text/css" href= "Css.css"/>
<!--[if IE 7]>
<!--if the IE browser version is 7, call IE7.CSS style sheet-->
<link rel= "stylesheet" type= "Text/css" href= "Ie7.css"/>
<! [endif]-->
<!--[If LTE IE 6]>
<!--if IE browser version is less than or equal to 6, call IE.CSS style sheet-->
<link rel= "stylesheet" type= "Text/css" href= "Ie.css"/>
<! [endif]-->

This distinguishes the IE7 and IE6 down browsers from the implementation of CSS to achieve compatibility. At the same time, the default css.css of the first line can also be compatible with other non IE browsers.
Note: The default CSS style should be in the first row of the HTML document, and all content judged by the conditional annotation must be in the default style.
For example, the following code, in IE browser execution is displayed in red, and in non-IE browser display as black. If you put a conditional comment on the first line, you cannot implement it. This example can explain the Web page to the Internet Explorer and non-IE browser compatibility problem resolution.
<style type= "Text/css" >
body{
Background-color: #000;
}
</style>
<!--[If ie]>
<style type= "Text/css" >
body{
Background-color: #F00;
}
</style>
<! [endif]-->

At the same time, someone will try to use the <!--[if! Ie]> to define the situation in non-ie browsers, but note that conditional annotations can only be performed under IE, which is not a single definition of the condition under IE, but a blind eye to annotations.
Normal is the default style, for IE browser needs special handling, only to make conditional comments

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.