How to test Browser support for Background-clip: text?

Question

How would you test the value of background-clip: text, webkit supports text, but mozilla and other browsers do not I have tried modernizr teststyles but no luck

Answer 1

var testEl = document.createElement( "x-test" );
var supportsWebkitBackgroundClipText = typeof testEl.style.webkitBackgroundClip !== "undefined" && ( testEl.style.webkitBackgroundClip = "text", testEl.style.webkitBackgroundClip === "text" );

Answer 2

You can use @supports CSS at-rule:

As an example:

.colorful {
  color: #0098db;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .colorful {
    background: #0098db;
    background: linear-gradient(
      0deg,
      #0098db 0%,
      #0098db 45%,
      #c9d9ec 45%,
      #c9d9ec 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}