如何检查浏览器是否支持css值？

IT技术 javascript jquery css browser viewport
2021-03-16 03:26:42

我对 javascript 不是很熟练，所以请多多包涵。Safari 6 及更低版本和更旧的 android 移动浏览器甚至更多不支持 css 值 VH。我的 DIV#id 或类不是视口的高度。下面是一个页面的链接，我发现了一些有用的信息，但我真的不知道如何将它与 css 值一起使用：

检查是否支持 css 值

这是为您提供的快捷方式代码：

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

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

在我上面附加的链接的评论中，有人询问如何检查是否支持 css VALUE，答案是，“您设置它，然后读回该值并检查浏览器是否保留了它。” 现在我确信，如果我知道更多我刚刚开始学习的 javascript，那将是有用的信息。

这就是我的想法，但我真的不知道如何去做。检查 div#id 或 div.class 是否有 vh css 值。检查浏览器是否支持css值。如果支持，则继续加载。如果不支持，则更改 id 或 class。

所以总结一下我的问题：

如何使用 javascript 或 jquery 检查浏览器是否支持 css 值？

对答案的指导非常感谢。谢谢你的帮助。

6个回答

有新的 API CSS.supports。支持除 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;
  }
}

我假设您是想检查该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
这是一个很好的答案，只是要补充一点，您应该注意设置样式会将其标准化，例如“多边形（50％0px，100％100％，0％100％）”成为标准“多边形（50％0px，100％100 %, 0% 100%)”（, 后有一个空格）。同样为了减轻之前的评论，也许您应该首先检查属性是否存在，例如 style[camelCaseProp] 它应该是一个空字符串而不是未定义的。虽然我不能保证这就是所有浏览器的工作方式。
2021-04-22 03:26:42
成功了！希望我能更多地理解代码，但我会在适当的时候！非常感谢阿马丹。
2021-04-28 03:26:42
是的，通常这里的if语句最有意义。
2021-05-01 03:26:42
请注意，true如果完全不支持 CSS 属性，这将错误地返回。例如，cssPropertyValueSupported('dominant-baseline', 'hanging')将返回true在MS边缘，它不支持任何值dominant-baseline。如果可以，请CSS.supports(property, value)改用它，它适用于除 IE（任何版本）和 2013 年起的 Android 以外的所有内容
2021-05-15 03:26:42
谢谢你的帮助。与我目前的知识相比，这段代码非常先进。我只是在猜测，但我应该用 if 语句测试 cssPropertyValueSupported('width', '100vh') 吗？
2021-05-18 03:26:42

一段时间以来，我们可以从 javascript 测试 css 规则（如果在上下文中可用）CSS.supports。

（从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

更进一步，我们可以使用此属性进行浏览器检测。

我看到你在那里的代码。

var styletotest = "PutStyleHere";

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

} else {

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

}

只需将要测试的 css 属性放在它所说的引号中

在这里放置样式

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

然而这似乎没有必要。

简单的谷歌搜索：

【属性】css W3

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

当我搜索

不透明度 Css W3

然后单击 W3 链接...您可以向下滚动，您将看到页面的一部分，其中包含您想要的信息，如下所示：

浏览器支持

来源

可悲的是，警报说即使在 Firefox 和 chrome 中也不支持它。我有一种感觉，“in document.body.style”有些不对劲。无论如何，我尝试了 Amadan 的建议并且它奏效了。再次，非常感谢您的帮助！
2021-05-16 03:26:42
在您可能想要对不支持您的属性的某些样式进行 polyfill 的情况下，并非完全没有必要。object-fit是一个很好的例子，现在
2021-05-18 03:26:42

我建议使用 Modernizr。

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

一些有用的链接：

@Rob 感谢您的评论。OP确实只是在那里说了一个属性，但是很可能需要在实际项目中进行更多检查。可能您不想最终编写一个全新的库。无论如何，Modernizr 是高度可定制的。初学者和专家都易于使用。
2021-04-26 03:26:42
安装一个库来检查一个 CSS 属性是否存在？
2021-05-01 03:26:42
这看起来确实是一个不错的选择，但确实我只需要检查一个 css 值。我肯定会在未来的项目中研究 Modernizr。谢谢！
2021-05-21 03:26:42
其它你可能感兴趣的问题
上一篇jQuery :contains()，但要匹配一个精确的字符串 下一篇如何在 Angular 中处理浏览器选项卡关闭事件？只关闭不刷新