24

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".

1.21 gigawatts
  • 16,517
  • 32
  • 123
  • 231
  • 1
    Why would you want to do that though? – Chrillewoodz Sep 13 '15 at 07:42
  • you can keep all your vendor prefixes into a separate file and include it into your main stylesheet – alamin Sep 13 '15 at 07:42
  • 2
    @Chrillewoodz - why would I want to set a specific style differently for one browser than the other? Or why would I want to set margin differently? It's just an example. But to answer your question. It looks different in Firefox than other browsers. – 1.21 gigawatts Sep 13 '15 at 07:50
  • @Md.AlaminMahamud - Can you explain this more? If I have a style for #mybutton in the main stylesheet you are saying add a new stylesheet with #mybutton that addresses browser specific styles with -moz, -khtml etc? – 1.21 gigawatts Sep 13 '15 at 07:52
  • This question doesn't make sense to me, a site should be consistent across all browsers. The difference should rather be based on the size of the device used rather than browser. But yet again, I don't know what exactly what you're doing as a project. – Chrillewoodz Sep 13 '15 at 07:56
  • @Chrillewoodz - I'm trying to fix font positioning. In one browser the text is farther down than the other browser. So I want to pull it up a few pixels by using -moz-margin-top:-5px. I don't know if you've seen this before but it isn't apparent until you get to a larger font size. The solutions were to increase the line-height but if I'm inside a container that I'm trying to size to content I won't know that. I'll try and find the original question. – 1.21 gigawatts Sep 13 '15 at 08:06
  • @Chrillewoodz - The related question, http://stackoverflow.com/questions/22447932/what-is-this-padding-above-the-text-label-and-how-do-i-handle-it. I haven't tested other browsers but I expect that the text may be off in each of them. So, for each one I was going to try to add an adjustment factor. I haven't figured it out yet. – 1.21 gigawatts Sep 13 '15 at 08:17
  • 1
    Hmm.. I understand your issue. Seems strange that you must do it like this though, should be a far easier solution – Chrillewoodz Sep 13 '15 at 08:26
  • 1
    There is a big list of tricks here: https://borishoekmeijer.nl/tutorials/how-to-target-a-specific-browser-css-only/ and some here: https://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html – Vadzim Jan 16 '18 at 14:36

4 Answers4

24

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.

WasiF
  • 26,101
  • 16
  • 120
  • 128
Ganesh Yadav
  • 2,607
  • 2
  • 29
  • 52
  • What's the css or styl code for applying a CSS rule only to Chrome? Is it the @media screen? – Gobliins Apr 04 '18 at 08:42
  • Safari and Google Chrome use WebKit rendering engine so it is very likely that every hack works in Safari. – Ganesh Yadav Apr 05 '18 at 06:02
  • 5
    One valid reason to apply a browser-specific CSS rule is to workaround browser bugs without impacting behaviour for other browsers. – John Rix Oct 04 '19 at 11:02
  • May I ask why it's poor practice? I only ask because if client says to me "Why can't you just target each browser so it's consistent" I want to know what the proper answer would be. I would rather avoid that option, but if client presses for it would need a good reason to push back. – Cmaxster Apr 14 '21 at 23:58
8

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

No, that isn't how it works.

Vendor prefixed properties are used for experimental features. Either because the specification for the property hasn't been locked down or because the browser implementor knows their are problems with the implementation.

In general, you shouldn't use them in production code because they are experimental.

Support for the vendor prefixed versions is removed as support stabilises.

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

There are several methods that have been used for that effect.

Parser bugs

By exploiting bugs or unsupported features in specific CSS engines (e.g. some versions of IE will ignore a * character on the front of a property name while other browsers will (correctly) discard the entire rule).

Conditional comments

Older versions of Internet Explorer supported an extended HTML comment syntax that could be used to add <link> or <style> elements specifically for certain versions of IE.

Support for this has been dropped.

JavaScript

Classes can be added to elements (typically the body element) using JavaScript after doing browser detection in JS.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
3

As far as I know, prefixes were added to properties when CSS3 was being implemented by different browsers, and just property wouldn't work so we'd use -prefix-property for certain properties like gradient or border-radius. Most of them work without the prefix now for most browsers, and the prefix system has been kept only for backward compatibility.

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;

This won't work. You can, however use different stylesheets for different browsers (say IE) in this manner:

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

The browser-specific prefix version thing doesn't exist.

Hope this answers your question.

lagboy
  • 94
  • 4
3

As a workaround you can detect browser version in JS, and add it to class of your root element. You can detect browser through user agent , and there are multiple libraries in npm. Using this class as a base, you can target browsers

function detectBrowser() {
  if (navigator.userAgent.includes("Chrome")) {
    return "chrome"
  }
  if (navigator.userAgent.includes("Firefox")) {
    return "firefox"
  }
  if (navigator.userAgent.includes("Safari")) {
    return "safari"
  }
}
document.body.className = detectBrowser()
p {
  display: none;
}
.safari .safariSpecific, .firefox .firefoxSpecific, .chrome .chromeSpecific {
  display: block
}
My Browser is
<p class="chromeSpecific">Chrome</p>
<p class="firefoxSpecific">Firefox</p>
<p class="safariSpecific">Safari</p>
Kiran
  • 388
  • 2
  • 16
  • great hacky way. Any downsides using this? – dcts Sep 29 '21 at 23:03
  • unfortunately it does not work for me because `navigator.userAgent` returns `"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36"`, so multiple browsers are included. – dcts Sep 29 '21 at 23:06
  • This is a bare minimum answer to provide an alternate way. There are better and more reliable ways to detect browser - https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser – Kiran Oct 07 '21 at 10:46