主页 / 问题 / 710787
Accepted
Yuri
Asked:2020-08-26 16:49:10 +0000 UTC2020-08-26 16:49:10 +0000 UTC

如何了解浏览器对 CSS 属性的支持？[复制]

  • 772

我想编写一个可以在许多浏览器中正常工作的跨浏览器站点。

有什么方法可以确定浏览器是否支持这个 CSS 属性？有没有办法单独使用 CSS 来了解这一点？

javascript

1 个回答

  1. Best Answer

    在 css 中有一个用于验证的指令，@supports类似于@media，但接收对作为请求(свойство: значение)。要从脚本中检查，有一个函数CSS.supports可以将属性和值作为参数传递，或者将完全形成的请求作为唯一参数。

    当然，这一切也有浏览器支持，比某些属性要少得多。

    if (window.CSS && CSS.supports) {
  console.log(CSS.supports('-webkit-appearance', 'none'));
  console.log(CSS.supports('-webkit-appearance: none'));
  console.log(CSS.supports('appearance', 'none'));
  console.log(CSS.supports('appearance: none'));
  console.log(CSS.supports('(-webkit-appearance: none) or (appearance: none)'));
}
    @supports (display: contents) {
  body {
    background: silver;
  }
}

@supports (pointer-events: none) {
  body {
    color: green;
  }
}
    Just some text

    Firefox 58 和 Chrome 63 的屏幕截图：
    FF58截图
    Chrome 63 的屏幕截图

    链接：

    • 3

相关问题