transform-style:preserve-3d能力檢測？

我現在做了一個色子效果，最關鍵的部分是需要瀏覽器支持 `transform-style:preserve-3d` 如果支持可以在3d空間內做rotate，將結果的那一面rotate到面向用戶的方式呈現，否則就只能採用將結果那一面的z-index設為最高的方式來呈現結果。

我當然希望能支持`transform-style:preserve-3d`的瀏覽器都以前者方式呈現，但是如何準確檢測是否支持就成了一個問題。

按照先前的檢測機制：

var div = document.createElement("DIV")
styleName = getRightJsStyleName("transformStyle",prefixWord) // getRightJsStyleName方法是根據當前瀏覽器前綴（如 `webkit` ）返回對應的 `js style key`，如 `webkitTransformStyle`
div.style[styleName] = "preserve-3d"
return !!div.style[styleName].length


對於Andorid 3 以下和UC ，返回的是true，但實際上經過測試他們不支持。於是暫時只能通過非常搓的判斷瀏覽器userAgent的形式將它們列入後者z-index效果的瀏覽器中

希望各位大神能提供一個準確檢測是否支持的方法

檢測代碼見：dice/dice.js at master · jieyou/dice · GitHub

整個項目源碼見：jieyou/dice · GitHub

色子在線demo見：jieyou 3d dice demo

---

1.如果要兼容一些舊的瀏覽器，可以使用 Modernizr。

2.現代瀏覽器可以直接使用「css.supports()」API。

「css.supports()」 DOM API 是 CSS 中「@supports」的另一種形式，供 JavaScript 調用並檢測 CSS 屬性的支持情況。

var supports3d = CSS.supports("(transform-style: preserve-3d) or (-moz-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d)");

if (supports3d) {
alert("我支持啦，感覺自己萌萌噠(?ω?)");
} else {
alert("倫家還不支持捏(▔□▔)");
}


Demo: CSS.supports() 測試

3.實際上，Modernizr 3.0 中已經使用了原生的「css.supports()」API。 https://github.com/Modernizr/Modernizr/issues/818

testProp(), testAllProps() and prefixed() now use CSS.supports() under the hood for most CSS feature detects where available, improving performance and accuracy (#818)

兼容性：

• Chrome 28 開始支持 CSS.supports()，詳見這裡。

• Firefox 在去年8月份支持了@supports，在12月份支持了CSS.supports()。

• Safari 目前還不支持，iOS8 待測試。

• Android 4.4+ 支持。

需要注意的是，Opera 12.1 之前版本實現的是非最新標準的API，為了兼容，代碼看起來要一坨了：

var supportsCSS = !!((window.CSS window.CSS.supports) || window.supportsCSS || false);


---

今天工友也遇到這個問題，這確實是一個巨坑啊，用常規方式獲取的話，有些瀏覽器會很自信的認為自己支持（哪來的自信）。所以這個問題可以曲線的來解決。代碼如下：

const highEnd = (function() {
try {
const canvas = document.createElement("canvas");
return !!(window.WebGLRenderingContext (canvas.getContext("webgl") || canvas.getContext("experimental-webgl")));
} catch (e) {
return false;
}
})();


通過判斷瀏覽器是否能獲取webgl繪圖上下文的方式來判斷瀏覽器是否支持css3的3d透視效果。webgl和css3d在實現上的硬體依賴是有點類似的，都需要GPU的支持（css3d的透視效果必須得到gpu的支持，在現如今的合成化渲染機制下。css3d的實現就是cpu把元素光柵化成bitmap，然後利用gpu＋元素的matrix3d等描述進行合成操作）。所以瀏覽器如果支持webgl就一定支持css3d。

---

推薦閱讀：