CSSのカスタムプロパティを検出する方法を教えてください。

Question

ブラウザがCSS custom properties（例：color: var(--primary)）をサポートしているかどうかを検出する方法はありますか？

カスタムプロパティをサポートしていないブラウザでは少し違った動作をするスクリプトを書く必要がありますが、ドキュメント化されたModernizrテストやカスタムプロパティにアクセスするためのJavascriptインターフェイスに関する情報は見つかりません。

ご意見ありがとうございます。

Answer 1

カスタムプロパティのサポートを検出します。 custom propertiesをサポートするすべてのブラウザのすべてのバージョンもthis method of feature detectionをサポートしています。

if (window.CSS && CSS.supports('color', 'var(--primary)')) { 
 
    document.body.innerHTML = 'Supported'; 
 
}

@supports (color: var(--primary)) { 
 
    body { 
 
    background-color: green; 
 
    } 
 
}

これは、プロパティ宣言を解析する目的のために定義every property whose name begins with -- is considered validなどによって、--primaryカスタムプロパティを宣言するためにあなたを必要としないことに注意してください。

Answer 2

これは、代替品がないときにこのようなことにアプローチする方法の例として残しておきますが、BoltClock's answerはこの場合の方法です。

---

1つを定義し、その値がgetComputedStyleに到達するかどうかを確認することができます。例えば、これはSupports custom props? true（カスタムCSSプロパティをサポートしています）クロームではなく（ない）IE11のSupports custom props? falseを示しています

あなたは確実にCSSでJavaScriptで CSS.supports()または @supportsを使用することができます

function areCSSVarsSupported() { 
 
    var d = document.createElement('div'); 
 
    d.id = "test"; 
 
    document.body.appendChild(d); 
 
    var pos = getComputedStyle(d).position; 
 
    document.body.removeChild(d); 
 
    return pos === "fixed"; 
 
} 
 
console.log("Supports custom props? " + areCSSVarsSupported());

:root{ 
 
    --test-vars: fixed; 
 
} 
 

 
#test { 
 
    position: var(--test-vars); 
 
}