CODEWITHSUNDEEP
htmlcss
1.21 gigawatts
1.21 gigawatts

Reputation: 17760

Is there a way to set any style for a specific browser in 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".

Upvotes: 29

Views: 58890

Answers (4)

Kiran
Kiran

Reputation: 410

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>

Upvotes: 4

Ganesh Yadav
Ganesh Yadav

Reputation: 2685

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.

Upvotes: 28

Quentin
Quentin

Reputation: 943568

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.

Upvotes: 8

lagboy
lagboy

Reputation: 94

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.

Upvotes: 3

Related Questions