CSS hacks

CSS hacks for 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 condition ]> < link href = " styles.css " rel = " stylesheet " media = " all " /> < ! [Endif] - > <! - [if! Condition]> <link Href = "styles.css" rel = "stylesheet" media = "all" /> <! [Endif] -> / * If you want to ignore some piece of code by the explorer, use the condition * /
 
  / * The condition can be:
 
  IE - for any version of IE
 
  Lt IE v - (less than) for all IE browsers whose version is less than v
 
  Lte IE v - (less than or equal) for all IE browsers whose version is less than v, or the same
 
  Gte IE v - (greater than or equal) - for IE, whose version is greater than or equal to v
 
  Gt IE v - (greater than) - for IE, the version of which is greater than v.
  * /
 
 

  <! - [if IE 6 ]> < link href = " ie6.css " rel = " stylesheet " media = " all " /> < ! [Endif] - > / * Style sheet for IE6 * /
 
  <! - [if IE 7 ]> < link href = " ie7.css " rel = " stylesheet " media = " all " /> < ! [Endif] - > / * Style sheet for IE7 * /
 
  <! - [if IE 8 ]> < link href = " ie8.css " rel = " stylesheet " media = " all " /> < ! [Endif] - > / * Style sheet for IE8 * /
 
 

  .  Class {
 
  Padding: 4 em; 
  Border: 1 em solid red; 
  Width: 30 em; 
  Width / ** /: / ** / 25 em; 
 }
 / * For IE, the width of the block is less by the amount padding + border * /

	

  .class {
  
   Min-width : 500 px;
  
   Width : expression (
  
   Document.body.clientWidth < 500 ?
  "500px" : "auto"
  
   );
  } / * For IE, the block width is less by the amount padding + border * /

	

  .class {
  
   Min-width : 500 px;
  
   Max-width : 750 px;
  
   Width : expression (
  
   Document.body.clientWidth < 500 ?
  "500px" :
  
   Document.body.clientWidth> 750 ?
  "750px" : "auto"
  
   );
  } / * For IE, the block width is less by the amount padding + border * /

	

  .class {
  
   Min-height : 100 %;
  
   Height : auto ! Important ;
  
   Height : 100 %;
  
  }

	

  * Html.  Class { } / * In case the html-page has doctype, this hack works in IE6 * / / * In the case of quirks-mode, hack works in IE6 and IE7.
  * / *: First-child + html.  Class { } / * For IE 7 and lower (first-child) * / * + html.  Class { } / * For IE 7 * / *: first-child + html.  Class { } / * For IE 7 * / html> body.  Class { } / * For IE 7 and normal browsers * / html> / ** / body .class {} / * For normal browsers (except IE 7) * / / * Example:
 
  .class {background: red}
 
  * Html .class {background: green}
 
  In all browsers except IE6 and below, the background will be red, and in IE6 and below browsers - green * /

	

  .  Class { _background : # F00;
  } .  Class {- background : # F00;
  } .  Class { c \ olor : # F00;
  } / * Does not work before the letters a, b, c, d, e, f * /

	

  > Body { background : # F00 ;
  } / * Selects the body element only in IE7 * / html * { background : # F00 ;
  } / * Highlights all elements inside the html element.
  Only for IE7 and below * / -, .class { background : # F00 ;
  } .class { background : # F00 ! Important !
  ;
  } / * Hack works by analogy with the! Important property.
  Works for IE7 and below * /

	

  .class { background : # F00 \ 0 /;
  } / * Selects the body element only in IE7 * /

	

  .class { * background : # F00 ;
  } .class { // background : # F00 ;
  } .class { background : # F00 ! Ie ;
  } / * Hack works in a way similar to the! Important * /

	

CSS-hacks for the Mozilla FireFox browser

  #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 hacks for Google Chrome browser

  Body: nth- of - type (1) .class {
 
   Background : # 000;
 
  }

	

CSS hacks for Opera browser

  @ 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 hacks for Safari browser

  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 ;
  
   }
 
 }
 / * Hack for Opera and 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 {}
	

List of CSS hacks for different browsers, IE6, IE7, IE8, FireFox, Opera, Safari, Chrome

  / * Hack only for IE8 Only * / .myClass { 
  Color: red \ 0 /;  / * Red * /
  Padding: 70px \ 0 /;  / * Indent 70px only for Internet Explorer 8 * /
 }
 / * IE 6 Only * / * html .myClass {
 ...
 } 
 / * All except IE6 standards * / .myClass { 
 Property / ** /: value; 
 } 
 / * Firefox & IE 7, and above * / 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 for Explorer

  <! - [if IE]> 
	 ... if Internet Explorer ..
	 <Link href = "ie-fix.css" type = "text / css" rel = "stylesheet"> 
	 <! [Endif] -> 

	 <! - [if IE 6.0]> 
		 ... if IE6 
	 <! [Endif] -> 
		
	 <! - [if IE 7]> 
		 ... if IE7
	 <! [Endif] -> 

	 <! - [if gte IE 5]> 
		 ... if IE5 +
	 <! [Endif] -> 

	 <! - [if lt IE 6]> 
		 .. if below IE 6
	 <! [Endif] -> 

	 <! - [if lte IE 5.5]> 
		 ... if it is below or equal to IE 5.5 
	 <! [Endif] -> 

	 <! - [if gt IE 6]> 
		 ... if above IE 6 
	 <! [Endif] ->
	

Semi-transparent background in IE, Firefox, Opera

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

Remove extra padding in the button in 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 ;
  } }
 

Additionally

• Khaki for IE
• Khaki for FF
• Hacks for Opera
• Hacks for Chrome and Safari
• Khaki for Konqueror

Khaki for IE

		 Div {
		 Background: # ff0000;
		 }
		 * Html div {
		 Background: # 000;
		 }
		

  Div {
		 Background: # ff0000! Important;  / * For all browsers * /
		 Background: # 000;  / * For 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;  / * For ie8 * /
		 }
		 Div, # ie # fix {
		 Background: # 000;  / * For other browsers * /
		 }
		

  Div {
		 Background: # ff0000;  / * For all browsers * /
		 _background: # 000;  / * For IE6 * /
		 }
		

  Div {
		 Background: # ff0000;  / * For all browsers * /
		 * Background: # 000;  / * For IE6 and IE7 * /
		 }
		

  Div {
		 Background: # ff0000;
		 }
		 Html * div {
		 Background: # 000;
		 }
		

  Div {
		 Background: # ff0000;  / * For all browsers * /
		 Background: # 000! Ie;  / * For IE6 and IE7 * /
		 }
		

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

Hacks for 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
		 }
		

Hacks for Chrome and 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;
		 }
		

Khaki Konqueror

  #div {
		 Background: # ff0000;
		 }
		 Html: not (: nth-child (1)) #div {
		 Background: # 000;
		 }