The role of Plus, asterisk, and other symbols in CSS

In the ideal world, the right CSS should work well in any CSS-enabled browser. Unfortunately, we don't live in an ideal world, and browsers are riddled with bugs and inconsistencies. To create a cross-browser and display consistent page, CSS developers must do their best. By using bugs and non-implemented CSS, developers can apply different rules for different browsers. Hack and filter are powerful weapons for developers. It is important to understand the various common hacks and how they work, but it is equally important to know when and when to use them.

CSS filter or hack is a code used to show or hide CSS tags based on the browser type, version number. Browsers have different interpretations of CSS behavior, and the level of support for the standard is not the same. CSS filters are often used to achieve a consistent layout appearance across multiple browsers because some browsers cannot render. HACK (hacker) Such a name is somewhat negative, in essence, personal to the CSS code unofficial changes, misleading people think there is a better way to achieve the goal, but in fact we do not, some people like to use patches (patch) to call it, so that people can know that this is the browser caused by the error.

Backslash symbol

This hack takes advantage of a bug in IE on a Mac platform. Comments that end with \*/are not properly closed on IE Macs, so statements that need to be ignored can be placed behind such comments.

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

Selector {...}

/* Ignore end */

Box model hack

(for IE6 versions below)

Call it "box model hack" because it is often used to solve the box model error of IE, this hack can set different properties for IE and other browsers. (IE has fixed this box model error in version 6 o'clock.) ）

#elem {

Width: [breadth in IE];

voice-family: "\"}\ "";

Voice-family:inherit;

Width: [Widths in other browsers];

}

Html>body #elem {

width:[width in other browsers];

}

First, the voice-family is set to the string "}", but the IE parsing bug treats it as a backslash plus a closing parenthesis. Select voice-family because it does not affect the page style. The second rule, which uses the Html>body hack, is for Opera7.0 before the browser, it also has such parsing errors, but fortunately it supports the sub-selectors, so there is such an easier way.

Underline hack

(Applies to IE6 and the following versions)

Versions of IE 6 and below can recognize attributes with an underscore prefix, while other browsers ignore it. As a result, a property preceded by an underscore or hyphen becomes a proprietary property of IE6 and the following versions of the browser.

#elem {

Width: [Model width];

_width: [BorderBox Model];

}

This hack uses an invalid CSS, using a browser bug, but we have a valid CSS statement to complete such a thing, so this hack is not recommended to use.

Asterisk hack

(for IE7 versions below)

In addition to underscores and hyphens, versions 7 and under IE can recognize attributes that are prefixed with non-alphabetic characters, and other browsers ignore them.

#elem {

Width: [Model width];

*width: [BorderBox Model];

}

This hack is not recommended because it is the same as the underscore hack above.

Asterisk HTML hack

(For ie4-6)

HTML elements are the root elements of the standard Dom (Document Object Model), but the version of IE 4 to 6 also has a mysterious parent element. A fully compatible browser ignores this * HTML selector, but IE4-6 will handle it normally. This allows specific rules to be specified for these versions of the browser. For example, this rule can specifically specify the size of the text in ie4-6, but it does not work for other browsers.

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

This hack uses a completely effective CSS.

Asterisk plus hack

(For IE7)

Although IE7 no longer recognizes 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 applies only to IE7 and not to any other browser. Note that this hack only works properly in the IE7 Standard model and is not available in weird mode. This hack is also supported by IE8 compatibility mode (equivalent to IE7 standard mode). As with the asterisk HTML hack, it also uses a valid CSS.

Sub selector hack

(For IE6 and below versions)

IE6 and earlier versions do not support "sub-selectors" (>), which we can use to specify special rules for other browsers. For example, this rule can make paragraph text in Firefox blue, but not in the previous version of IE7.

HTML > body p {color:blue;}

Although IE7 added support for the sub-selectors, it was found that the new hack could also exclude IE7. When an empty comment is immediately followed by a sub-selector, IE7 does not recognize the following rule, as it did in earlier versions of the browser.

HTML >/**/body p {color:blue;}

Negative pseudo-class hack

(Can differentiate IE and non IE)

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

. yourselector {

Color:black;

}/* value in IE */

Html:not ([dummy]). yourselector {

color:red;

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

This negative selector accepts any type as a parameter, property, generic, class or ID selector, or pseudo-class. It then applies the subsequent attributes to all elements that do not match this syntax.

Body:empty hack

(For Firefox version 2.0 and below)

: The empty pseudo-class, introduced in CSS3, is used to select elements that do not contain any content. However, Geck0 1.8.1 and later versions (applied in firefox2.0.x and later versions) mistakenly selected Body:empty even if the BODY element contains content (which is generally the case). This allows us to provide dedicated CSS rules for Firefox 2.0x and below.

/* Let P element not display in Firefox 2.0.x and below * *

Body:empty p {

Display:none;

}

This hack uses a valid CSS.

！ Important eccentric

(for IE8 versions below)

IE8 and the following versions have some!imporant-related eccentric that allow for a higher assignment priority. IE7 and earlier accept arbitrary strings instead of important, and the value is handled normally, while other browsers are ignored.

/* text in IE8 and below is blue, other browsers are black */

Body {

Color:black;

Color:blue!ie;

}

Similarly, IE8 and earlier versions accept non-alphabetic symbols after the!important declaration, while other browsers ignore it.

Body {

Color:black;

Color:blue!important!;

}

IE6 and the following version have a!important problem, when the same element in the same piece of code block the same attribute has a different value, the result is the second value is replaced by the first, but IE6 and lower version does not do so.

/* Set the text to blue in IE6 and below * *

Body {

Color:black!important;

Color:blue;

}

All of these hack use a valid CSS.

Dynamic Properties

Versions 5 through 7,ie have supported a syntax for dynamically changing CSS properties, sometimes referred to as CSS expressions. Dynamic properties are often mixed with other hack to compensate for properties that are not supported in earlier versions of IE.

div {

min-height:300px;

/* Simulate min-height in IE6 */

_height:expression (Document.body.clientHeight < 300?) "300px": "Auto");

}

Conditional comments

Conditional annotations are only recognized on the Windows platform's IE and are supported from IE5, and can even differentiate between version 5.0,5.5 and 6.0.

Code:

Here are some "conditional comments" that show the version of IE you are using. If you can't see it, then you're 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 an 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 the syntax of it:

-GT: Above

-LTE: Below or equivalent

Description

1. They have the same basic structure as HTML annotations (<!---->). So all other browsers will ignore them as normal annotations.

2.Windows IE programs can recognize this special <!--[if ie]> syntax, handle if and parse the contents of this note as if it were normal web content.

3. Since conditional annotations use the structure of HTML annotations, they can only be included in HTML files, not in CSS files. You can put the entire <link> tag in "conditional comments", pointing to a specified style sheet. As shown below:

<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 the "*" and "_" CSS hack, so we can use "\9" to differentiate the various versions of IE.

Color: #0000FF \9;; /*ie6,ie7,ie8*/

*color: #FFFF00; /*ie7*/

_color: #FF0000; /*ie6*/

Summary

Using hack to hide code often causes the page to display abnormally when the browser is updated. Many hack have been used to hide CSS in IE6 and earlier versions, but no longer works under version 7 because IE has improved support for CSS standards. Microsoft's IE development team has asked people to use conditional annotations instead of using hack.

　　

Article derived from: http://www.zgxmwjjg.com

Finishing: http://lixiao.freetzi.com

The role of Plus, asterisk, and other symbols in CSS