Reprint CSS usage

Article by: http://www.zgxmwjjg.com

Many of my friends don't know what kind of hack is in CSS and how to use it. I have translated and pasted it here. This article is about the CSS hacking technology. Do not confuse it with Microsoft's proprietary CSS attribute "filter.

In the ideal world, correct CSS should work well in any browsers that support CSS. Unfortunately, we are not living in the ideal world, And the browser is filled with bugs and inconsistencies. CSS developers must do their best to create a page that is consistent across browsers. By using bugs and unimplemented CSS, developers can apply different rules for different browsers. Hack and filter are powerful weapons for developers. It is important to understand common hacks and how they work, but it is equally important to know when and when they are not used.

CSS Filter or hack is a code used to display or hide CSS labels based on the browser type and version number. Browsers have different interpretations of CSS behaviors, and their levels of support for W3C standards are also different. CSS filters are often used to achieve consistent layout appearances in multiple browsers, because some browsers cannot be rendered. The title of hack is somewhat negative. In fact, it is a personal modification to the unofficial CSS code, misleading people to think there is a better way to achieve the purpose, but we do not actually have it, some people like to use patch to name it, so that people can know that this is a browser error.

Backslash

This hack utilizes an IE bug on the Mac platform. Comments ended with \ */are incorrectly disabled on IE Mac, so the statements to be ignored can be placed behind the comments.

/* Ignore the following statement on IE Mac \*/

Selector {... styles ...}

/* Ignore the end */

Box Model hack

(Applicable to IE6 or earlier versions)

It is called "Box Model hack" because it is often used to solve the box model error of IE. This hack can set different attributes for IE and other browsers. (In version 6, ie has fixed this box model error .)

# ELEM {

Width: [width in IE];

Voice-family :"\"}\"";

Voice-family: Inherit;

Width: [width in other browsers];

}

HTML> body # ELEM {

Width: [width in other browsers];

}

First, set voice-family as the string "}", but the parsing bug of IE will treat it as a backslash and add the right brackets. Select voice-family because it does not affect the page style. The second rule, using HTML> body hack, is for the browser opera7.0 before, it also has such a resolution error, but fortunately it supports sub-selector, so there is such a simple method.

Underline hack

(Applicable to IE6 and earlier versions)

Internet Explorer 6 and earlier versions can recognize attributes with an underline prefix, while other browsers ignore this attribute. Therefore, an attribute prefixed with an underscore or a hyphen becomes a proprietary attribute of IE6 and earlier browsers.

# ELEM {

Width: [W3C model width];

_ Width: [borderbox model];

}

This hack uses invalid CSS and a browser bug, but we have a valid CSS statement to do this, so this hack is not recommended.

Asterisk (hack)

(Applicable to IE7 or earlier versions)

In addition to underlines and hyphens, ie versions 7 and earlier can recognize attributes prefixed with non-letter characters, which are ignored by other browsers.

# ELEM {

Width: [W3C model width];

* Width: [borderbox model];

}

This hack is not recommended because it is the same as the preceding underline hack.

Asterisk HTML hack

(For IE4-6)

HTML elements are the root elements of W3C standard DOM (Document Object Model), but there is a mysterious parent element in IE 4 to 6 versions. A fully compatible browser ignores this * HTML selector, but the IE4-6 does. In this way, you can specify special rules for these versions of browsers. For example, this rule can specifically specify the size of text in the IE4-6, but does not work for other browsers.

* Html p {font-size: 5em ;}

This hack uses completely valid CSS.

Asterisk plus sign hack

(For IE7)

Although IE7 does not recognize the previous * HTML hack, it uses a similar new hack.

*: First-Child + html p {font-size: 5em ;}

Or:

* + Html p {font-size: 5em ;}

