【问题标题】：Mock CSS property not supported for testing?不支持模拟 CSS 属性进行测试？
【发布时间】：2015-06-05 23:10:34
【问题描述】：

我需要测试我的网站，就好像不支持不同的 CSS 属性一样。有没有办法可以禁用对某些属性的支持，例如 3D 变换？

【问题讨论】：

【解决方案1】：

这是一种 hacky 解决方案，但您可以使用通用选择器将所有元素重置为属性的默认值，!important。只要您没有在代码中使用!important，这应该是一个非常准确的模拟。

示例（禁用`transform`）：

* {
    -webkit-transform: none !important;
       -moz-transform: none !important;
        -ms-transform: none !important;
         -o-transform: none !important;
            transform: none !important;
}

您甚至可以从浏览器开发工具中注入此代码。

很遗憾，这不适用于部分受支持的属性。

【讨论】：

【解决方案2】：

简而言之，可能不会。但是您可以通过使用结构化 CSS（可能是 LESS/SASS）文件来模拟这一点，因此您可以简单地禁用规则块来查看它的外观。

如果您的目标是简单地查看它在旧浏览器中的反应，那么这不是最好的模拟 - 它相当学术。相反，您可能希望使用众多系统之一，该系统将为您测试网页并将输出发送给您。

【讨论】：

【解决方案3】：

最简单、最快和最可靠的解决方案是使用旧版本的浏览器——因为这是最有可能不支持各种 CSS 属性的现实场景。

例如：您可以在这里找到旧版本的 Chrome (Windows)：（包括 1.0 之前的测试版）http://www.oldversion.com/windows/google-chrome/

【讨论】：

【解决方案4】：

我的建议是在真实浏览器中测试 CSS 属性。我知道几乎不可能在您的计算机上安装所有需要的浏览器测试版本，因此有一个很好的 Web 服务可以提供测试环境：

https://www.browserstack.com/

此外，您还可以在以下位置检查 CSS 可用性：

http://caniuse.com/

【讨论】：

示例（禁用transform）：

示例（禁用`transform`）：