JavaScriptを使用してCSS calc（）を使用できるかどうかを確認するにはどうすればよいですか？

Question

JavaScriptを使用してthe CSS function calcをチェックする方法はありますか？

jQueryを使用してcalcと同じ動作をすることに関する多くの質問と記事が見つかりましたが、使用できるかどうかはどうすれば確認できますか？

Answer 1

を現在、非コアにあるcss-calcというテストが検出されます。彼らは、次のコードを使用します。

Modernizr.addTest('csscalc', function() { 
    var prop = 'width:'; 
    var value = 'calc(10px);'; 
    var el = document.createElement('div'); 

    el.style.cssText = prop + Modernizr._prefixes.join(value + prop); 

    return !!el.style.length; 
}); 

Answer 2

石灰化検出は、それらのニュースページに従って近代化装置に加えられた。 http://modernizr.com/news/

としてだけでなく、既存のテストのためのサポートを引き締め、私たちは、新しい検出の 数、コミュニティから提出された多くのも追加しました：あなたは見つけることができますModernizrで

[...] 
css-calc 

Answer 3

少し遅れて相手にするが、私は自分自身がそれで苦しんでいたので、私は私がこれを共有する必要があります考え出しました。 jQueryを使用することで、CSSプロパティ（この場合はwidth）でcalc（）値を使用するdivと、ブラウザがcalc（）をサポートしない場合の代替幅を作成できます。今それがサポートされているかどうかを確認するために、これは私がしたものです：

現在存在しないdiv要素のCSSスタイルを作成しましょう。

今

/* CSS3 calc() fallback */ 
#css3-calc { 
    width: 10px; 
    width: calc(10px + 10px); 
    display: none; 
} 

、ブラウザが（計算値をサポートしていない場合）、要素はそれをサポートしている場合、それは20に戻ってくる10の幅の値を返すの値が正確であるかは問題ではありませんしかし、2つの幅のプロパティが最後に異なる値を持つ限り（この場合は10と20）、

実際のスクリプトはここをクリックしてください。それは非常に簡単だと私はそれがあまりにも通常のJavaScriptで可能だと仮定しますが、ここではjQueryのスクリプトは次のとおりです。

また

// CSS3 calc() fallback (for unsupported browsers) 
$('body').append('<div id="css3-calc"></div>'); 
if($('#css3-calc').width() == 10) { 
    // Put fallback code here! 
} 
$('#css3-calc').remove(); // Remove the test element 

---

、ネイティブJavaScriptのチェック、および幅：

#css3-calc { width: 1px; width: calc(1px + 1px); }

if(document.getElementById('css3-calc').clientWidth==1){ 
    // clientHeight if you need height 
    /* ... */ 
} 

Answer 4

var cssCheck = document.createElement("DIV"); 
cssCheck.style.marginLeft = "calc(1px)"; 
if (cssCheck.style.getPropertyValue("margin-left")) 
{ 
    alert("calc is supported"); 
} 
cssCheck = null;