This Code only applies to IE7 and does not apply to any other browsers. Note that this hack only works normally in IE7 standard model and cannot be used in weird mode. This hack is also supported by the IE8 compatibility mode (equivalent to the standard mode of IE7. Like the star HTML hack, it also uses valid CSS.

Sub-Selector hack

(Applicable to IE6 and earlier versions)

IE6 and earlier versions do not support "sub-Selector" (>). We can use this to specify special rules for other browsers. For example, this rule turns paragraph text into blue in Firefox, but not in versions earlier than IE7.

HTML> body P {color: Blue ;}

Although IE7 has added support for sub-selectors, new hack is found to exclude IE7. When an empty comment is followed by a sub-selector, IE7 does not recognize the following rules, just like earlier browsers.

HTML>/**/body P {color: Blue ;}

Negative pseudo-class hack

(Ie and non-ie can be distinguished)

All versions of IE do not support css3: Not () pseudo classes. There is a variant hack used: Root pseudo class, which is also not recognized by IE.

. Yourselector {

Color: black;

}/* Values in IE */

HTML: Not ([dummy]). yourselector {

Color: red;

}/* Values in Safari, opera and Firefox */

This type of negative selector accepts any type as a parameter, attribute, common, class or ID selector, or pseudo class. Then it applies the following attributes to all elements that do not match the syntax.

Body: Empty hack

(Applicable to Firefox 2.0 and earlier versions)

: Empty pseudo class, introduced in css3, used to select elements that do not contain any content. However, geck0 1.8.1 and later versions (Application versions in firefox2.0.x and later) mistakenly select body: empty even if the body element contains content (this is generally the case ). In this way, we can provide specialized CSS rules to Firefox 2.0x and earlier versions.

/* Disable the P element in Firefox 2.0.x or earlier versions */

Body: Empty P {

Display: none;

}

This hack uses valid CSS.

! Important

(Applicable to IE8 or earlier versions)

IE8 and earlier versions have some and! It allows a value assignment with a higher priority. In IE7 and earlier versions, any string is accepted to replace important, and the value is processed normally, while other browsers ignore the value.

/* Set the text to blue in IE8 and earlier versions, and the text to black in other browsers */

Body {

Color: black;

Color: Blue! IE;

}

Similarly, IE8 and earlier versions are accepted in! Important declares the non-alphanumeric characters behind it, while other browsers ignore it.

Body {

Color: black;

Color: Blue! Important !;

}

IE6 and earlier! Important: when the same attribute of the same element in the same block of code has different values, the result is that the second value is replaced by the first one, however, IE6 and earlier versions do not.

/* Set the text to blue in IE6 and earlier versions */

Body {

Color: Black! Important;

Color: blue;

}

All these hack uses valid CSS.

Dynamic attributes

In versions 5 to 7, ie once supported a syntax suitable for dynamically changing CSS attributes, sometimes called CSS expressions. Dynamic attributes are usually mixed with other hack to compensate for attributes not supported by earlier ie versions.

Div {

Min-Height: 300px;

/* Simulate Min-height in IE6 */

_ Height: expression (document. Body. clientheight <300? "300px": "Auto ");

}

Conditional comments

Conditional comments are only recognized on Windows platform IE and supported starting from ie5. They can even be differentiated from versions 5.0, 5.5, and 6.0.

Code:

Below are some "Conditional comments" to show the IE version you are using. If you cannot see it, you are not using IE:

<P> <! -- [If IE]>

According to the conditional comment this is Internet Explorer <br/>

<! [Endif] -->

<! -- [If IE 5]>

According to the conditional comment this is Internet Explorer 5 <br/>

<! [Endif] -->

<! -- [If IE 5.0]>

According to the conditional comment this is Internet Explorer 5.0 <br/>

<! [Endif] -->

<! -- [If IE 5.5]>

According to the conditional comment this is Internet Explorer 5.5 <br/>

<! [Endif] -->

<! -- [If IE 6]>

According to the conditional comment this is Internet Explorer 6 <br/>

<! [Endif] -->

<! -- [If IE 7]>

According to the conditional comment this is Internet Explorer 7 <br/>

<! [Endif] -->

<! -- [If GTE ie 5]>

According to the conditional comment this is Internet Explorer 5 and up <br/>

<! [Endif] -->

<! -- [If lt IE 6]>

According to the conditional comment this is Internet Explorer lower than 6 <br/>

<! [Endif] -->

<! -- [If lte ie 5.5]>

According to the conditional comment this is Internet Explorer lower or equal to 5.5 <br/>

<! [Endif] -->

<! -- [If gt ie 6]>

According to the conditional comment this is Internet Explorer greater than 6 <br/>

<! [Endif] -->

</P>

Note its syntax:

-GT: higher

-LTE: less than or equal

Note:

1. Their basic structure is the same as that of HTML annotations (<! --> ). Therefore, all other browsers will ignore them as normal comments.

2. Programs in Windows Ie can recognize this special <! -- [If IE]> syntax, process if and parse the content in this comment as normal webpage content.

3. Since conditional comments use the structure of HTML comments, they can only be contained in HTML files, not CSS files. You can place the entire <link> label in a conditional comment to point to a specified style sheet. As follows:

<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] -->

IE8 hack

IE8 does not recognize CSS hack of "*" and "_", so we can use "\ 9" to differentiate ie versions.

Color: # 0000ff \ 9;/* IE6, IE7, IE8 */

* Color: # FFFF00;/* IE7 */

_ Color: # ff0000;/* IE6 */

Summary

When hack is used to hide code, the page is often not displayed properly when the browser is updated. Many hack has been used to hide CSS in IE6 and earlier versions, but does not work in version 7 because IE has improved its support for CSS standards. Microsoft's ie development team once asked people to use conditional comments instead of hack.