Search code examples
cssgoogle-chromefirefoxbrowsertarget

How to target specific browsers in 2018

I used code like:

-webkit-
-moz-
@-moz-document url-prefix() {}

in the past to target one browser at a time with CSS, but none of these seem to be working any more for me.

Here is the documentation of -webkit- for example: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transition#Browser_compatibility

You can see that it is not recommended any more.

Is there a secure way to target a specific browser (mainly Chrome and Firefox) with CSS?

Solution

  • I think you are looking for @supports

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

    https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/