Css hack Principle

I have read several articles about css hack recently, and I think it is a good preparation.

Css hack many people do not understand its principles. In fact, we all know that different browsers have different levels of CSS resolution, which leads to different page effects; this process is called CSS hack. instead of the hack, we can say that css hack is a "curve saving" strategy that achieves compatibility based on different browser rules and standards. Even so, we still hope that the world will be the same, there is a unified standard that can unify browser specifications T

Css hack is mainly based on

1. the browser's support for CSS and resolution results are different;

2. Relationship between priorities in CSS.

There are three common CSS hack Methods: CSS internal hack, selector hack, and HTML header reference. The first method is the most commonly used.

A.css internal hack:

The hack syntax in CSS is like this.Selector { ? Property: value ?;} For example, IE6 can recognize underscores (_) and star numbers (*). IE7 can recognize asterisks (*) but cannot recognize underscores (_). firefox cannot recognize both of them. For the relationship between writing order, CSS of browsers with strong recognition ability is generally written behind.

In this way, an hack is successfully performed on IE6, 7;

For example, "! Important is not recognized only by IE6, and can be recognized by other versions of IE and modern browsers.

Other versions of IE and modern browsers can be identified, as well as "+", "\ 0", "\ 9", etc. Here we steal a picture:

	IE6	IE7	IE8	IE9	IE10	Modern Browser
*
+
-
! Important
\ 9
\ 0
\ 9 \ 0

B. selector hack

The selector hanck mainly targetsIE browserIn fact, it is not often used.

The syntax is as follows: Selector {sRules}

Steal another image:

	IE6	IE7	IE8	IE9	IE10	Modern Browser
* Html
* + Html
: Root

The hack for IE9 can be written in this way.

:root .test{    background-color:green;}

C. HTML header reference

HTML header reference is special. Similar to program statements, it can only be used in HTML files, but not in CSS files,And can be executed only in IE browserIn other browsers.

For example:

Note:
Lte: Short for Less than or equal to, that is, Less than or equal.
Lt: Short for Less than, that is, Less.
Gte: Short for Greater than or equal to, that is, Greater than or equal.
Gt: Short for Greater than, that is, Greater.
! : It means not equal, which is the same as the non-equal identifier in javascript.

For more information about how to use hack in various mainstream browsers, refer to this article (more IE tools are required for Visual Testing ):

Http://www.w3cplus.com/css/browser-hacks.html

There are also websites dedicated to listing hack situations: http://browserhacks.com/