Expanded collection of CSS hacks

The article is an expanded collection of CSS hacks in comparison with a similar article .
By hack means a method that allows you to perceive the CSS only to a specific browser.
Hacks can be used not only to fix bugs in the layout, but also in the case of using certain browser features to speed up the rendering of a web page in it (for example, CSS3 properties)

Well known Conditional comments in IE

Despite fame, they have a lot of rarely used.
For example, a style sheet that will be visible to all browsers except IE versions 5-8.

<!--[if !IE]--> < link href ="styles.css" rel ="stylesheet" media ="all" /><! -- [ endif ] -- >

Conditional comments for 6, 7, 8th version (8th version also supports them - don't be surprised):

<!--[if IE 6]><link href="ie6.css" rel="stylesheet" media="all" /><![endif]-->

<!--[if IE 7]><link href="ie7.css" rel="stylesheet" media="all" /><![endif]-->

<!--[if IE 8]><link href="ie8.css" rel="stylesheet" media="all" /><![endif]-->

Other hacks for IE

* html .class{background:red}

If the html page has a doctype, this hack only works for IE6.
In the case of quirks-mode , the hack works in IE6 and IE7.
')

*+html .class{background:red}

or

*:first-child+html .class{background:red}

In case the html page has a doctype, this hack works in IE7.

Dirty hacks running IE6 only

.class{<br>_background:red<br>}

.class{<br>-background:red<br>}

Dirty hacks working only in IE7

-,.class{<br>background:red;<br>}

Dirty hacks running in IE6 and IE7

.class{<br>*background:red<br>}

.class{<br>//background:red;<br>}

.class{background:red!ie}

Hack, working in IE6 and IE7, by analogy with the! Important property.

Dirty hack for IE6, IE7 & Safari

html*.class{background:red}

Nuance - in Google Chrome 2 does not work. Hack comes in handy in general for IE css-file when you need to separate styles from 8-ki

Dirty hack for safari 3

html:root*.class{background:red}

Also does not work in Chrome 2. The reason for using such a hack and other hacks for safari can be found here .

Dirty hack for FF2, FF3

@-moz-document url-prefix(){<br>.class{background:red}<br>}

Dirty hack for FF2, FF3 and IE7

x:-moz-any-link,.class{background:red}

Dirty hack for FF3 and IE7

x:-moz-any-link,x:default,.class{background:red}

Dirty hack for Opera 9.5 and IE7

noindex:-o-prefocus,.class{background:red}

To turn it into an opera-only hack, use any framing hack that does not support IE7.

Hack for FF2, FF3, Safari 3, Chrome 2, Opera 9.5

html:root .class{background:red}

Hack for Safari 3 and 4 !, Chrome 2

@media screen and (-webkit-min-device-pixel-ratio:0) {<br>body:first-of-type .class {background: red}<br>}

Hacks for Safari 3, Chrome 2, Opera 9.5

body:first-of-type .class{background:red}

@media all and (min-width:0){<br>.class{background:red}<br>}

Hack for FF2, FF3, Safari 3 and Chrome 2

html:not([lang*=""]):not(:only-child) .class{background:red}

This hack can be used for example, if you want to make rounded corners for Safari and FF using CSS , and for other browsers you want to have pictures.

Separation of styles from IE6

<!--[if !IE 6]--> < link href ="styles.css" rel ="stylesheet" media ="all" /><! -- [ endif ] -- >

html>body .class{background:red}

head+body .class{background:red}

html:first-child .class{background:red}

Separation of styles from IE6 and IE7

html>/**/body .class{background:red}

Separation of styles from IE6-8

*|html .class{background:red}

html:not([lang*=""]) .class{background:red}

About separation of styles for IE

Microsoft itself recommends using conditional comments ( official blog ). I use conditional comments for all IE in my work:

<!--[if IE]><link href="ie.css" rel="stylesheet" media="all" /><![endif]-->

And then further I separate hacks * html and *+html styles for IE6 and IE7, respectively. The remaining styles are obtained for all IE.

Change IE8 Rendering

Adding this line to the header of a web page changes the rendering type depending on the content value (this is not a hack, but it’s still very similar in properties to a hack):

< meta http-equiv ="X-UA-Compatible" content ="IE=8" />

The basic content values ​​are as follows (taken from here ):

• "IE = 7" - includes Strict mode in which all pages are rendered;
• “IE = EmulateIE7” - turns on IE7 compatibility mode, in which, depending on the DOCTYPE, either the standard rendering mode for IE7 (Strict) or quirks mode (Quirks) will be used;
• “IE = EmulateIE8” - the page is forced into the “IE8 Standards” mode regardless of whether the “Compatibility View” compatibility mode is enabled in the user's browser, and quirks pages are displayed in Quirks mode.
• “IE = 8” - the mode of maximum compliance with the standards “IE8 Standards” is activated.

In case of reluctance to rewrite old projects under IE8 - you can use IE=EmulateIE7

In all the examples listed above, .class is an example of a class (you can specify id, tag, etc. instead), and background: red is an example of a property and its value.

PS Please write in the comments which articles about the layout you would like to see - if I understand the topic you proposed - I will write about this article.