Tags

, , , ,

css-hacks-for-different-browsersIf you are being tired of fixing your design issues in different browsers, then it’s time for moving on to some safe and permanent CSS Hacks 🙂

We usually face difficulties to implement designs or fixing css issues in the IE( with specific versions ), Chrome, Safari, Opera browsers etc. We can solve them with the help of CSS Hacks, though they also create problem sometimes. So without wasting any time we should proceed with the trust 🙂

Let’s start with a simple part of CSS mentioned as below. We want the below CSS( make the color to white ) to be worked on all the browsers with most of the current/previous versions.

/* Dummy CSS to work with */
#selector {
  color: #000000;
}

For IE( Internet Explorer ):

/* IE 10( specific ) */
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  #selector {
    color: #FFFFFF;
  }
}
/* IE 9( specific ) */
#selector {
  color: #000000; /* Ingeneral, for all browsers */
  color: #FFFFFF \0/IE9; /* Only for IE 9 */
}
/* IE 8( specific ) */
@media \0screen {
  #selector {
    color: #FFFFFF;
  }
}
/* IE 7( specific and below version ) */
#selector {
  *color: #FFFFFF;
}

For Google Chrome and Safari:
For Chrome and Safari we use same hacks with some little tweaks 😉

/* Google Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  #selector {
    color: #FFFFFF;
  }
}
/* Safari( in MAC ) */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome,#selector {
    color: #FFFFFF;
  }
}

For Opera:

/* Opera( 11 and earlier version ) */
@media not screen and (1) {
  #selector {
    color: #FFFFFF;
  }
}
@media not screen and (orientation) {
  #selector { /* for the earlier versions of Opera */
    color: #FFFFFF;
  }
}

As it’s said that all these work fine but sometimes they also fail. So be happy to keep trying and find your solutions.
Also your suggestions are acceptable.

Happy knowledge SHARING 🙂

Advertisements