Collection of hacks

In this post I tried to collect all the hacks known to me for css. Many may doubt their need for normal modern browsers, because most of them have always been used only for IE, but this post is more likely for the curious :), it’s generally better not to use hacks in the layout. But anyway, since they exist, it’s a sin not to know about them.

Unlike many hacks for the same Opera, which will also be processed by Safari, I changed the code a little and Opera 9.2, Opera 9.5 and Safari 3 will see each their own css.

I created a css file, which in the body of the document will display or hide divs that correspond to the browser, so you can easily track if everything is OK with a hack.
')
.browser { position : absolute ; top : 0 px ; right : 0 px ; z-index : 2 ; padding : 10 px }
.browser div { display : none }

/ * All sane browsers * /

*: lang (en) #lightMOD { display : block } / * Sly selector - all modern browsers are not IE6 or IE7 * /
html> / ** / body #lightMOD { display : block } / * Implanted comment - all modern browsers are not IE6 or IE7 * /

/ * IE * /

* html # lightIE6 { display : block } / * Parse loyalty - will work in IE6 and in quirks mode in IE7 * /
* + html # lightIE7 { display : block }

body div.stopper {
width : 100 % ;
max-width : 1100 px ;
min-width : 900 px ;
* width : expression (document.body.clientWidth > 1100 ? "1100px" : document.body.clientWidth < 900 ? "900px" : "100%" ); / * override of one property - in this case, emulation is min- and max-width * /
}

/ * FireFox * /

@ -moz-document url-prefix () {

/ * for all FireFox, in general, you can already without it, just write the style, thanks to the frame, processed only FF * /
#lightFF , x: -moz-any-link { display : block }

/ * the main thing is to make a mistake in the register, it works only for ID * /
# lightFF2 [id = lightff2] { display : block }

/ * Firefox 3 has a new selector: default. Alarm, without framing IE will understand this design * /
# lightFF3 , x: -moz-any-link , x: default { display : block }

}

/ * Opera 9.5 * /

/ * not after media is not processed by anything other than Opera 9.5 - apparently it is either impossible to write this way, or not everyone has yet introduced support for such a formation, use it wisely, do not write inside potentially crooked things, even an hour after six months someone else can process * /
media not all and (-webkit-min-device-pixel-ratio) {

# lightO95 { display : block }

}

/ * Opera 9.2 * /

/ * Opera does not support this construction, but Opera 9.2 does it anyway, for unknown reasons, it is also recommended to be careful * /
media all and (scan: progressive) {

# lightO92 { display : block }

}

/ * Safari * /

/ * The first construct is against Opera 9.5, which understands the second, and the second is against Opera 9.2, which understands the first. Top of perversion :) In general, it is a safe design, because 9.2 will no longer evolve and obviously will not be able to process: first-of-type, and -webkit- is a proprietary property and is processed by Opera 9.2 rather by mistake, which follows from the lack of support in 9.5 * /
/ * Safari understands both, so the hack works * /
media all and (-webkit-min-device-pixel-ratio: 0) {

body: first-of-type # lightSF3 { display : block }
/ * instead of: first-of-type, you can also use: nth-of-type (1) - it is for Safari 3.1 * /

}

I more or less highlighted the code ...

Hacks for IE8 are either not yet, or it will really be good;) which, however, I personally doubt ... MS are going to introduce the -ms- properties (I have already seen one of them -ms-box-model). In general, the path is correct - such “rakes” are the safest.

You can see it in action at http://test.dis.dj/css/ (on the right, there is a block with the conclusion which hacks worked).

As rightly noted in the comments, it would be nice to describe the essence of the problem more. So, what are hacks and why are they at all, and what their use is fraught with.

All hacks can be divided into several categories:
1. Hacks in their pure form - the use of loyalty in the processing of CSS rules by browser parsers (for example - * width for IE)
2. Intended CSS add-ons that another browser will not understand purely in principle (especially here Mozilla rules with -moz- properties and an @ -moz-document awesome thing, which allows you to write rules for Mozilla without fear of anything)
3. Features browsers support innovations CSS3 and their ilk. As for IE6, it does not understand part of CSS2 (the child selector E> F for example)

The first group of hacks leads to invalid CSS and is generally safe to use. There is no need to handle the curved code, so sane browsers, as they missed such things, will be so. At least, since MS itself doesn’t handle most of the hacks in the standard mode even on IE 7th, there’s no need to fear for their future.

The second group is probably the safest option. Unless the developers suddenly decide to abandon their own innovations.

The third group is the most insidious and undesirable item. CSS Media Query constructs are official CSS3, which sooner or later all browsers will support. Various clever selectors are also officially recommended. Therefore, there may come a time when the hack for one browser will be interpreted by others too. A striking example is Opera and Safari. Both have partial support and differ in the details, though it became possible to share the rules for them. Sometimes errors or inaccuracies in the syntax are intentionally introduced into this version of semi-hacks (as is the case with Opera 9.5). This, of course, will save, to some extent, from new versions, but still you will not find a good way.

Personal opinion of the author: khaki - evil, the fewer - the better. It is necessary to use only for IE6 when it is necessary to realize that everyone can, but it does not (transparency, min-max-width, etc.).

UPD. IE8 hack: /*/ #nav a {position:relative;} /**/
UPD2. Hack for IE8 in standard mode: .test { color /*\**/: blue\9 }
UPD3. Hack for any IE, including 8th in standards mode: .test { color: blue\9 }

PS Thank you for the plus - this is my first post :)