This page has been robot translated, sorry for typos if any. Original content here.

CSS hacks

Browsers and standards. Eternal pursuit. Due to inconsistencies with standards, due to different ways of rendering pages, most of the web designer's time is spent in order to make up for these discrepancies (use hacks). As a result, instead of effective work, the designer enters unnatural relations with browsers, losing valuable time.

Css Hack is a special CSS design that some browsers understand and ignore the others. The use of hacks often speaks of the layman's lack of professionalism. But there are cases when the hack is the only way to solve the problem (for example, well-known browser bugs (see "Browser bugs")). Do not forget that in our time haste is a common occurrence. Therefore, the terms "for yesterday" - no one is surprised. So there's no time to understand why it does not come out as you want.

Plus css hacks

This is a quick fix for the problem. Have registered additional lines and all is excellent, we make further.

Disadvantages of css hacks

  1. There is no certainty how the site will behave with the release of new versions of browsers. For example, they wrote a code with a hack for Firefox, a new version of Safari is released in a month, and it turns out that she also perceives this hack! We have to redo it.
  2. Many khakis do not pass validation - the danger of this is described in the previous paragraph.

If possible, try to avoid using hacks. To correct IE errors, use a separate CSS file, which is connected using conditional comments.

Glossary

Cross-browser - the property of a site to be displayed and work in all popular browsers is identical.

Hack - fixing an error or adding a new function by using another undocumented or incorrectly implemented feature.

A dirty hack is a quick solution to a problem, mainly in the short term, depriving the essence of the code of inner beauty and disharmonizing with its internal arrangement.

CSS hacks for Internet Explorer

ZOOM: 1:
Hack, designed to define hasLayout
  * { zoom : 1 ;
  }

	

PNG in IE6:
For IE6, the htc-file iepngfix.htc is connected, for correct operation of PNG background images for all the elements, in the file cssf-ie6.css. IE PNG Fix v1.0 RC4 latest version is used.
  * { behavior : url ( "css / iepngfix.htc" );
  }

	

If bytes are important, there is an example of using a filter for IE:
  .class {
  
   background : none;
  
 
   filter : progid: DXImageTransform.Microsoft.AlphaImageLoader (
  
   src = '/images/png-image.png' ,
  
   sizingMethod = 'scale'
  
   );
  
  }

	

Separation of styles from IE6:
  html> body.  class {} head + body.  class {} html: first-child.  class {}

	

Separation of styles from IE6 and IE7:
  html> / ** / body {}
 
 

Separation of styles from IE6 - IE8:
  * | html.  class {} html: not ([lang * = "" ]).  class {}

	

Conditional comments in IE:
Conditional comments work only in IE under Windows, for other browsers they are normal comments, so they can be used painlessly. The syntax is this:
  <! - [ 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.
  * /
 
 

Conditional comments in IE6, IE7, IE8:
  <! - [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 * /
 
 

Box Model hack:
In IE, there are glitches, when border and padding are included in the width of the element. Box Model hack captures them.
  .  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 * /

	

Min-width and max-width in IE:
IE does not understand these css properties. Hack for the block looks like this:
  .class {
  
   min-width : 500 px;
  
   width : expression (
  
   document.body.clientWidth < 500 ?
  "500px" : "auto"
  
   );
  } / * For IE, the width of the block 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 width of the block is less by the amount padding + border * /

	

Min-height hack from Dustin Diaz
  .class {
  
   min-height : 100 %;
  
   height : auto ! important ;
  
   height : 100 %;
  
  }

	

Simple selectors:
It is not necessary to create a separate file for different browsers. You can use individual css-selectors in the main css-file:
  * 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 * /

	

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

	

Dirty hacks for IE7:
  > 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 * /

	

Dirty hacks for IE8:
  .class { background : # F00 \ 0 /;
  } / * selects the body element only in IE7 * /

	

Dirty hacks working in IE6 and 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

Khaki for all versions of MFF:
  #class [id = class] { color : # F00 ;
  } @ -moz-document url-prefix () { .class { color : # F00 ;
  } }
 *> .class { color : # F00 ;
  }

	

For MFF 1.5 and higher:
  .class , x : -moz-any-link , x : only-child { color : # F00 ;
  }

	

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

	

For MFF 3.0 and possibly higher:
  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

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

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

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

For Opera 9:
  @ 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 higher * / 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] ->
	

