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

Question

我对javascript不是很熟练，所以请多多包涵。 Safari 6 及更低版本和更早的 android 移动浏览器可能不支持 css 值 VH。我的 DIV#id 或 class 不是视口的高度。下面是一个 link 页面，我发现了一些有用的信息，但我真的不确定如何将它与 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;
 }

在我上面附上的 link 的评论中，确实有人问如何检查 css VALUE 是否受支持，答案是，"You set it, then read the value back and check if the browser retained it." 现在我确定那是有用的信息，如果我知道更多 javascript 我刚刚开始学习。

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

总结一下我的问题：

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

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

Answer 1

我假设您的意思是检查 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

Answer 2

我看到你那里的代码了。

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

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

不过这似乎没有必要。

简单谷歌搜索：

[property] css W3

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

当我搜索时

Opacity Css W3

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

Source

Answer 3

我建议使用 Modernizr。

Modernizr is a JavaScript library that detects which HTML5 and CSS3 features your visitor's browser supports. In detecting feature support, it allows developers to test for some of the new technologies and then provide fallbacks for browsers that do not support them.

一些有用的链接：

Answer 4

有新的APICSS.supports. Supported in 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, also supported in most browsers except IE:

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

Answer 5

一段时间后，我们可以从 javascript 测试 css 规则是否在 CSS.supports 的上下文中可用。

（自 Firefox 22/Chrome28）

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

The CSS.supports() static methods returns a Boolean value indicating if the browser supports a given CSS feature, or not.

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

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

Answer 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
}

Answer 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

阅读更多内容

Answer 8

Chromium 浏览器支持 starting in version 100 you can now inspect using DevTools to see if a particular declaration（属性 + 值）。

这是我的网站使用 Chrome 101（测试版）的屏幕截图，即 first Chromium version to support font-palette 属性:

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

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

在 Chrome 101 中，以下两个声明

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

支持。

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

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

How to check if css value is supported by the browser?

javascript

css

browser

jquery

viewport