如何检查浏览器是否支持CSS属性或值？

Question

我的使用vh的

在某些浏览器中无法工作，所以我想检查一下是否支持。我找到了Lea Verou关于这个主题的文章，但我真的不确定如何与CSS value一起使用：

以下是给出的代码快捷方式：

if('opacity' in document.body.style) {  
   // do stuff
}

function isPropertySupported(property{
   return property in document.body.style;
 }

在上面的文章评论中，有人问如何检查CSS 值是否受支持，答案是：“您设置它，然后读取值并检查浏览器是否保留了它。”听起来需要JavaScript（我不知道）。

我该如何在CSS或JavaScript中检查浏览器是否支持属性或值？

- Guillaume Palm

---

你可以使用 stylelint-no-unsupported-browser-features（从技术上回答你的问题，因为这种方法使用了 Javascript（Node.js），但是在构建时而不是运行时）。 - Motin

Answer 1

现在有一个新的APICSS.supports，该API被大多数浏览器支持，但不支持IE浏览器。点击此处查看支持情况。

console.log(
  // CSS.supports(property, value)
  1, CSS.supports("text-decoration-style", "blink"),
  2, CSS.supports("display", "flex"),
  3, CSS.supports('--foo', 'red'),
  4, CSS.supports('(--foo: red)'),

  // CSS.supports(DOMstring)
  5, CSS.supports("( transform-origin: 5% 5% )"),
  6, CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or " 
  + "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )")
)

CSS 中也有类似的功能，即 @supports 特性查询选择器，在大多数浏览器中都得到支持，除了 IE：

@supports (display: grid) {
  div {
    display: grid;
  }
}
@supports not (display: grid) {
  div {
    float: right;
  }
}

- Eric Willigers

Answer 2

我认为你的意思是要检查是否支持 vh 值，而不是特定地检查 DIV#id 是否使用了它？

function cssPropertyValueSupported(prop, value) {
  var d = document.createElement('div');
  d.style[prop] = value;
  return d.style[prop] === value;
}
cssPropertyValueSupported('width', '1px');
// => true
cssPropertyValueSupported('width', '1vh');
// => maybe true, maybe false (true for me)
cssPropertyValueSupported('width', '1foobar');
// => false

编辑：此方法已过时；CSS.supports现在得到广泛支持，并应该使用它。请改为支持这个回答。

- Amadan

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Guillaume Palm

通常情况下，if语句在这里是最合适的选择。 - Amadan

做到了！希望我能更好地理解代码，但我会在适当的时间内理解的！非常感谢Amadan。 - Guillaume Palm

请注意，如果CSS属性完全不受支持，此函数会错误地返回true。例如，在不支持任何dominant-baseline值的MS Edge上，cssPropertyValueSupported('dominant-baseline'， 'hanging')将返回true。如果可能，请改用CSS.supports(property, value)。它可以在除IE（任何版本）和2013年以来的原生Android之外的所有浏览器中使用。（https://caniuse.com/#search=css.supports） - user56reinstatemonica8

这是一个很好的答案，只是要补充一点，你应该注意设置样式会使它标准化，例如"polygon(50% 0px,100% 100%,0% 100%)"变成标准的"polygon(50% 0px, 100% 100%, 0% 100%)"（逗号后面有一个空格）。另外为了避免前面评论所说的问题，也许你应该先检查属性是否存在，像style[camelCaseProp]应该是一个空字符串而不是未定义。虽然我不能保证所有浏览器都是这样工作的。 - zavr

这个答案绝不过时。如果CSS.supports本身可能不被支持，为什么要尝试使用它呢？整个想法是检查过时，这应该通过最基本的代码实现。 - Glenn Carver

Answer 3

我们可以使用JavaScript的CSS.supports方法来测试上下文中是否存在某个CSS规则。

(自Firefox 22/ Chrome 28版本以来可用)

console.log(
CSS.supports("( transform-origin: 5% 5% )"),
"\n",
CSS.supports("( display: flex )"),
"\n ",
CSS.supports("( background-color: #12233212 )")
)

CSS.supports() 静态方法返回一个布尔值，指示浏览器是否支持给定的 CSS 特性。

https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports

---

为了更进一步，我们可能可以使用这个属性来进行浏览器检测。

