Posted By

resting on 07/04/11


Tagged


Versions (?)

CSS Hacks


 / Published in: CSS
 

CSS hacks

  1. Although it would be good to write code that renders well across all browsers, sometimes you got to rely on some dirty tricks to punch ie6 below the belt. Here are some hacks I know.
  2.  
  3. Conditional Comments (For all version of IE)
  4. http://www.quirksmode.org/css/condcom.html
  5.  
  6. This hack can be used to target a specific IE version, or across multiple versions.
  7. The most ethical way to implement it is to use it to direct IE browsers to an alternative stylesheet.
  8.  
  9. <!--[if IE 6]>
  10. <link href="ie6.css" type="text/css" rel="stylesheet" />
  11. <![endif]-->
  12.  
  13. Asterisk( * ), Underscore( _ ) and a whole bunch of characters ( /*\**/ /9 ) hack (For IE)
  14.  
  15. No specific link, google yourself
  16.  
  17. Use the * hack for IE7. However, it will affect IE6 as well, making it sometimes neccesary to hack both.
  18. normal css > display: none;
  19. hacked css > *display: none;
  20.  
  21. Use the _ hack for IE6.
  22. normal css > display: none;
  23. hacked css > _display: none;
  24.  
  25. Use the /*\**/ /9 hack for IE8.
  26. normal css > display: none;
  27. hacked css > display /*\**/: none\9 }
  28.  
  29. Chrome Hack (Apparently targets all Webkit Browsers including Safari)
  30. http://www.evotech.net/blog/2008/09/css-hack-for-google-chrome-and-safari-31/
  31.  
  32. Rarely happens, because Chrome's CSS rendering is pretty standard. But has happened to me.
  33.  
  34. @media screen and (-webkit-min-device-pixel-ratio:0) {
  35. .invisbile: display: none;
  36. }
  37.  
  38.  
  39.  
  40. That's about all the browsers you would usually encounter problems with during IntEgration. Conditional Comments are the best method and keep in mind that the other hacks are non-standard html/css.

Report this snippet  

You need to login to post a comment.