Css style and css style sheet

Source: Internet
Author: User
Tags html header

Css style and css style sheet

Front-end styles do not often require hack, but we often encounter inconsistencies in the performance of various browsers. Based on this, we are reluctant to use this unfriendly method in some situations to achieve the page performance that everyone needs. I personally do not recommend using hack. If you want to know a good front-end, try not to use hack to meet your requirements and achieve a better user experience. However, the reality is too cruel. The legacy problems of browser vendors make it difficult for us to compromise with hack when needed, although this is only a few cases. Today, based on my own experience and understanding, I have made several demos to put IE6 ~ IE10 makes a summary with CSS hack from other standard browsers. Maybe this article is the most comprehensive summary.

What is CSS hack?

Because different vendors or different versions of a browser (such as IE6-IE11, Firefox/Safari/Opera/Chrome, etc.), the CSS support, parsing is not the same, this results in inconsistent page display effects in different browser environments. In this case, we need to write specific CSS styles for different browsers or versions to achieve a unified page effect, the process of writing the corresponding CSS code for different browsers/versions is called CSS hack!

CSS hack Principle

Because different browsers and different versions have different CSS support and resolution results, and the effect of CSS priority on Browser display results, we can apply different CSS based on different browser scenarios.

CSS hack Classification

CSS Hack has three forms: CSS attribute prefixes, selector prefixes, and IE condition comments (if IE is referenced in the HTML header) Hack, in actual projects, most CSS Hack is introduced for the performance differences between different versions of IE browsers.

  • Attribute prefix (that is, the internal Hack of the class): for exampleIE6 can recognize underlines "_" and star numbers "*",IE7 can recognize asterisks "*", but cannot recognize underscores "_",IE6 ~ IE10 knows "\ 9"But none of firefox's three mentioned above.
  • Selector prefix (that is, selector Hack): for exampleIE6 can recognize * html. class {},IE7 can recognize * + html. class {} Or *: first-child + html. class {}.
  • IE condition annotation method (HTML condition annotation Hack ):For all IE (Note: IE10 + does not support condition annotations anymore): <! -- [If IE]> content displayed in IE <! [Endif] --> for IE6 and earlier versions: <! -- [If lt IE 6]> only content displayed in IE6 <! [Endif] -->. This type of Hack not only takes effect for CSS, but also for all code written in the judgment statement.

The CSS hack writing sequence is generally defined in front of CSS with a wide range of applicability and strong recognition capabilities.

CSS hack Method 1: Condition annotation method:

This is the proprietary Hack method of IE browser, which is officially recommended by Microsoft. Example:

Effective only under IE <! -- [If IE]> This text is only displayed in IE browser <! [Endif] --> only effective under IE6 <! -- [If IE 6]> This text is only displayed in IE 6 browser <! [Endif] --> only available in IE6 or later versions <! -- [If gte IE 6]> This text is only displayed in IE 6 or later versions <! [Endif] --> it only takes effect on IE8 <! -- [If! IE 8]> This text is displayed in a non-IE8 browser <! [Endif] --> valid for non-ie browsers <! -- [If! IE]> This text is only displayed in a non-IE browser <! [Endif] -->
CSS hack Method 2: Class Attribute Prefix:

Attribute prefixes are prefixed with hack that can only be recognized by a specific browser before the CSS style attribute names to achieve the expected page display effect.

CSS hack table of each version of IE browser

Note: In standard mode

  • "-" Minus signs are IE6 proprietary hack
  • "\ 9" IE6/IE7/IE8/IE9/IE10 all take effect
  • "\ 0" IE8/IE9/IE10 all take effect, which is the hack of IE8/9/10
  • "\ 9 \ 0" only applies to IE9/IE10, which is the hack of IE9/10.
