Apply different CSS in different browser

Question

Basically I am designing something where the backdrop-filter CSS property is used. As of today this is not supported in Firefox, which means that my thing looks kind of terrible in Firefox. My semi-solution is to add a background color instead (not as pretty, but will work) instead, when Firefox is used. But this background should not be there in other browsers.

What to do ? :)

[see `@supports`](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports). — zzzzBov, Apr 05 '21 at 16:07
you could use filters: https://developer.mozilla.org/fr/docs/Web/CSS/filter It's experimental but supported by every browser — Gibberish, Apr 05 '21 at 16:07
Does this answer your question? [How to check if -webkit-text-stroke is supported in browser](https://stackoverflow.com/questions/60390697/how-to-check-if-webkit-text-stroke-is-supported-in-browser) — Heretic Monkey, Apr 05 '21 at 16:57

score 1 · Accepted Answer · answered Apr 05 '21 at 16:25

There is a good article about how to apply different styles for different browsers.

So code can look like this:

/* Style only for Google Chrome/Opera */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .foo {
      background: lightgreen;
  }
}

/* Style only for Mozilla Firefox */
@-moz-document url-prefix() {
  .foo {
      background: lightgreen;
  }
}

/* Style only for Internet Explorer */ 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .foo {
      background: lightgreen;
  }

}

score 0 · Answer 2 · answered Apr 05 '21 at 16:44

Use a direct feature query to determine if the browser supports this feature. I think you should be able to use the following query:

@supports (backdrop-filter: none;) {
  Your css using this feature. 
}

More on this https://developer.mozilla.org/en-US/docs/Web/CSS/@supports.

The browser family query isn't as reliable as you will also need to know the version, and it won't update when a newer version of Firefox supports this feature.

score -1 · Answer 3 · answered Apr 05 '21 at 16:10

-1

You can use @supports to target a browser by feature. For Firefox, this should work -

@supports (-moz-appearance:none) {
    .element { background-color: blue; } 
}

answered Apr 05 '21 at 16:10

Oratorio Tangram

58
4

MDN says: "User must explicitly enable this feature" – Gibberish Apr 05 '21 at 16:12

Apply different CSS in different browser

3 Answers3