如何检查浏览器是否支持css值？
Gui*_*alm 23 javascript css browser jquery viewport
我不是很熟悉javascript所以请耐心等待我.Safari 6及以下和较旧的Android移动浏览器可能更多不支持css值VH.我的DIV #id或class不是视口的高度.下面是一个页面的链接,我发现了一些有用的信息,但我真的不知道如何使用它与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值？
对答案的指导非常感谢.谢谢你的帮助.
Ama*_*dan 26
我假设您打算检查是否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属性，这将错误地返回`true`。例如，`cssPropertyValueSupported（'dominant-baseline'，'hanging'）`将在MS Edge上返回`true`，它不支持`dominant-baseline`的* any *值。**如果可以的话，请改用`CSS.supports（property，value）`，[适用于除IE（任何版本）以外的所有内容，并支持2013年以后的Android版本]（https://caniuse.com/#search=css。支持）** (5认同)
Eri*_*ers 18
有新的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;
}
}
一段时间以来，我们可以从 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 链接...您可以向下滚动，您将看到页面的一部分，其中包含您想要的信息，如下所示：
