CSS hack analysis for different browser versions

Good day, dear.
I want to warn that this is my original article, this is not a repost from someone else's blog.
I propose to review the review of hacks for layout. Khaki were selected from various resources and carefully systematized. Why did I do it and why? Yes, hacks are easy to find on the Web, but in my IMHO the feed of the material leaves much to be desired, because There is no overall picture, it is unclear often which browsers support this hack - and if such infa is given, then in a very extensive form like "and this is for safari and opera."

I selected 24 characteristic hacks and tested their work in 18 browsers of 4 families (FifeFox, Opera, Safari, Chrome). As a result, I got the following table:


It can be judged when the hack is interpreted by several browser families at once, or by several versions of the same family, or you can quickly find a hack unique to this family (version) of the browser. The horizontal numbers of the hacks are plotted horizontally - their code can be found in the table below, on the left - the family and browser version (FF is Firerox (:)), in the area of ​​intersection there is a filled cell if the hack affects this browser version.
Note: a number of hacks act on ie - but the “conditional comments” will save the Russian fathers ...
What should we have during a cursory examination of the table?

1. Unique hacks are for all families except Chrome
2. despite the fact that there is no hack for FF 2 (its rendering is significantly different from the 3rd version and delivers a lot ...), there is a relatively simple ear trick that allows you to defeat the reluctance of the 2nd version of FF to understand display-inline (for example )
3. Opera hacks cover a number of versions, but not all, but you can use both hacks at once if necessary.
4. It is hardly necessary, but you can separate chrome from safari with a combination of hacks No. 14, No. 23 and redefining the style for FF 3.0 with hack No. 23
5. oddly enough, there are hacks that someone published somewhere, but do not work (№№ 2,11,21)
6. Khaki - evil and better not to use them

I will give an example of style redefinition when using a hack that affects several versions or families using the following task as an example: select a style for FF 2.0 (point 2, comes up with doping to point 4.)
Initial data:
we have 3 hacks that understand only FF: №№ 3, 4, 5, and number 5 only understand FF younger than version 3.0 (but there are no guarantees that subsequent versions will understand it - this is also a lack of hacks).
Decision:
1. determine the style of the element in CSS without hacks for all other browsers.
p {
color: red;
}


2. use hack for FF of all versions, our CSS file is an example of the form:
p {
color: red;
}

x:-moz-any-link,p
{
color: red
}

3. in order for FF> = 3.0 not to apply the last style to an element, we redefine it with a hack and set AFTER the hack from the previous paragraph. CSS is:
')
p {
color: red;
}

x:-moz-any-link,p {
color: red
}

x:-moz-any-link,x:default,p{
color: red
}

Below is a table of hacks with code and numbers - some hacks have several versions. Instead of # selector # there can be any CSS construction like #index p .class

one	html * selector {background: red}, html: root * selector {background: red}
2	-
3	@ -moz-document url-prefix () { selector {background: red} }
four	x: -moz-any-link, selector {background: red}
five	x: -moz-any-link, x: default, selector {background: red}
6	noindex: -o-prefocus, selector {background: red}
7	html: root selector {background: red}
eight	body: first-of-type selector {background: red}
9	media all and (min-width: 0) { selector {background: red} }
ten	html: not ([lang * = ""]): not (: only-child) selector {background: red}
eleven	not all and (-webkit-min-device-pixel-ratio: 0) { selector {background: # ff0000;} }
12	* | html [xmlns * = ""] selector { background: # Ff0000; }
13	html: first-child selector { background: # Ff0000; }
14	body: last-child: not (: root: root) selector { background: red; }
15	html [xmlns * = ""] body: last-child selector { background: red; } media all and (min-width: 1px) {{} selector {background: red; }}
sixteen	media all and (min-width: 1px) { selector {background: red; }}
17	media all and (width) { selector {background: red; }}
18	media all and (min-width: 0px) { head ~ body selector {background: red; } }
nineteen	html: not ([lang * = ""]) selector {background: red; }
20	html: not ([lang]) selector {background: red; }
21	html: not [lang * = ""] selector {background: red; }
22	html: not ([lang * = ""]): not (: only-child) selector {background: red; }
23	html: not (: nth-child (1)) selector {background: red; }
24	media screen and (-webkit-min-device-pixel-ratio: 0) { selector {background: red; } }

PS I run my blog on our corporate website.

UPD: taking objective criticism, made a review of a significant number of hacks in the next post Part 2