Semitransparency of 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

Syntax Who understands Example
Pass validation
* html IE6
		 div {
		 background: # ff0000;
		 }
		 * html div {
		 background: # 000;
		 }
		
! important IE6
  div {
		 background: # ff0000! important;  / * for all browsers * /
		 background: # 000;  / * for IE6 * /
		 }
		
*: first-child + html IE7
  div {
		 background: # ff0000;
		 }
		 *: first-child + html div {
		 background: # 000;
		 }
		
* + html IE7 +
can understand Opera 9 and below
  div {
		 background: # ff0000;
		 }
		 * + html div {
		 background: # 000;
		 }
		
html> body will understand everything except IE6
  div {
		 background: # ff0000;
		 }
		 html> body div {
		 background: # 000;
		 }
		
# ie # fix understand everything except IE8
  div {
		 background: # ff0000;  / * for ie8 * /
		 }
		 div, # ie # fix {
		 background: # 000;  / * for other browsers * /
		 }
		
Do not pass validation (not recommended)
_property: value
and
-property: value
IE6
  div {
		 background: # ff0000;  / * for all browsers * /
		 _background: # 000;  / * for IE6 * /
		 }
		
* property: value
and
// property: value
IE6
IE7
  div {
		 background: # ff0000;  / * for all browsers * /
		 * background: # 000;  / * for IE6 and IE7 * /
		 }
		
html * IE6
IE7
Chrome
Safari
  div {
		 background: # ff0000;
		 }
		 html * div {
		 background: # 000;
		 }
		
! ie IE6
IE7
  div {
		 background: # ff0000;  / * for all browsers * /
		 background: # 000! ie;  / * for IE6 and IE7 * /
		 }
		

Khaki for Firefox

Syntax Who understands Example
Do not pass validation (not recommended)
html: root FF 1.5+
Opera 9.6
update: 14/01/10
not relevant
(understand the new versions
opera, chrome, safari)
  div {
		 background: # ff0000;
		 }
		 html: root div {
		 background: # 000;
		 }
		
x: -moz-any-link FF 1.5+
IE7
  div {
		 background: # ff0000;
		 }
		 div, x: -moz-any-link {
		 background: # 000;
		 }
		
@ -moz-document url-prefix () FF 1.5+
  div {
		 background: # ff0000;
		 }
		 @ -moz-document url-prefix () {
		 div {
		 background: # 000;
		 }}
		

Hacks for Opera

Syntax Who understands Example
Passes validation
html: first-child Opera 7-9.01
  div {
		 background: # ff0000;
		 }
		 html: first-child div {
		 background: # 000;
		 }
		
Do not pass validation (not recommended)
@media all and (min-width: 0)
validates CSS3
Opera 9-9.6
update 14.01.10
not relevant
(understood as new
versions of ff, chrome, safari)
  div {
		 background: # ff0000;
		 }
		 @media all and (min-width: 0) {
		 div {
		 background: # 000;
		 }}
		
html> / ** / body noindex: -o-prefocus, html> / ** / body Opera 9.5-10
  html> / ** / body noindex: -o-prefocus, html> / ** / body p {
		 color: # 0f0
		 }
		

Hacks for Chrome and Safari

Syntax Who understands Example
Do not pass validation (not recommended)
body: nth-of-type (1)
update 14.01.10 - not relevant (it is understood by new versions of opera, ff, safari, chrome)
  div {
		 background: # ff0000;
		 }
		 body: nth-of-type (1) div {
		 background: # 000;
		 }
		
html: root *
update 14.01.10 - not relevant (it is understood by new versions of opera, ff, safari, chrome)
  div {
		 background: # ff0000;
		 }
		 html: root * div {
		 background: # 000;
		 }
		
html *
Safari
Chrome
IE6
IE7
  div {
		 background: # ff0000;
		 }
		 html * div {
		 background: # 000;
		 }
		

Khaki Konqueror

Syntax Who understands Example
Do not pass validation (not recommended)
html: not (: nth-child (1)) #element
Konqueror
FF 3.5
  #div {
		 background: # ff0000;
		 }
		 html: not (: nth-child (1)) #div {
		 background: # 000;
		 }