Can we use different CSS for different mobile browsers?

Question

I have developed a website using WordPress It's look nice. But on some mobile browsers its breaking some CSS. In Opera Mini its not taking Margin:-30px;but on mobile chrome its working. I don't know why this problem is happening. Can you guys give me some suggestion? I browse some other big websites like mashable.com and they have the same problem.

So my question is can I use different CSS for different mobile browsers? Or can I use totally different layout for different mobile browsers?

Answer 1

No need for JS. There are lesser known CSS features that apply CSS based on browser. Some consider them css hacks.

Firefox:

@-moz-document url-prefix() { CSS DECLARATIONS }

Or put this in front of a specific declaration:

body:not(:-moz-handler-blocked) .whateverclass { CSS }

For IE you can load separate stylesheets:

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="ie_sheet.css" />
<![endif]-->

Safari & chrome

@media screen and (-webkit-min-device-pixel-ratio:0) { CSS DECLARATIONS}

Safari:

html[xmlns*=""]:root .whateverclass { CSS }

Does that answer your question?