Performance 使用Modernizer避免csstransforms和csstransforms3D的CSS规则

Modernizer将类添加到HTML元素中。如果浏览器支持CSS的3D变换，它通常也支持CSS的2D变换。因此，如果我想基于特征检测应用不同类型的变换，我会：

.csstransforms .off-canvas-left{
  @include translate(-($off_canvas_width + $shadow_blur), 0);
}

.csstransforms3d .off-canvas-left{
  @include translate3D(-($off_canvas_width + $shadow_blur), 0, 0);
}

问题（如果是问题）在于，在支持translate3D的设备上，第一条规则也会执行

---

这是性能问题吗？我怎样才能防止这个问题？

不，这不是问题。就性能而言，几乎不可能区分两者之间的差异。它编译成与以下内容非常相似的内容，一直都在进行，没有问题：

.off-canvas-left {
    transform: /* Fallback value */ ;
    transform: /* Possibly unsupported value */ ;
}

为了完全避免此问题，您必须在应用

.csstransforms3d

时更改Modernizer代码以检查

.csstransforms

类，或者在运行Modernizer后，使用

.csstransforms3d

迭代所有元素并删除

.csstransforms

类。但是，由于它对性能没有任何明显的影响，因此很可能不值得您的努力

对我来说，这种情况最大的缺点就是类名混乱，但这在Modernizer中非常常见，而且只有我们作为开发人员才能看到