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 time a web designer takes to smooth out these inconsistencies (use hacks). As a result, instead of effective work, the designer enters into unnatural relationships with browsers, losing valuable time.

Css Hack is a special CSS construct that some browsers understand and ignore others. The use of hacks often speaks about the unprofessional typesetter. But there are cases when the hack is the only way to solve the problem (for example, well-known browser bugs (see “Glitches of browsers”)). Do not just forget that in our time haste - a common phenomenon. Therefore, the timing of "yesterday" - no surprise. So there is no time to understand why it does not come out as you want.

Plus css hacks

This is a quick fix. Prescribed additional lines and everything is fine, impose 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 code with a hack for Firefox, a month later a new version of Safari comes out and it turns out that it also perceives this hack! We have to redo it.
  2. Many hacks 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 that is connected using conditional comments.

Glossary

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

Hack - correcting 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, which deprives the essence of the code of inner beauty and in disharmony with its internal structure.

CSS hacks for Internet Explorer browser

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

	

PNG in IE6:
For IE6, the htc file iepngfix.htc is included, for the correct operation of background images of PNG format for all elements, in the cssf-ie6.css file. Used IE PNG Fix v1.0 RC4 latest version.
  * { 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 you can use them without serious consequences. The syntax is:
  <! - [ 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 a piece of code with the explorer, use! condition * /
 
  / * The condition may be:
 
  IE - for any version of IE
 
  lt IE v - (less than) for all IE browsers, the version of which 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, the version of which 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 table 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 the border and padding are included in the width of the element. Box Model hack fixed 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 than the padding + border * /

	

Min-width and max-width in IE:
IE does not understand these css properties. The block hack looks like this:
  .class {
  
   min-width : 500 px;
  
   width : expression (
  
   document.body.clientWidth < 500 ?
  "500px" : "auto"
  
   );
  } / * For IE, the block width is shorter by 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 shorter by 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 a doctype, this hack works in IE6 * / / * In the case of quirks-mode, the hack works in IE6 and IE7.
  * / *: first-child + html.  class { } / * For IE 7 and below (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 ;
  } / * selects all elements inside the html element.
  Only for IE7 and below * / -, .class { background : # F00 ;
  } .class { background : # F00 ! important !
  ;
  } / * The 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 running in IE6 and IE7:
  .class { * background : # F00 ;
  } .class { // background : # F00 ;
  } .class { background : # F00 ! ie;
  } / * Hack works similarly to the! Important * / property

	

CSS hacks for Mozila FireFox browser

Hacks 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 above:
 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;
 
  }

	

Opera Browser CSS Hacks

Hacks 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 for IE8 Only * / .myClass { 
  color: red \ 0 /;  / * red * /
  padding: 70px \ 0 /;  / * 70px indent for Internet Explorer 8 only * /
 }
 / * 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 below or equal to IE 5.5 
	 <! [endif] -> 

	 <! - [if gt IE 6]> 
		 ... if IE 6 is higher 
	 <! [endif] ->
	

Background opacity in IE, Firefox, Opera

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

Remove extra padding in 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



Hacks 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 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 * /
		 }
		

Hacks for Firefox

Syntax Who understands Example
Do not pass validation (not recommended)
html: root FF 1.5+
Opera 9.6
update: 1/14/10
not relevant
(understand 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)
validated by CSS3
Opera 9-9.6
update 1/14/10
not relevant
(understood by new
versions 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 (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 (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;
		 }