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: 4 em; 
  border: 1 em solid red; 
  width: 30 em; 
  width / ** /: / ** / 25 em; 
 }
 / * Для IE ширина блоку менше на величину padding + border * /

	

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

	

  .class {
  
   min-width: 500 px;
  
   max-width: 750 px;
  
   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: 0 px)
 
   { 
  .class {
  
   color: # F00;
  
   }
 
	 }
	

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

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

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

  @ Media all and (min-width: 0 px)
 
   { 
  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 | = ab] { 
 ...
 } 
 / * 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;
		 }