javascript - 如何测试浏览器对背景剪辑的支持：文本？

Question

你会如何测试 background-clip: text 的值，webkit 支持 text，但是 mozilla 和其他浏览器没有我尝试过modernizr teststyles 但没有运气

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

您可以使用@supportsCSS at-rule：

举个例子：

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

Answer 3

你可以在你的 js 中使用 CSS.supports。CSS.supports api 适用于除 IE 之外的所有浏览器，在这些浏览器中，此属性无论如何都不起作用，所以没关系。

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