web-dev-qa-db-ja.com

JavaScriptでCSS変数のサポートを検出するにはどうすればよいですか？

Firefoxの最新バージョンは CSS変数 をサポートしていますが、Chrome、IEおよび他のブラウザのロードはサポートしていません。DOMにアクセスできるはずですNodeまたは、ブラウザがこの機能をサポートしているかどうかを返す小さなメソッドを記述しますが、現在これを実行できるものを見つけることができませんでした。必要なのは、次のように使用できるソリューションです。ブラウザがこの機能をサポートしていない場合にコードを実行するための条件。次のようになります。

if (!browserCanUseCssVariables()) {
  // Do stuff...
}
javascriptcssbrowser-feature-detectioncss-variables
21
Andre Mohren

_CSS.supports_ でこれを行うことができます。これは、現在Firefox、Chrome、OperaおよびAndroidブラウザで利用可能なCSSの_@supports_ルールのJavaScript実装です（ を参照）使用できますか... ）。

CSS.supports() staticメソッドは、ブラウザが特定のCSS機能をサポートしているかどうかを示すブール値を返します。
– Mozilla Developer Network

これにより、次のことが簡単になります。

_CSS.supports('color', 'var(--fake-var)');
_

この結果は、ブラウザーがCSS変数をサポートしている場合はtrueになり、サポートしていない場合はfalseになります。

（CSS.supports('--fake-var', 0)が機能すると思うかもしれませんが、この回答のコメントに記載されているように、Safariにはバグがあり、失敗しているようです。）

純粋なJavaScriptの例

Firefoxでは、上記の_CSS.supports_呼び出しがtrueを返すため、このコードスニペットは緑色の背景を生成します。 CSS変数をサポートしていないブラウザでは、背景が赤になります。

_var body = document.getElementsByTagName('body')[0];

if (window.CSS && CSS.supports('color', 'var(--fake-var)')) {
  body.style.background = 'green';
} else {
  body.style.background = 'red';
}_

ここで、_window.CSS_が存在するかどうかを確認するチェックも追加したことに注意してください。これにより、このJavaScript実装をサポートしていないブラウザーでエラーがスローされるのを防ぎ、それをfalseとして扱います。 （_CSS.supports_はCSS globalが導入されたのと同時に導入されたため、同様にチェックする必要はありません。）

browserCanUseCssVariables()関数の作成

あなたの場合、同じロジックを実行するだけでbrowserCanUseCssVariables()関数を作成できます。以下のスニペットは、サポートに応じてtrueまたはfalseのいずれかを警告します。

_function browserCanUseCssVariables() {
  return window.CSS && CSS.supports('color', 'var(--fake-var)');
}

if (browserCanUseCssVariables()) {
    alert('Your browser supports CSS Variables!');
} else {
    alert('Your browser does not support CSS Variables and/or CSS.supports. :-(');
}_

結果（すべてWindowsでのみテスト済み）

Firefox v31

Firefox

Chrome v38

Chrome

Internet Explorer 11

IE11

41
James Donnelly

CSS変数を使用してCSSスタイルを設定し、Javascriptを使用して証明します。設定されている場合はgetComputedStyle() ... getComputedStyle()は多くのブラウザーでサポートされています： http://caniuse.com /＃feat = getcomputedstyle

[〜＃〜] html [〜＃〜]

<div class="css-variable-test"></div>

[〜＃〜] css [〜＃〜]

:root {
  --main-bg-color: rgb(1, 2, 3); /* or something else */
}

.css-variable-test {
    display: none;
    background-color: var(--main-bg-color);
}

JavaScript

var computedStyle = getComputedStyle(document.getElementsByClassName('css-variable-test')[0], null);

if (computedStyle.backgroundColor == "rgb(1, 2, 3)") { // or something else
    alert('CSS variables support');
}

フィドル： http://jsfiddle.net/g0naedLh/6/

8
algorhythm

Do stuff...がJavascript自体でない限り、ブラウザがカスタムプロパティをサポートしているかどうかを検出するためにJavascriptは必要ありません。あなたがサポートを検出しているのはCSSなので、あなたがやろうとしているのはすべてCSSだと思います。したがって、この特定の問題からJSを削除する方法がある場合は、 機能クエリ をお勧めします。

@supports (display: var(--prop)) {
  h1 { font-weight: normal; }
  /* all the css, even without var() */
}

機能クエリは、構文のサポートをテストします。 displayを照会する必要はありません。必要なプロパティを使用できます。同様に、--propの値も存在する必要はありません。あなたがしているのは、ブラウザがその構文の読み方を知っているかどうかを確認することだけです。

（ほとんどすべてのブラウザがサポートしているため、displayを選択しました。flex-wrapなどを使用すると、カスタムプロップをサポートしているがフレックスボックスをサポートしていないブラウザを見つけることができません。）

補足：私はそれらをカスタムプロパティと呼ぶことを好みます。著者。はい、変数として使用できますが、DOM継承など、プロパティとしての利点がいくつかあります。

body    { --color-heading: green; }
article { --color-heading: blue; }
h1      { color: var(--color-heading); } /* no need for descendant selectors */
7
chharvey

chrome 49（ネイティブサポートがあるにもかかわらず）でcss変数をテストするためにwindow.CSS.supportsメソッドを機能させるのに問題がありました）。

var supportsCssVars = function() {
    var s = document.createElement('style'),
        support;

    s.innerHTML = ":root { --tmp-var: bold; }";
    document.head.appendChild(s);
    support = !!(window.CSS && window.CSS.supports && window.CSS.supports('font-weight', 'var(--tmp-var)'));
    s.parentNode.removeChild(s);
    return support;
}

console.log("Supports css variables:", supportsCssVars());

私がテストしたすべてのブラウザで動作するようです。おそらく、コードは最適化できます。

1
Oliver Pulges