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

Transferred from: http://blog.sina.com.cn/s/blog_6790717801011dx8.html

First, what is CSS hack?
The process of writing different CSS code for different browsers is called CSS hack!

CSS hack because of different browsers, such as Internet explorer6,internet Explorer 7,mozillafirefox, The parsing of CSS is not the same, so it will result in a different page effect and not get the page effect we need.
This time we need to write different CSS for different browsers, so that it can be compatible with different browsers, can be in different browsers can also get the desired page effect. What is the principle of the

css hack
because different browsers support and parse the CSS differently, because of the precedence in CSS. We can write different CSS for different browsers according to this. The
CSS Hack has roughly 3 representations, the CSS class internal Hack, the selector Hack, and the HTML header reference (if IE) Hack,csshack primarily for IE browsers. The
class internal hack: For example, IE6 can recognize the underscore "_" and the asterisk "*", IE7 can recognize the asterisk "*", but does not recognize the underscore "_", and Firefox two are not recognized.
Selector hack: For example IE6 can identify *html. CLASS{},IE7 can identify *+html.class{} or *:first-child+html. class{}.
HTML Header Reference (if IE) Hack:!--Your code for all ie:<!--[ifie]><--><! [Endif]--> for IE6 and the:<!--[Iflt ie7]><!--Your code--><! [Endif]--> This type of hack takes effect not only on CSS, but on all code written in the judgment statement. The
Writing order is usually written in the back of the CSS of a highly recognizable browser. Here's how to write it in more detail.

How to write CSS Hack
For example, to distinguish between IE6 and Firefox two browsers, you can write:

<style>
div{
Background:green;
*background:red;
}

</style>

See in the IE6 is red, in Firefox see is green.
The above CSS in Firefox, it is not aware of the back of the thing with the asterisk is what, so it filtered out, ignored, the result of the analysis is: Div{background:green}, so naturally this div background is green.
In IE6, it can be identified by the two background, which results in the following: div{background:green;background:red;}, so according to the priority level, in the back of the red priority is high, So of course the background color of this div is red.

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.

Cssfilter or hack is a code that shows or hides CSS tags based on the browser type and 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. Annotations ending with \*/are not properly closed on iemac, so those that need to be ignored can be placed behind such annotations.

　　

Selector {...}

　　

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 html>bodyhack, 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: [modelwidth];

_width: [Borderboxmodel];

}

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: [modelwidth];

*width: [Borderboxmodel];

}

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 ObjectModel), 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 * Htmlhack, 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 htmlhack, 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;

}

Html:not ([dummy]). yourselector{

color:red;

}

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 to firefox2.0x and the following versions.

　　

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.

　　

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.

　　

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;

　　

_height:expression_r (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><!--[ifie]>

According to the conditionalcomment the Internet explorer<br/>

<! [endif]-->

<!--[If ie5]>

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

<! [endif]-->

<!--[If ie5.0]>

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

<! [endif]-->

<!--[If ie5.5]>

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

<! [endif]-->

<!--[If ie6]>

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

<! [endif]-->

<!--[If ie7]>

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

<! [endif]-->

<!--[if GTE ie5]>

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

<! [endif]-->

<!--[If Lt ie6]>

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

<! [endif]-->

<!--[If LTE ie5.5]>

According to the conditionalcomment this is Internet Explorer lower or equal to5.5<br/>

<! [endif]-->

<!--[If GT ie6]>

According to the conditionalcomment 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.

The program in 2.WindowsIE recognizes this special <!--[ifie]> syntax, handles if and parses the contents of this comment 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:

<linkhref= "All_browsers.css" rel= "stylesheet" type= "Text/css" >

<!--[ifie]> <link href= "ie_only.css" rel= "stylesheet" type= "Text/css" ><! [endif]-->

<!--[if LT ie7]> <link href= "ie_6_and_below.css" rel= "stylesheet" type= "Text/css" ><! [endif]-->

<!--[if!lt ie7]><! [ignore[--><![ Ignore[]]><link href= "Recent.css" rel= "stylesheet" type= "Text/css" ><!--<! [endif]-->

<!--[if! ie]>--> <linkhref= "Not_ie.css" rel= "stylesheet" type= "Text/css" ><!--<! [endif]-->

IE8 hack

IE8 does not recognize the "*" and "_" csshack, so we can use "\9" to differentiate the various versions of IE.

Color: #0000FF \9;;

*color: #FFFF00;

_color: #FF0000;

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.

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