CODEWITHSUNDEEP
javascriptcss
Lawrence
Lawrence

Reputation: 845

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

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

Upvotes: 5

Views: 1926

Answers (3)

pau.moreno
pau.moreno

Reputation: 4675

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;
  }
}

Upvotes: 2

mat
mat

Reputation: 201

You can use CSS.supports in your js. The CSS.supports api works for all browsers except IE, where this property doesn't work anyway so that's fine.

let supported = CSS.supports && CSS.supports('-webkit-background-clip', 'text');

Upvotes: 1

Inkbug
Inkbug

Reputation: 1692

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

Upvotes: 6

Related Questions