css - Chrome で CSS 計算が機能しないことを確認する

Question

ブラウザーが CSS calc をサポートしているかどうかを検出する方法を探したところ、次のようなものが見つかりました: How can I check if CSS calc() is available using JavaScript? No. 5のソリューションを次のように変更しました。

help = $('<img src="/images/buttonup.png">')
help.css({ width: "10px" });
help.css({ width: "calc(10px + 10px)" });
if (help.width() == 20) var calcSupport = true; else var calcSupport = false;

残念ながら、これは Chrome では機能しません。Chrome は明らかに calc をサポートしていますが、help.width() は 0 を返します。Firefox では問題なく動作します。私は何を間違っていますか？

Answer 1

Chrome は、DOM に追加されていない要素の計算されたスタイルを確実に提供することはできません。

したがって、要素を に追加し、bodyその幅を読み取り、削除することができます。

var el = document.createElement('img');
el.style.width = "calc(10px + 10px)";
document.body.appendChild(el);
var calcSupport = getComputedStyle(el).width == '20px';
document.body.removeChild(el);

をサポートしていない非常に古いブラウザgetComputedStyleの場合は、jQuery を使用できます$(el).width() == 20。

Answer 2

これはあなたが探しているものだと思います..

HTML:

<img src="http://davidwalsh.name/demo/css3logo250.jpg" class='img'>

CSS:

.img{
   width: 100px;
   width: -webkit-calc(10px + 10px); 
   width:    -moz-calc(10px + 10px); 
   width:      -o-calc(10px + 10px);
}

Javascript:

var help = $(".img");
if(help.width() == 20){
   var calcSupport = true;
   alert('calc() is supported');
}else{
   var calcSupport = false;
}

JSFiddle

Answer 3

より良い使用CSS.supports：

var calcSupport = CSS.supports("width", "calc(10px + 10px)");