Question

你如何测试background-clip的值：text，webkit支持文本，但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

您可以使用@supports CSS 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之外的所有浏览器，IE仍然无法使用此属性，所以没问题。

set -e

如何测试浏览器对Background-clip：text的支持？

3 个答案: