Ufdjrw

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?

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!

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]-->