<Script type = "text/javascript"> // alert (document. compatMode); </script> <style type = "text/css"> body: nth-of-type (1 ). iehack {color: # F00;/* CSS hack for Windows IE9/Firefox 7 +/Opera 10 +/all Chrome/Safari, the selector also applies to almost all Mobile/Linux/Mac browser */}. demo1 ,. demo2 ,. demo3 ,. demo4 {width: 100px; height: 100px ;}. hack {/* demo1 * // * demo1 pay attention to the sequence. Otherwise, IE6/7 may not be correctly displayed, resulting in a white background */background-color: red; /* All browsers */B Ackground-color: blue! Important;/* All browsers but IE6 */* background-color: black;/* IE6, IE7 */+ background-color: yellow;/* IE6, IE7 */background-color: gray \ 9;/* IE6, IE7, IE8, IE9, IE10 */background-color: purple \ 0;/* IE8, IE9, IE10 */background-color: orange \ 9 \ 0;/* IE9, IE10 */_ background-color: green; /* Only works in IE6 */* + background-color: pink;/* WARNING: Only works in IE7? Is it right? * //}/* You can use javascript to detect IE10 and add class = "IE10" to the 

Demo1 is used to test the hack Display Effect in different ie browsers.
IE6: pink,
IE7: pink,
IE8 is displayed in blue,
IE9 is displayed in blue,
Firefox/Chrome/Opera: blue,
If you remove! If the important attribute is defined, IE6/7 is still pink, IE8 is purple, IE9/10 is orange, Firefox/Chrome is red, and Opera is purple. Isn't it strange: Except IE6, all other performances meet our expectations. So why is the color displayed in IE6 not green but * + background-color: pink? Is it the last such thing as IE7 private hack? Isn't it that * + is the private hack of IE7 ??? Wrong. You may be too careless! We often say that the * + html selector format for IE7 exclusive * + hack is * + html selector, rather than adding the * + prefix to the attribute directly. If you want to customize a special style for IE7, use the following method:

*+html #ie7test { /* IE7 only*/color:green;}

After testing, I found that the attribute prefix * + is only known by IE6 and IE7. * + Html selector is only known to IE7. Therefore, we must pay special attention when using it.

Demo2 instances are used to differentiate ie6 ~ in standard mode ~ Hack of ie9 and Firefox/Chrome. Pay attention to the sequence.
IE6 is displayed in green,
IE7: black,
IE8 is displayed in red,
IE9 is displayed in blue,
Firefox/Chrome: orange,
(In this example, IE10 works the same as IE9, and the latest Opera version works the same as IE8)

Demo3 instances are also used to differentiate ie6 ~ in standard mode ~ Hack of ie9 and Firefox/Chrome. Pay attention to the sequence.
IE6 is displayed in red,
IE7 is displayed in blue,
IE8 is displayed in green,
IE9: pink,
Firefox/Chrome: orange,
(In this example, IE10 works the same as IE9, and the latest Opera version works the same as IE9 in pink)

Demo4 instances are used to differentiate ie6 ~ in standard mode ~ Ie10 and Opera/Firefox/Chrome hack. In this example, pay special attention to the sequence.
IE6: orange,
IE7: pink,
IE8: Yellow,
IE9 is displayed in purple,
IE10: Green,
Firefox: blue,
Opera: black,
Safari/Chrome: Gray,

CSS hack method 3: Selector prefix method:

The selector prefix method is used for browsers with inconsistent page performance or special treatment. Before the CSS selector, add some prefixes that can only be recognized by certain browsers for hack.

Currently, the most common is

* Html * prefix only takes effect for IE6 * + html * + prefix only takes effect for IE7 @ media screen \ 9 {...} valid only for IE6/7 @ media \ 0 screen {body {background: red;} Only for IE8 @ media \ 0screen \, screen \ 9 {body {background: blue ;}} only valid for IE6/7/8 @ media screen \ 0 {body {background: green;} only valid for IE8/9/10 @ media screen and (min-width: 0 \ 0) {body {background: gray;} is valid only for IE9/10 @ media screen and (-ms-high-contrast: active ), (-ms-high-contrast: none) {body {background: orange ;}} is only valid for IE10, etc.
 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.