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

This article introduces the relevant knowledge of "how to understand CSS Hack". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Summary:

When we make pages, CSS hack has different understanding of CSS parsing due to different browsers, such as Internet Explorer,Mozilla Firefox, etc., which will lead to different page effects and can not get the page effect we need. At this time, we need to write different CSS for different browsers, so that it can be compatible with different browsers at the same time, and can get the page effect we want in different browsers.

There are roughly three forms of CSS Hack: attribute-level Hack, selector Hack and IE conditional Hack

Note: minimize the use of CSS Hack.

Principle:

Because different browsers have different support for CSS and different parsing results, it is also due to the priority in CSS. We can write different CSS for different browsers according to this.

Practical application:

Selector:

Syntax:

Selector {sRules}

Description:

Select different browsers and versions

Usually, if not specified, the default runtime environment for all code and examples is standard mode.

Because of the cross-understanding of browsers, some CSS Hack need to Hack different browsers through layers of overlay.

Briefly list a few:

The code is as follows:

* html .test {color:#090;} / * For IE6 and earlier * /

* + html .test {color:#ff0;} / * For IE7 * /

.test: lang (zh-cn) {color:#f00;} / * For IE8+ and not IE * /

.test:nth-child (1) {color:#0ff;} / * For IE9+ and not IE * /

: root .test {background-color:green;} / * For IE9 and Opera * /

@ media screen and (- webkit-min-device-pixel-ratio:0) {.test {color:gray;}} / * For Chrome and Safari * /

@-moz-document url-prdfix () {.test {color:#fff}} / * For Forefox * /

* the three and four lines in the above code are typical CSS Hack that uses capabilities to make choices.

IE condition Hack:

Syntax:

The code is as follows:

Value:

The if condition contains six options: whether, greater than, greater than or equal to, less than, less than or equal to, non-specified version

Whether:

Specifies whether to IE or IE a version. Keyword: empty

Greater than:

Select a version of IE greater than the specified version. Keyword: gt (greater than)

Greater than or equal to:

Select a version of IE that is greater than or equal to the specified version. Keyword: gte (greater than or equal)

Less than:

Select an IE version that is less than the specified version. Keyword: lt (less than)

Less than or equal to:

Select a version of IE that is less than or equal to the specified version. Keyword: lte (less than or equal)

Non-specified version:

Select all IE versions except the specified version. Keyword:!

At present, the commonly used versions of IE are 6.0 or above.

Description:

Used to select different versions of IE browser and IE

If conditional Hack is HTML-level (including but not just CSS's Hack, you can choose any HTML code block)

If you don't want to see an area in a non-IE, you can write:

The code is as follows:

The above p code block will only be visible in IE.

An example of the use of six options for if conditions (the HTML code blocks contained by conditional comments in the following code can also be link tags):

Whether or not, sample code:

The code is as follows:

In the above code, only by browsing through IE can you see that the element to which the test class is applied is red text.

Greater than, sample code:

The code is as follows:

In the above code, only above IE6 can you see that the element to which the test class is applied is red text.

Greater than or equal to, sample code:

The code is as follows:

In the above code, only if you are above IE6 (including IE6) can you see that the element to which the test class is applied is red text.

Less than, sample code:

The code is as follows:

In the above code, only below IE7 can you see that the element to which the test class is applied is red text.

Less than or equal to, sample code:

The code is as follows:

In the above code, only below IE7 (including IE7) can you see that the element to which the test class is applied is red text.

Non-specified version, sample code:

The code is as follows:

In the above code, in all versions of IE except IE7, you can see that the element with the test class applied is red text.

Attribute level:

Syntax:

Selector {property:value;} or selector {property:value;}

Value:

_: select IE6 or below. A connecting line (underscore) (-) can also be used, and it is more appropriate to use an underscore (_) in order to avoid confusion with some attributes with an underscore.

*: select IE7 or below. Things such as (+) and (#) can be used, but the industry is more aware of (*).

\ 9: select IE6+, to distinguish between all IE and FireFox.

\ 0: select IE8+ and Opera

[; property:value;];: select the webkit core browser (Chrome,Safari). IE7 and below can also be identified. The three semicolons inside and outside the brackets must be retained, and the first semicolon can be any rule or any number of rules.

[; color:#f00;]; is equivalent to [color:#f00;color:#f00;]; and [margin:0;padding:0;color:#f00;];. It is always the last rule in square brackets that takes effect, so the first method is usually the most concise.

Note:! important is not a hack means, it is used to change the priority of css, because ie6 does not recognize! important, so it is used as a kind of css hack, which is wrong.

Description:

Select different browsers and versions

Browser priority: FF

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.