如何使用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屋！