JS特徵檢測檢測-webkit-calc calc的用法

Question

所以我很清楚，一般來說，應該使用JS中的特徵檢測與瀏覽器檢測。一個很好的例子是jQuery 1.9的下降$.browser。

此外，在我閱讀的每篇文章中，它都表示從不使用瀏覽器檢測。

但是我有，我需要動態計算的JS佈局"slots"可用的#的條件，而且它正在通過calc(100%/{0})，其中{0}是可用插槽的#完成。

當然，在iPad中，.css("height", "calc(100%/3)")將會失敗，因爲它必須以-webkit-爲前綴。

那麼，有誰能告訴我，我應該如何使用功能檢測（而不是舊的$.browser.webkit）來檢測它是否需要此功能？

Answer 1

創建一個虛擬元素，將其插入到文檔中，使用.cssText.height = 'calc(100px - 50px);'，並檢查元素是否具有預期的高度。對每個供應商前綴重複此操作。

備註：對於這類問題，您應該查看Modernizr的源代碼。其他人通常貢獻了這樣的功能檢測腳本，如calc.js。

---

Modernizr檢測功能是否存在，它不知道哪個前綴必須使用。下面的代碼演示瞭如何獲取正確的前綴：

var calc = (function(){ 
    var dummy = document.createElement('div'); 
    var props = ['calc', '-webkit-calc', '-moz-calc', '-o-calc']; 
    for (var i=0; i<props.length; ++i) { 
     var prop = props[i]; 
     dummy.style.cssText = 'width:' + prop + '(1px);'; 
     if (dummy.style.length) 
      return prop; 
    } 
})(); 

// Usage example: 
$('selector').css('height', calc + '(100%/3)'); 

（我沒加的-ms-前綴，因爲IE瀏覽器開始支持它，而沒有前綴 - 看http://caniuse.com/calc）。