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

Posted 2023-02-21

【中文标题】如何检查浏览器是不是支持css值？

【英文标题】：How to check if css value is supported by the browser?如何检查浏览器是否支持css值？

【发布时间】：2016-07-11 13:09:33

【问题描述】：

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

Check whether a css value is supported

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

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


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

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

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

所以总结一下我的问题：

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

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

【问题讨论】：

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

【参考方案1】：

有新的 API CSS.supports。在most browsers except 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 feature query selector，还有supported in most browsers except IE：

@supports (display: grid) 
  div 
    display: grid;
  

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

【参考方案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

【讨论】：

感谢您的帮助。与我当前的知识相比，此代码非常先进。我只是在猜测，但我应该用 if 语句测试 cssPropertyValueSupported('width', '100vh') 吗？

是的，通常if 语句在这里最有意义。

成功了！希望我能更多地理解代码，但我会在适当的时候！非常感谢阿马丹。

请注意，如果 CSS 属性完全不受支持，这将错误地返回 true。例如，cssPropertyValueSupported('dominant-baseline', 'hanging') 将在 MS Edge 上返回 true，它不支持 dominant-baseline 的 any 值。 如果可以，请改用CSS.supports(property, value)，works on everything except IE (any version) and stock Android from 2013

这是一个很好的答案，只是要补充一点，您应该注意设置样式会使它正常化，就像“多边形（50% 0px,100% 100%,0% 100%）”变成标准的“多边形(50% 0px, 100% 100%, 0% 100%)”（后面有一个空格，）。另外为了减轻前面的评论，也许你应该首先检查属性的存在，比如 style[camelCaseProp] 它应该是一个空字符串而不是未定义。虽然我不能保证所有浏览器都是这样工作的。

【参考方案3】：

我们可以从 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

---

To go further, we can possibly use this property for browser detection.

【参考方案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 属性放在它所说的引号中

把样式放在这里

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

但是这似乎没有必要。

只需谷歌搜索：

[属性] css W3

其中[property]是你想知道浏览器支持信息的属性。

当我搜索时

不透明度 Css W3

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

Source

【讨论】：

遗憾的是，警报说即使在 Firefox 和 chrome 中也不支持。我觉得“in document.body.style”有些不对劲。无论如何，我尝试了 Amadan 的建议，它奏效了。再次感谢您的帮助！

在您可能想要 polyfill 某些不支持您的属性的样式的情况下，这并非完全没有必要。 object-fit 就是一个很好的例子，现在

【参考方案5】：

我建议使用 Modernizr。

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

一些有用的链接：

Modernizr: the feature detection library for HTML5/CSS3

Using Modernizr to detect HTML5 features and provide fallbacks

HTML5 Boilerplate custom build of Modernizr for feature detection

【讨论】：

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

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

这看起来确实是一个不错的选择，但确实我只需要检查一个 css 值。我肯定会为未来的项目研究modernizr。谢谢！

【参考方案6】：

这是我的代码，它通过检查样式中是否存在驼峰式道具来解决完全不受支持的属性，并在可用时使用 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

【参考方案7】：

使用新的 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 Conditional Rules