Usage of CSS condition annotations

Source: Internet
Author: User

Disclaimer: the following content is collected on the Internet. After being understood by the talented person, sort it and edit it. For reprinted content, please keep the link of the talented person website. Thank you !!!
Talent Note: http://blog.54caizi.com

Friends who play WEB refactoring believe that they all share the same annoyance, that is, because of the different browser versions and different interpretations of some elements in CSS, they certainly encounter the same problem, I also collected some solutions, so I posted two different CSS codes for different browser versions before. If you are interested, find them.

In fact, we can also use the condition annotation method to achieve a similar goal. What is the condition annotation? Here, I would like to briefly introduce it. It is nothing more than if judgment, however, these judgments are not executed in scripts, but directly executed in html code. The following describes how to use them.

<! -- [If XXX]>
Here is the normal html code
<! [Endif] -->

Here XXX is a few specific things. Here we will detail their meanings:
<! -- [If IE]>/if the browser is IE/
<! -- [If IE 5]>/if the browser version is IE 5/
<! -- [If IE 6]>/if the browser version is IE 6/
<! -- [If IE 7]>/if the browser version is IE 7/
......

The above are several commonly used syntax used to determine the version of IE browser. Next we will introduce the few logical judgment parameters:
There are several parameters: lte, lt, gte, gt, and!
The detailed explanations are as follows:
Lte: Short for Less than or equal to, that is, Less than or equal.
Lt: Short for Less than, that is, Less.
Gte: Short for Greater than or equal to, that is, Greater than or equal.
Gt: Short for Greater than, that is, Greater.
! : It means not equal. It is the same as the non-equal identifier in javascript, ^ 0 ^

Also write a few statements:
<! -- [If gt IE 5.5]>/if the IE version is later than 5.5/
<! -- [If lte IE 6]>/if the IE version is less than or equal to 6/
<! -- [If! IE]>/If the browser is not IE/
......

I believe that everyone understands the usage of the conditional annotation. OK. Let's take an example:

<! -- First use the css.css style sheet -->
<Link rel = "stylesheet" type = "text/css" href = "css.css"/>

<! -- [If! IE]>
<! -- Use the 1.css style sheet for non-ie-based access -->
<Link rel = "stylesheet" type = "text/css" href = "1.css"/>
<! [Endif] -->

<! -- [If lt IE 6]>
<! -- If the IE browser is less than 6, use the 2.css style sheet -->
<Link rel = "stylesheet" type = "text/css" href = "2.css"/>
<! [Endif] -->

The detailed usage has been described. One point that must be mentioned is:
Conditional comments are supported by IE only after IE5.0/Win, which is invalid for browsers earlier than IE5. However, no one is using ie4. ^ 0 ^

Related Article

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.