- NVRM

Answer 4

我看到你那里的代码。

var styletotest = "PutStyleHere";

if (styletotest in document.body.style)
{
    alert("The " + styletotest + " property is supported");

} else {

    alert("The " + styletotest + " property is NOT supported"); 

}

只需将要测试的CSS属性放在引号中，即可：

PutStyleHere

当加载文件时，它将显示一个弹出窗口，告诉您它是否有效。

然而，这似乎是不必要的。 只需在Google中搜索:

[property] css W3

其中[property]是您想要了解浏览器支持信息的属性。

当我搜索透明度CSS W3，然后点击W3链接时…… 您可以向下滚动页面，并查看页面上的所需信息，如下所示:

来源

- Trevor Clarke

---

遗憾的是，警告显示即使在Firefox和Chrome中也不支持它。我有一种感觉，“in document.body.style”可能有问题。无论如何，我尝试了Amadan的建议，它起作用了。再次感谢您的帮助！ - Guillaume Palm

在某些情况下，您可能希望填充某些属性不受支持的样式，因此这并非完全没有必要。 object-fit 是一个很好的例子，就目前而言。 - Jon Hendershot

Answer 5

使用新的 CSS @supports 功能。您可以从 CSS 和 JavaScript 中使用此功能。

CSS:

@supports(width: 1vh) {
  div#id {
    width: 1vh;
  }
}
/* Use at `@supports not` if you want to give an `else` condition */
@supports not (width: 1vh) {
  div#id {
    width: 3%;
  }
}

JavaScript方式： CSS API提供了supports()方法来实现此功能。

if(CSS.supports('width', '1vh')) {
  document.querySelector('div#id').style.width = '1vh';
} else {
  documen.querySelector('div#id').style.width = '1%';
}

请阅读 CSS条件规则

- Erisan Olasheni

Answer 6

建议使用Modernizr。

Modernizr是一个JavaScript库，可以检测访问者的浏览器支持哪些HTML5和CSS3功能。在检测功能支持时，它允许开发人员测试一些新技术，然后为不支持这些功能的浏览器提供备选方案。

一些有用的链接：

• Modernizr：用于HTML5/CSS3功能检测的库

• 使用Modernizr检测HTML5功能并提供备用方案

• HTML5 Boilerplate定制版Modernizr用于功能检测

- Stickers

---

安装一个库来检查一个CSS属性是否存在？ - Rob

@Rob 感谢您的评论。确实，OP只在那里说了一个属性，但在实际项目中很可能需要检查更多。您可能不想最终编写全新的库。Modernizr非常可定制。易于使用，无论是初学者还是专家。 - Stickers

这看起来是一个不错的选择，但事实上我只需要检查一个CSS值。将来我一定会研究modernizr。谢谢！ - Guillaume Palm

Answer 7

在Chromium浏览器中，您现在可以使用DevTools进行检查，以查看特定的声明（属性+值）是否受支持。以下是我网站的Chrome 101（Beta）版本的屏幕截图，这是第一个支持font-palette属性的Chromium版本：

您可以在绿色框中看到以下条件的@supports规则：

@supports (font-palette: dark) or (font-palette: light)

在Chrome 101中，以下两个声明都是有效的：

font-palette: light;
font-palette: dark;

被支持。

与上面的答案不同，这是一个纯粹的 DevTools -> Styles 解决方案，用于确定浏览器中的支持情况。

- CSSBurner

Answer 8

这是我的代码，通过检查样式中是否存在驼峰式属性，并在可用时使用CSS.supports来处理完全不支持的属性。

const prefixes = ['', '-webkit-']

function supports(prop, value) {
  if ('CSS' in window && 'supports' in window.CSS) {
    for (let i = 0; i < prefixes.length; i++) {
      const property = prefixes[i] + prop

      if (window.CSS.supports(property, value) ) { return true }
    }
    return false
  }

  const el = document.createElement('div')

  let found = false
  prefixes.forEach((pr) => {
    if (found) return
    const p = `${pr}${prop}`
    const Prop = p.replace(/-(.)/g, (m, s) => s.toUpperCase())
    if (!(Prop in el.style)) return
    el.style[p] = value
    found = el.style[p] == value // can just check if it's not empty actually
  })
  return found
}

- zavr