This is the 10th day of my participation in the August Text Challenge.More challenges in August

What is a CSS hack

Because of the different vendors browser or a different browser version (such as 6 – IE11, Firefox/Safari/Opera/Chrome, etc.), support for CSS, parsing, resulting in different browser environment appear inconsistent page display effect. At this time, in order to achieve a uniform page effect, we need to write specific CSS styles for different browsers or different versions, we call this process of writing corresponding CSS code for different browsers/different versions, called CSS hack!

How CSS hacks work

Because different browsers and versions of browsers support and parse CSS differently, as well as the impact of CSS priorities on browser presentation, we can apply different CSS for different browser scenarios.

Classification of hack,

CSS hacks generally have three forms: CSS attribute prefix method, selector prefix method and IE conditional comment method (i.e. HTML header reference if IE) Hack. In actual projects, CSS hacks are mostly introduced for the performance differences between different versions of IE browser.

Attribute prefix method (i.e. class internal Hack) :

For example, IE6 can recognize underscore “” and asterisk “*”, IE7 can recognize asterisk “*” but cannot recognize underscore “”, IE6 to IE10 know “\9”, but Firefox cannot recognize the preceding three. IE6 can recognize html. class{}, IE7 can recognize + html. class{} or *:first-child+ html. class{}.

Conditional comment Hack: for all IE(note: CONDITIONAL comment is no longer supported by IE10+) : for IE6 and below: This type of Hack applies not only to CSS, but to any code written in a judgment statement.

Method 1: conditional annotation method

This method is exclusive to Internet Explorer and recommended by Microsoft. For example, the following

Only in IE <! --[if IE]> <! [endif]--> Only works with IE6 <! --[if IE6]> this text is only displayed in IE6 <! [endif]--> Only works with IE6 or later <! --[if gte IE6]> <! [endif]--> Does not work on IE8 <! --[if! IE8]> <! [endif]--> Non-IE <! --[if!IE]> this text is only displayed in non-IE browsers <! [endif]-->Copy the code

Method two: the method of in-class attribute prefix

Attribute prefixes are used to prefix CSS style attribute names with hack prefixes that are only recognized by specific browsers to achieve the desired appearance of the page. Description:

In standard mode

  • The – minus sign is an IE6 proprietary hack
  • \9 Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Internet Explorer 9, and Internet Explorer 10 all take effect
  • “\0” in IE8, IE9, and IE10 are all valid hacks of IE8/9/10
  • \9\0 applies only to Internet Explorer 9/10 and is an Internet Explorer 9/10 hack

Method three: selector prefix method

The selector prefix method is used to hack CSS selectors with prefixes that only certain browsers can recognize for pages that are inconsistent or require special treatment.

By far the most common

The * HTML * prefix is only valid for IE6

The *+ HTML *+ prefix is valid only for IE7

@media screen\9{… } applies only to IE6/7

@media \0screen {body { background: red; }} applies only to Internet Explorer 8

@media \0screen,screen\9{body { background: blue; }} only applies to IE6/7/8

@media screen\0 {body { background: green; }} only applies to IE8/9/10

@media screen and (min-width:0\0) {body { background: gray; }} is only valid for IE9/10

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} applies only to IE10