Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to set any style for a specific browser in CSS?

Tags:

html

css

For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS:

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

But are those styles hardcoded or is merely adding a prefix address that browser?

For example, if I want to change the margin only in Firefox could I simply add the prefix like so:

-moz-margin:-4px;
margin: 1px;

NICE TO KNOW:
And if that's possible is it possible to address a specific version or platform? For example, -moz-4.3-margin:-4px; not that I'd want to, just wondering.

And does the prefix approach work cross browser? I'm wondering because Internet Explorer.

Finally, will margin:10px ever knock out -moz-margin:10px? As in, "We, Mozilla, finally support margin so we are going to ignore all old -moz-margin tags and will just use the value in the margin tag".

like image 512
1.21 gigawatts Avatar asked Sep 13 '15 07:09

1.21 gigawatts


People also ask

How do I get CSS only for Internet Explorer?

#2 CSS Rules Specific to Explorer (IE CSS hacks) IE8 or below: to write CSS rules specificially to IE8 or below, add a backslash and 9 ( \9 ) at the end before the semicolon. IE7 or below: add an asterisk ( * ) before the CSS property. IE6: add an underscore ( _ ) before the property.


1 Answers

It's very bad habit to apply css for specific browser. But there are solutions also:

Only Moz:

@-moz-document url-prefix(){
    body {
        color: #000;
    }
    div{
       margin:-4px;
    }
}

chome and safari:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    body {
        color: #90f;
    }
}

Below IE9:

<!--[if IE 9]>
    body {
        background:red;
    }
<![endif]-->

I recommend don't use this moz, and safari prefix untill and unless necessary.

like image 52
Ganesh Yadav Avatar answered Sep 28 '22 03:09

Ganesh Yadav