如何使用JavaScript检测CSS变量支持? [英] How can I detect CSS Variable support with JavaScript?
问题描述
最新版本的Firefox支持 CSS变量,但Chrome,IE而其他浏览器的负载则不然。应该可以访问DOM节点或写一个小方法返回浏览器是否支持此功能,但我还没有能够找到任何目前能够做到这一点。我需要的是一个解决方案,我可以使用作为条件运行代码,如果浏览器不支持该功能,像:
The latest version of Firefox has support for CSS Variables, but Chrome, IE and loads of other browsers do not. It should be possible to access a DOM Node or write a little method which returns whether the browser supports this feature, but I haven't been able to find anything which is currently able to do this. What I need is a solution which I can use as condition to run code if the browser does not support the feature, something like:
if (!browserCanUseCssVariables()) {
// Do stuff...
}
推荐答案
我们可以使用 CSS.supports
。这是CSS的 @supports
规则的JavaScript实现,它目前在Firefox,Chrome,Opera和Android Browser中可用(参见我可以使用... )。
We can do this with CSS.supports
. This is the JavaScript implementation of CSS's @supports
rule which is currently available in Firefox, Chrome, Opera and Android Browser (see Can I Use...).
CSS.supports()
static方法返回一个布尔值,表示浏览器是否支持给定的CSS功能。
- Mozilla开发人员网络
The
CSS.supports()
static methods returns a Boolean value indicating if the browser supports a given CSS feature, or not.
– Mozilla Developer Network
有了这个,我们可以简单的:
With this, we can simply:
window.CSS.supports('--fake-var', 0);
这样做的结果将是 true
if浏览器支持CSS变量, false
。
The result of this will be true
if the browser supports CSS variables, and false
if it doesn't.
在Firefox上,此代码片段将产生一个绿色背景,因为我们的 CSS.supports
为上述' - fake-variable'
返回 true
。在不支持CSS变量的浏览器中,背景将是红色的。
On Firefox this Code Snippet will produce a green background, as the result of our CSS.supports
for the above '--fake-variable'
returns true
. In browsers which do not support CSS variables the background will be red.
var body = document.getElementsByTagName('body')[0];
if (window.CSS && window.CSS.supports && window.CSS.supports('--fake-var', 0))
body.style.background = 'green';
else
body.style.background = 'red';
注意,这里我还添加了检查以查看 window.CSS
和 window.CSS.supports
exists - 这将防止在不支持此JavaScript实现的浏览器中抛出错误,并将其视为 false
。
Note that here I've also added checks to see whether window.CSS
and window.CSS.supports
exist - this will prevent errors being thrown in browsers which do not support this JavaScript implementation and treat that as false
as well.
在这种情况下, code> browserCanUseCssVariables()函数。以下代码段将根据支持提醒 true
或 false
。
In your case, we can create the browserCanUseCssVariables()
function by simply performing the same logic. This below snippet will alert either true
or false
depending on the support.
function browserCanUseCssVariables() {
return window.CSS && window.CSS.supports && window.CSS.supports('--fake-var', 0);
}
if (browserCanUseCssVariables())
alert('Your browser supports CSS Variables!');
else
alert('Your browser does not support CSS Variables and/or CSS.supports. :-(');
这篇关于如何使用JavaScript检测CSS变量支持?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!