26

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

if (!browserCanUseCssVariables()) {
  // Do stuff...
}
4

4 に答える 4

54

でこれを行うことができますCSS.supports。@supportsこれは、現在 Firefox、Chrome、Opera、および Android ブラウザで利用できるCSS のルールの JavaScript 実装です( Can I Use... を参照)。

静的メソッドはCSS.supports()、ブラウザーが特定の CSS 機能をサポートしているかどうかを示すブール値を返します。
– Mozilla 開発者ネットワーク

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

CSS.supports('color', 'var(--fake-var)');

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

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

純粋な JavaScript の例

CSS.supportsFirefox では、上記の呼び出しが を返すため、このコード スニペットは緑色の背景を生成します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、同様に処理します。( global の導入CSS.supportsと同時に導入されたCSSため、こちらも確認する必要はありません。)

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

ファイアフォックス

クローム v38

クロム

インターネット エクスプローラー 11

IE11

于 2014-10-29T15:04:57.600 に答える
8

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/

于 2014-10-29T15:03:10.680 に答える