CSS хаки

CSS-хаки для браузера Internet Explorer

* { zoom : 1 ; }
	

* { behavior : url ( "css/iepngfix.htc" ); }
	

.class { 
 background : none ; 
 
 filter : progid : DXImageTransform.Microsoft.AlphaImageLoader ( 
 src= '/images/png-image.png' , 
 sizingMethod= 'scale' 
 ); 
}
	

html>body .class { }head+body .class { }html:first-child .class { }
	

html>/**/body { }

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

<!--[if условие]> <link href= "styles.css" rel= "stylesheet" media= "all" /> <![endif]--><!--[if !условие]> <link href= "styles.css" rel= "stylesheet" media= "all" /> <![endif]-->/* Если же вы хотите проигнорировать эксплорером какой-то кусок кода, то используйте !условие */
/* Условие может быть таким:
IE – для любой версии IE
lt IE v – (less than) для всех браузеров IE, версия которых меньше чем v
lte IE v – (less than or equal) для всех браузеров IE, версия которых меньше чем v, или такая же
gte IE v – (greater than or equal) – для IE, версия которых больше или равна v
gt IE v – (greater than) – для IE, версия которых больше v. */

<!--[if IE 6]> <link href= "ie6.css" rel= "stylesheet" media= "all" /> <![endif]-->/* Таблица стилей для IE6 */
<!--[if IE 7]> <link href= "ie7.css" rel= "stylesheet" media= "all" /> <![endif]-->/* Таблица стилей для IE7 */
<!--[if IE 8]> <link href= "ie8.css" rel= "stylesheet" media= "all" /> <![endif]-->/* Таблица стилей для IE8 */

.class { 
 padding : 4em ; 
 border : 1em solid red ; 
 width : 30em; 
 width /**/ : /**/ 25em ; 
}
/* Для IE ширина блока меньше на величину padding + border */
	

.class { 
 min-width : 500px ; 
 width : expression ( 
 document.body.clientWidth < 500? "500px" : "auto" 
 );}/* Для IE ширина блока меньше на величину padding + border */
	

.class { 
 min-width : 500px ; 
 max-width : 750px ; 
 width : expression ( 
 document.body.clientWidth < 500? "500px" : 
 document.body.clientWidth > 750? "750px" : "auto" 
 );}/* Для IE ширина блока меньше на величину padding + border */
	

.class { 
 min-height : 100% ; 
 height : auto !important ; 
 height : 100% ; 
}
	

* html .class { } /* В случае, если у html-страницы есть доктайп, этот хак работает в IE6 *//* В случае quirks-mode, хак работает в IE6 и IE7. */*:first-child+html .class { } /* Для IE 7 и ниже (first-child) */*+html .class { } /* Для IE 7 */*:first-child+html .class { } /* Для IE 7 */html>body .class { } /* Для IE 7 и нормальных браузеров */html>/**/body .class { } /* Для нормальных браузеров (кроме IE 7) *//* Пример:
.class { background:red }
*html .class { background:green }
Во всех браузерах кроме IE6 и ниже бэкграунд будет красный, а в IE6 и ниже браузерах - зеленый */
	

.class { _background : #F00 ; }.class { -background : #F00 ; }.class { c\olor : #F00 ; } /* Не работает перед буквами a, b, c, d, e, f */
	

>body { background : #F00 ; }/* выбирает элемент body только в IE7 */html* { background : #F00 ; }/* выделяет все элементы внутри элемента html. Только для IE7 и ниже */-,.class { background : #F00 ; }.class { background : #F00 !important! ; }/* Хак работает по аналогии со свойством !important. Работает для IE7 и ниже */
	

.class { background : #F00\0/ ; }/* выбирает элемент body только в IE7 */
	

.class { *background : #F00 ; }.class { //background : #F00 ; }.class { background : #F00 !ie ; }/* Хак работает по аналогии со свойством !important */
	

CSS-хаки для браузера Mozila FireFox

#class[id=class] { color : #F00 ; }@-moz-document url-prefix () { .class { color : #F00 ; } }
*>.class { color : #F00 ; }
	

.class, x:-moz-any-link, x:only-child { color : #F00 ; }
	

body:empty .class { color : #F00 ; }#class[id=CLASS] { color : #F00 ; }html>/**/body .class, x:-moz-any-link { color : #F00 ; }
	

html>/**/body .class, x:-moz-any-link, x:default { color : #F00 ; }

CSS-хаки для браузера Google Chrome

body:nth-of-type(1) .class {
 background : #000 ;
}
	

CSS-хаки для браузера Opera

@media all and (-webkit-min-device-pixel-ratio:10000), 
not all and ( -webkit-min-device-pixel-ratio : 0 ) { 
 .style { background : #F00 ; }
	}
	

@media all and ( min-width : 0px )
 { 
 .class { 
 color : #F00 ; 
 } 
	}
	

@media all and ( min-width : 1px )
 { { } 
 .class { 
 color : #F00 ; 
 } 
	}
	

@media all and ( min-width : 1px )
 { 
 .class { 
 color : #F00 ; 
 } 
	}
	

@media all and ( width )
 { 
 .class { 
 color : #F00 ; 
 } 
	}
	

@media all and ( min-width : 0px )
 { 
 head~body .class { 
 color : #F00 ; 
 } 
	}
	

CSS-хаки для браузера Safari

body:first-of-type .class { color : #F00 ; }html:root*.class { color : #F00 ; }body:first-of-type .class { color : #F00 ; }body:first-of-type .class { color : #F00 ; }
	

@media screen and ( -webkit-min-device-pixel-ratio : 0 )
 { 
 .class { 
 color : #F00 ; 
 } 
}
/* Хак для Opera и Safari */
	

Selector Hacks

	/***** Selector Hacks ******/

	/* IE6 and below */
	* html #uno { color: red }

	/* IE7 */
	*:first-child+html #dos { color: red }

	/* IE7, FF, Saf, Opera */
	html>body #tres { color: red }

	/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
	html>/**/body #cuatro { color: red }

	/* Opera 9.27 and below, safari 2 */
	html:first-child #cinco { color: red }

	/* Safari 2-3 */
	html[xmlns*=""] body:last-child #seis { color: red }

	/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
	body:nth-of-type(1) #siete { color: red }

	/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
	body:first-of-type #ocho { color: red }

	/* saf3+, chrome1+ */
	@media screen and (-webkit-min-device-pixel-ratio:0) {
	 #diez { color: red }
	}

	/* iPhone / mobile webkit */
	@media screen and (max-device-width: 480px) {
	 #veintiseis { color: red }
	}


	/* Safari 2 - 3.1 */
	html[xmlns*=""]:root #trece { color: red }

	/* Safari 2 - 3.1, Opera 9.25 */
	*|html[xmlns*=""] #catorce { color: red }

	/* Everything but IE6-8 */
	:root *> #quince { color: red }

	/* IE7 */
	*+html #dieciocho { color: red }

	/* IE 10+ */
	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	 #veintiun { color: red; }
	}

	/* Firefox only. 1+ */
	#veinticuatro, x:-moz-any-link { color: red }

	/* Firefox 3.0+ */
	#veinticinco, x:-moz-any-link, x:default { color: red }

	/* FF 3.5+ */
	body:not(:-moz-handler-blocked) #cuarenta { color: red; }
	

Attribute Hacks

	/***** Attribute Hacks ******/

	/* IE6 */
	#once { _color: blue }

	/* IE6, IE7 */
	#doce { *color: blue; /* or #color: blue */ }

	/* Everything but IE6 */
	#diecisiete { color/**/: blue }

	/* IE6, IE7, IE8, but also IE9 in some cases :( */
	#diecinueve { color: blue\9; }

	/* IE7, IE8 */
	#veinte { color/*\**/: blue\9; }

	/* IE6, IE7 -- acts as an !important */
	#veintesiete { color: blue !ie; } /* string after ! can be anything */

	/* IE8, IE9 */
	#anotherone {color: blue\0/;} /* must go at the END of all rules */

	/* IE9, IE10 */
	@media screen and (min-width:0\0) {
	 #veintidos { color: red}
	}
	

Property prefix hacks

/* Property prefix hacks */
/* IE6 only - any combination of these characters */
_ - ? ¬ ¦
/* IE6/7 only - any combination of these characters */
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |
	

@media hacks

	/* @media hacks */

	/* IE6/7 only (via Keith Clarke) */
	@media screen\9 { }

	/* IE6/7/8 (via Keith Clarke) */
	@media \0screen\,screen\9 {}

	/* IE8 (via Keith Clarke) */
	@media \0screen { }

	/* IE8/9 */
	@media screen\0 { }
	

Список CSS хаков для разных браузеров, IE6, IE7, IE8, FireFox, Opera, Safari, Chrome

/* хак только для IE8 Only */.myClass { 
 color:red\0/; /* красный */
 padding:70px\0/; /* отступ 70px только для Internet Explorer 8 */
}
/* IE 6 Only */* html .myClass {
...
} 
/* All except IE6 standards */.myClass { 
property /**/: value; 
} 
/* Firefox & IE 7, и выше */html>body .myClass {
 ...
}
/* Modern browsers only (not IE 7) */html>/**/body .myClass {
...
}
/* IE 7 Only */*:first-child+html .myClass {
 ...
}
/* Firefox Only */@-moz-document url-prefix() {
.myClass {
...
}
}
/* Opera Only */noindex:-o-prefocus, .MyClass {
color:red;
}
/* IE7 Only */div[class^="myClass"] .myClass2 { 
...
}
/* IE7 only */*+html .myClass { 
...
} 
/* hack for Opera <=9 */html:first-child .myClass {
...
} 
/* Firefox, Opera, Konqueror, Safari */*|html .myClass { 
...
}
/* IE8 beta 2 only (?)*/html:first-child .myClass [attr|=a-b] { 
...
} 
/* IE5/Mac only *//*\*//*/ .myClass { property: value; } /**/ 
/* Gecko only */.myClass:not([attr*=""]) { 
...
} 
/* Opera */@media all and (min-width: 0px) { 
html:first-child .myClass { 
...
} 
} 
/* Safari only */.myClass:not(:root:root) { 
...
} 
/* Safari 3.0 and Chrome only */@media screen and (-webkit-min-device-pixel-ratio:0) {
 .myClass {
 ....
 }
}
/* Chrome browser */body:nth-of-type(1) .myClass {
 ...
}
/* Safari browser css hack */body:first-of-type .myClass {property:value;}

CSS для Explorer

<!--[if IE]> 
	... если Internet Explorer ..
	<link href="ie-fix.css" type="text/css" rel="stylesheet"> 
	<![endif]--> 

	<!--[if IE 6.0]> 
		... если IE6 
	<![endif]--> 
		
	<!--[if IE 7]> 
		... если IE7
	<![endif]--> 

	<!--[if gte IE 5]> 
		... если IE5+
	<![endif]--> 

	<!--[if lt IE 6]> 
		.. если ниже IE 6
	<![endif]--> 

	<!--[if lte IE 5.5]> 
		... если ниже или равно IE 5.5 
	<![endif]--> 

	<!--[if gt IE 6]> 
		... если выше IE 6 
	<![endif]-->
	

Полупрозрачность фона в IE, Firefox, Opera

.myClass {
	background-color:#000;	
	-moz-opacity:.82; /* Firefox */ 
	opacity:.82; /* Opera */
	filter:alpha(opacity=82); /* IE */
	}
	

Убрать лишний padding в button в Firefox

button::-moz-focus-inner { 
	 border: 0;
	 padding: 0;
	}
	

Chrome/Firefox ... ?

button {
	 -webkit-border-fit: lines;
	}
	

Firefox 2

html>/**/body .selector, x:-moz-any-link { color:lime;}

Firefox 3

html>/**/body .selector, x:-moz-any-link, x:default { color:lime;}

Any Firefox

@-moz-document url-prefix() { 
 .selector { color:lime; }}

Дополнительно

• Хаки для IE
• Хаки для FF
• Хаки для Opera
• Хаки для Chrome и Safari
• Хаки для Konqueror

Хаки для IE

		div {
		background: #ff0000;
		}
		* html div {
		background: #000;
		}
		

div {
		background: #ff0000 !important; /* для всех браузеров */
		background: #000; /* для IE6 */
		}
		

div {
		background: #ff0000;
		}
		*:first-child+html div {
		background: #000;
		}
		

div {
		background: #ff0000;
		}
		*+html div {
		background: #000;
		}
		

div {
		background: #ff0000;
		}
		html>body div {
		background: #000;
		}
		

div {
		background: #ff0000; /* для ie8 */
		}
		div, #ie#fix {
		background: #000; /* для остальных браузеров */
		}
		

div {
		background: #ff0000; /* для всех браузеров */
		_background: #000; /* для IE6 */
		}
		

div {
		background: #ff0000; /* для всех браузеров */
		*background: #000; /* для IE6 и IE7 */
		}
		

div {
		background: #ff0000;
		}
		html* div {
		background: #000;
		}
		

div {
		background: #ff0000; /* для всех браузеров */
		background: #000 !ie; /* для IE6 и IE7 */
		}
		

Хаки для Firefox

div {
		background: #ff0000;
		}
		html:root div {
		background: #000;
		}
		

div {
		background: #ff0000;
		}
		div, x:-moz-any-link {
		background: #000;
		}
		

div {
		background: #ff0000;
		}
		@-moz-document url-prefix() {
		div {
		background: #000;
		}}
		

Хаки для Opera

div {
		background: #ff0000;
		}
		html:first-child div {
		background: #000;
		}
		

div {
		background: #ff0000;
		}
		@media all and (min-width:0) {
		div {
		background: #000;
		}}
		

html>/**/body noindex:-o-prefocus, html>/**/body p {
		color:#0f0
		}
		

Хаки для Chrome и Safari

div {
		background: #ff0000;
		}
		body:nth-of-type(1) div {
		background: #000;
		}
		

div {
		background: #ff0000;
		}
		html:root*div {
		background: #000;
		}
		

div {
		background: #ff0000;
		}
		html*div {
		background: #000;
		}
		

Хаки Konqueror

#div {
		background: #ff0000;
		}
		html:not(:nth-child(1)) #div {
		background: #000;
		}