Home > Developer > CSS

CSS Hacks summary and analysis

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Next we will introduce css hack to solve some incompatibility problems in multiple browsers.

  IE6 IE7 Firefox2 + Firefox3 + Opera9.5 + Safari3.1 +
Selector {
* Attribute: value;
}[1]		 & Radic; & Radic; × × × ×
Selector {
_ Attribute: value;
}		 & Radic; ×[2] × × × ×
Selector, x:-moz-any-link {
Attribute: value;
}		 × & Radic; & Radic; & Radic; × ×
Selector, x:-moz-any-link, x: default {
Attribute: value;
}		 × & Radic; × & Radic; × ×
@ Media all and (min-width: 0 ){
Selector {property: value ;}
}[3]		 × × × × & Radic; & Radic;
@ Media all and (-webkit-min-device-pixel-ratio: 0 ){
Selector {property: value ;}
}[4]

1] The * number here can also be ".", ">", "+", and. However, they are not part of the valid attribute names of CSS2.1 specifications, so they cannot pass verification.
[2] when IE7 is set to quriks mode and IE6 is set to quriks mode, this expression can also take effect in IE7. This hack has been applied for a long time. The prefix of the underscore _ as the attribute name conforms to the CSS2.1 standard syntax, but does not exist in the attribute name table. Therefore, it still cannot be verified by the standard syntax. For CSS Hacks of multiple IE, conditional comments are a solution worth considering. In addition, IE8 can focus on its new features and changes, but it is too early to consider its CSS Hacks problem, you can add <meta http-equiv = "X-UA-Compatible" content = "IE = EmulateIE7 & Prime;/>.
[3] If the and (the blank in the middle is removed to @ media all and (min-width: 0) {selector {property: value ;}}, then Safari3 + cannot be identified, and Opera9.5 + can.
[4] Opera9.0 is supported.
The above CSS Hacks are just a small drop in the ocean, and are some simple general CSS Hacks. There are still many well-known and classic CSS Hacks in the world.
I will not introduce it here.

 

Foreign website reference

The syntax for conditional comments is as follows:

Positive

The code is as follows: Copy code
<! -- [If condition]> HTML <! [Endif] -->
Negative
<! -- [If! Condition]> <! [IGNORE [--> <! [IGNORE []> HTML <! -- <! [Endif] -->

Condition is one of the following:

IE
Any version of IE
Lt IE version
Versions less than version
Lte IE version
Versions less than or equal to version
IE version
Only version
Gte IE version
Versions greater than or equal to version
Gt IE version
Versions greater than version
Version is the version of Internet Explorer, typically 5, 5.5, 6, or 7

HTML is the HTML to be encoded if the condition does or doesn't match, depending on the type of conditional comment. when encoded, the HTML is placed right where the conditional comment is in the source.

For negative conditions,

The code is as follows: Copy code
<! [IGNORE [--> <! [IGNORE []> can be replaced with -->

If the condition is simply IE. The longer version is only needed when Internet Explorer might parse the contents.

The <! [IGNORE [...]> directive is not available in XML, so it is illegal to use it in XHTML. A solution wocould be to split it up into two special conditional comments: <! -- [If! Condition]> XHTML <! [Endif] --> <! -- [If! IE]> --> XHTML <! -- <! [Endif] --> where XHTML is the same both places. Note that Internet Explorer 7 and below don't yet recognize XHTML as a form of XML, so this is merely forward-looking.

 

Conditional comments as a CSS hack
Up
Conditional comments can be used as a CSS hack by including links to stylesheets based on the layout engine. Here is an example of how stylesheets can be separated in this way:

The code is as follows: Copy code

<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html lang = "en">
<Head>
<Title> Test </title>
<Link href = "all_browsers.css" rel = "stylesheet" type = "text/css">
<! -- [If IE]> <link href = "ie_only.css" rel = "stylesheet" type = "text/css"> <! [Endif] -->
<! -- [If lt IE 7]> <link href = "ie_6_and_below.css" rel = "stylesheet" type = "text/css"> <! [Endif] -->
<! -- [If! Lt IE 7]> <! [IGNORE [--> <! [IGNORE []> <link href = "recent.css" rel = "stylesheet" type = "text/css"> <! -- <! [Endif] -->
<! -- [If! IE]> --> <link href = "not_ie.css" rel = "stylesheet" type = "text/css"> <! -- <! [Endif] -->
</Head>
<Body>
<P> Test </p>
</Body>
</Html>

Reference: http://www.webdevout.net/css-hacks

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More