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;
		}