javascript - 如何为特定于浏览器的 css 表达式做回退

Question

如何在 jquery 中为 css 属性指定浏览器特定的回退？

例如我想做相当于

h1 {
  background-image: -webkit-linear-gradient(left, white, black);
  background-image: -moz-linear-gradient(left, white, black);
  background-image: -o-linear-gradient(left, white, black);
  background-image: -ms-linear-gradient(left, white, black);
}

• $('h1').css({'background-image': x, 'background-image': y}) -- js 语法当然只允许一个 'background-图片'键。
• $('h1').css('background-image', x).css('background-image', y) -- jquery 将覆盖第一个值。
• $('h1').css('background-image', x + ',' + y) -- 浏览器不喜欢它。

Answer 1

您可以通过将 CSS 应用于元素然后读回值来询问浏览器它想要哪个前缀 – $('h1').css('background-image'); 你然后可以使用返回的值来了解稍后设置 background-image 时要使用的前缀。

更好的是，您可以利用 jQuery 的 CSS Hook 将 所有 调用规范化为 .css。有一套很棒的 Hook here ;你可能对 gradients hook 感兴趣.

安装 Hook 后，it's as easy as:

$(selector).css('background-image','linear-gradient(x,y,z)');