如何检测CSS translate3d没有webkit上下文？

问题描述

要检测浏览器是否支持 translate3d ，我们可以使用（ WebKitCSSMatrix 在窗口&& m11 在新的WebKitCSSMatrix（））

To detect if a browser support translate3d we can use (WebKitCSSMatrix in window && m11 in new WebKitCSSMatrix())

但现在firefox支持 translate3d 如何正确检测它？

but now that firefox support translate3d how to have a correct detection of it?

这个想法是找到一个不使用Modernizr的解决方案。

The idea would be to find a solution without using Modernizr.

推荐答案

我需要类似的东西。我想测试一个浏览器是否支持translate3d而不使用库。我没有找到任何好的通用测试，不是webkit具体。所以经过多次实验，我想出了以下测试。我首先创建一个测试元素，为其分配一个转换函数，然后查看该元素是否保留了转换函数。

I needed something similar. I wanted to test if a browser supported translate3d without using a library. I didn't find any good generic test that wasn't webkit specific. So after much experimentation, I came up with the following test. I first create a test element, assign a transform function to it, then see if the element retained the transform function.

function Has3DSupport()
{
    var sTranslate3D = "translate3d(0px, 0px, 0px)";

    var eTemp = document.createElement("div");

    eTemp.style.cssText = "  -moz-transform:"    + sTranslate3D +
                          "; -ms-transform:"     + sTranslate3D +
                          "; -o-transform:"      + sTranslate3D +
                          "; -webkit-transform:" + sTranslate3D +
                          "; transform:"         + sTranslate3D;
    var rxTranslate = /translate3d\(0px, 0px, 0px\)/g;
    var asSupport = eTemp.style.cssText.match(rxTranslate);
    var bHasSupport = (asSupport !== null && asSupport.length == 1);

    return bHasSupport;
} // Has3DSupport

这个函数对我的需求是快速的：在桌面浏览器中为50微秒，在移动浏览器中为500微秒。

The function is plenty fast for my needs: < 50 microseconds in desktop browsers, < 500 microseconds in mobile browsers.

希望这有助于。

这篇关于如何检测CSS translate3d没有webkit上下文？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！