CSS Browser-compatible methods

Browser-compatible methods

Developers are basically aware that the development of CSS itself is not difficult, but when testing the code under different browsers, the difficulty arises. Browser bugs and inconsistent displays are a major challenge for most CSS developers, and your design looks good on one browser, and may be fragmented on a different browser.

The practice proves that the compatibility of CSS mainly has two kinds of situations: one is compatibility with old version ie, and one is the compatibility after using CSS3 new feature.

The compatibility of the old version ie, mainly through the CSS hack and client script to solve, the use of CSS3 new features after the compatibility, mainly through the browser private prefix to solve. CSS Hack

Because different vendors ' browsers (ie, Chrome, Firefox, Safari), or different versions of the same browser (such as IE6~IE11), the parsing of the CSS is not exactly the same, resulting in the same page in different browsers may not be consistent effect.

In order to achieve a unified effect, you need to target different browsers, or different versions of the same browser, write different CSS, this process is called CSS Hack.

The practice proves that CSS hack is mainly used to solve the compatibility problem of IE. Although it is a powerful tool, it should be used with caution, and it is generally used as the last barrier to fix the problem. Because it's more important to track, isolate, and identify problems than fix them. You can find the best solution only if you really understand the rationale behind the problem.

The CSS Hack has 3 forms of expression:

1) attribute prefix or suffix method

That is, when you define a style rule, you add a prefix or suffix that only a specific browser, or a specific version of a browser, can recognize for a style property.

table 10-1 Common prefix suffix description and application example

prefix/suffix	applicable version	application example
_	IE6	p {_color:blue;}
-	IE6	p {-color:blue;}
+	IE7	p {+color:blue;}
*	ie6/ie7	p {*color:blue;}
#	ie6/ie7/ie8	p {#color: blue;}
!important	ie7/ie8/ie9/ie10/ie11	p {color:blue!important;}
\9	ie6/ie7/ie8/ie9/ie10/ie11	p {color:blue\9;}
/	ie8/ie9/ie10/ie11	p {color:blue\0;}
\9\0	ie9/ie10/ie11	p {color:blue\9\0;}

When using the attribute prefix or suffix method, it is generally written in the front with a wide range of applications and strong recognition ability, and write the special wording in the back. Such as:

div {background:blue;      background:green\9;      *background:black;  _background:orange; }

Because all browsers recognize the standard notation, IE6/IE7/IE8/IE9/IE10/IE11 recognizes that the \9,IE6/IE7 recognizes that *,IE6 can only recognize _. Based on the CSS overlay principle, the post-defined attribute overrides the first defined attribute with the same name, which enables different styles to be applied for both versions of IE and for modern browsers.

2) Selector Prefix method

That is, before the CSS selector, add a prefix that is only recognized by a specific browser or specific version of a browser, separated by a space between the selector and the prefix.

The commonly used prefixes are *html and *+html,*html are IE6 specific prefixes, and *+html is a unique prefix for IE7. Such as:

*html p {color:blue;}  /* IE6 */*+html p {color:blue;} /* IE7 */

3) Conditional Annotation method

Conditional comments are proprietary to IE and are the official recommended hack by Microsoft. It is the use of IE conditional comments, for different versions of IE, to write different CSS, to different versions of IE to apply different styles.

One way is to define the style directly in the conditional comment. Such as:

<style> <!--[if IE 6]> div {display:inline;} <! [endif]--> </style>

While this approach solves some real-world problems, these annotations need to be placed in an HTML file, not a CSS file, where style definitions are scattered in multiple places, inconvenient for maintenance, and prone to errors. It also violates the principle of separation of content from performance, so it is not recommended.

Another way is to write a different CSS file, and then use the IE conditional comment, through the <link> tag, to load the external style sheet targeted. Such as:

<!--[if IE 6]> <link rel= "stylesheet" href= "Css/ie6.css"/> <! [endif]-->

This method will increase the number of HTTP requests for IE users, affecting the speed of access. So, before using this method, be careful and decide if it is really necessary to use it on your website.

The good news is that conditional annotations are no longer supported starting with the IE10 version. This marks the trend of IE from mature to standard, web designers no longer have to be bothered by the compatibility of IE.

The wish is good, but the reality is cruel. Many web designers still find that the same CSS, the rendering effect on IE9/10/11, is not the same as other modern browsers.

In other words, we still need conditional annotations. Then, on the IE10/11 that do not support conditional annotations, the effect of conditional annotations can be achieved.

The answer is yes. Also, there are several ways to achieve the alternative effect of conditional annotations. And, they have their own application scenarios, which can be selected for use as needed.

Method One: Use the IE = EmulateIE9 property to instruct the browser to use IE9 rendering mode:

<meta http-equiv= "x-ua-compatible" content= "IE=EMULATEIE9" >

Since IE9 is a conditional comment, the IE10/11 uses the IE9 rendering mode to recognize conditional annotations naturally after adding the above metadata to the header of the page.

Obviously, the disadvantage of this is that the browser is using the IE9 rendering mode instead of the latest IE10/11 rendering mode.

Method Two: Use the +-ms-high-contrast property of the media query statement to apply different styles to different browsers.

CSS Media query statement is an advanced CSS conditional statement, it can be based on some properties and property values of the results, to determine whether CSS can be effective.

Because only IE10/11 implements the-ms-high-contrast property, the value is active or none. Therefore, you can use the following media query statements:

@media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {/* ie10+ CSS styles go ' here */}

Firefox browser, Chrome browser does not recognize this attribute, the CSS in this statement will not take effect, it is indirectly implemented the effect of conditional annotations.

Method Three: Use JavaScript to determine the type of browser to define different styles for different browsers.

First use JavaScript to determine the browser type, if it is IE browser, on the page's

<script> var ms_ie = false; var ua = window.navigator.userAgent; var old_ie = Ua.indexof ("MSIE");