Introduction to CSS Hack technology _css

1.IE Conditional Annotation Method:

<!--{if ie}>
<link type= "text/css" href= "Test.css" rel= "stylesheet"/>
<!{ Endif}-->

CSS file test.css only loaded into IE browser, for non-IE browser will ignore this point

<!--{if IE 6}>
<link type= "text/css" href= "Test.css" rel= "stylesheet"/>
<!{ Endif}-->

Load CSS files for a specific version of the browser

For a range of the version of IE for hack, you can combine LTE (less than equal), lt (less than), GTE (greater than equals), GT (greater than), (not equal to), and so on keywords to comment

Example: only valid for versions above IE6

<!--{if GT IE 6}>
<link type= "text/css" href= "Test.css" rel= "stylesheet"/>
<!{ Endif}-->

Not effective only on IE7

<!--{if  ! IE 7}>
<link type= "text/css" href= "Test.css" rel= "stylesheet"/>
<!{ Endif}-->

A conditional annotation can contain not only the link label, but also the following style hack

<!--{if  IE 6}>
<style type= "Text/css" >
test{margin-top:20px}
</style>
<! {endif}-->

You can do some JS hack, as shown in the following code:

<!--{if IE 6}>
<script type= "Text/javascript" >
   alert (' I am ie 6 ')
</script>
<!{ Endif}-->

Advantages: IE conditional annotation is Microsoft's official recommended hack approach, from the forward compatibility considerations, is the safest hack way

Disadvantage: Spread the style under the same CSS selector to three files to control, increase the cost of development and maintenance

2. Selector Prefix method:

Principle: Prefix the CSS selector with a number of prefixes that only a specific browser can recognize, allowing certain styles to take effect only for specific browsers. For example, the "*html" prefix only takes effect for IE6, and the "*+html" prefix only takes effect for IE7

1 *:ie Browser can recognize the * symbol, but other browsers such as: Firefox,opera,chrome, etc. can not recognize

2!important:ie7 not only can recognize the *, but also can identify!important, and IE6 can only identify the former

3)/9 IE8 Exclusive

4) Firefox:-moz-box-shadow

5) Safari:-webkit-box-shadow

6) Opera:-o-box-shadow

Example

<style type= "Text/css" >
    test{width:80px;}
    *html.test{width:60px;}
    *+html.test{width:70px}
</style>

Advantages:. Test styles can be centralized, maintainable, and risk backward compatibility

Disadvantages: cannot be used on inline styles, such as <div class= "test" style= "width:60px" ></div> cannot use the selector prefix method to hack

3. Style attribute Prefix method:

Rationale: Prefix the property names of the styles, which take effect only under a specific browser. For example: "_" Only under the IE6, "*" in IE6 and IE7 under the effective

Example

<style type= "Text/css" >
   test{width:80px;*width:70px;_width:60px;}
</style>

Advantages: Higher aggregation than the selector prefix method, more streamlined code, and more maintainability. can be used for inline styles, such as <div class= "test" style= "width:80px;*width:70px;_width:60px" ></div>

Disadvantage: There is a risk of backward compatibility,