Question

使用Modernizr测试功能时，如下所示：

if (Modernizr.csstransforms) {
    $("#someDiv").addClass('rotate');
}

对于仅支持此规则的带前缀应用程序的早期浏览器，Modernizr测试是否返回true，例如-mz-transform，还是仅测试标准transform？我阅读了文档，但找不到任何对该检查的引用。

目标是仅在浏览器支持转换时应用转换。举个例子。

假设.rotate类应用CSS 2D变换：

.rotate {transform:rotate(30deg)}

该类是否需要包含额外的前缀变换，还是Modernizr不考虑它们？如果Modernizr没有找到它们，那么显然没有必要添加所有这些前缀版本。

.rotate {-moz-transform:rotate(30deg); 
         -ms-transform:rotate(30deg); 
         -o-transform:rotate(30deg); 
         -webkit-transform:rotate(30deg); 
         transform:rotate(30deg)}

Answer 1

Modernizr测试所有前缀和前缀版本。然而，你仍然需要应用所有这些css规则，因为modernizr只是告诉你它支持它，而不是有效的特定规则。

此外，Modernizr可以向html元素添加类，因此您无需执行

if (Modernizr.csstransforms) {
    $("#someDiv").addClass('rotate');
}

因为而不是

.rotate .foo {
  transform:rotate(30deg)
}

你可以做到

. csstransforms .foo {
  transform:rotate(30deg)
}

Modernizr测试包括浏览器前缀功能吗？

1 个答案: