CSS hack analysis for various 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 consider a review of hacks for layout. The hacks were selected from various resources and carefully systematized. Why did I do this and why? Yes, hacks are easy to find on the Web, but on my IMHO the presentation of the material is poor. 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 such as "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:


You can judge by it 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 serial numbers of the hacks are laid out horizontally - their code can be found in the table below, on the left is the browser family and version (FF is Firerox (:), in the intersection area there is a filled cell if the hack affects this version of the browser.
Note: a number of hacks also affect ie - but “conditional comments” will save the Russian fathers ...
What should we do when we look at the table briefly?

1. unique hacks for all families except Chrome
2. in spite of 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 feint with your ear that allows you to defeat the reluctance of the 2nd version of FF to understand display-inline (for example )
3. hacks for Opera cover a number of versions, but not all, however, you can apply both hacks at once if necessary
4. unlikely to be needed, 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. strangely enough, there are hacks that were published somewhere by someone, but do not work (No. 2, 11, 21)
6. Khaki is evil and it is better not to use them

I’ll give an example of redefining styles when using a hack that affects several versions or families using the following task as an example: highlight a style for FF 2.0 (point 2, fits with step 4).
Initial data:
we have 3 hacks that understand only FF: No. No. 3.4.5, with No. 5 being understood only by FF younger than version 3.0 (but there is no guarantee that future versions will understand it too - this is the lack of hacks).
Solution:
1. define the style of the element in CSS without hacks for all other browsers. 2. apply a hack for FF of all versions, our CSS file is an example of the form: 3. so that FF> = 3.0 does not apply the last style to an element, redefine it with a hack and set AFTER the hack from the previous paragraph. CSS has the form:
p {
color: red;
}



p {
color: red;
}

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



p {
color: red;
}

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

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

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

1	html * selector {background: red}, html: root * selector {background: red}
2	-
3	@ -moz-document url-prefix () { selector {background: red} }
4	x: -moz-any-link, selector {background: red}
5	x: -moz-any-link, x: default, selector {background: red}
6	noindex: -o-prefocus, selector {background: red}
7	html: root selector {background: red}
8	body: first-of-type selector {background: red}
9	media all and (min-width: 0) { selector {background: red} }
10	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; }
thirteen	html: first-child selector { background: # Ff0000; }
14	body: last-child: not (: root: root) selector { background: red; }
fifteen	html [xmlns * = ""] body: last-child selector { background: red; } media all and (min-width: 1px) {{} selector {background: red; }}
16	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; } }
19	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 keep my blog on our corporate website.

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