Cross browser CSS rules [duplicate] - html

Question

This question already has answers here:
How to detect Safari, Chrome, IE, Firefox and Opera browsers?
(30 answers)
Closed 3 years ago.
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]-->