Cross browser CSS rules

Question

Using one style sheet I want to achieve kind of cross platform rules. I will show you quite easy example to explain exactly what I want.

I have two div elements like that:

<div class="outer">
 <div class="inner">
 </div>
</div>

And some simple styles to them:

div.outer {
  background-color: red;
  width: 200px;
  height: 200px;
}

div.inner {
  height: 100px;
  width: 100px;
  background-color: blue;
}

Now I want to override background color of one of them, for example inner, with the other color based on the browser I'm using. For example if I open this by Chrome I want this color to be green, and when I open it with IE I want it to be blue. I have an idea how to do this (instead of other style sheets for each browser), but it doesn't work this way:

@media screen {
  .chrome .inner {
  background-color: green !important;
  }
}

Do you know how to do that guys?

Answer 1

check this

it will give you complete cross browser identification
when you get browser info then just custom you style

Hope it will help you Happy coding!

Answer 2

There are ways to achieve certain effects like this only with CSS & HTML, but this will only target some of the major browsers.. I wouldn't recommend it. Here's an example:

/* style for all browsers (think Google & Safari/Webkit): */
p {
  background-color: blue;
}
/* overrule for Firefox: */
@-moz-document url-prefix() {
  p {
    background-color: gold;
  }
}

And then in your HTML for IE:

<!--[if IE]>
<style>
  p {
    background-color: purple;
  }
</style>
<![endif]-->