Mock CSS 属性不支持测试？

Question

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

Answer 1

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

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

Answer 2

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

示例（禁用 `transform`）：

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

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

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

Answer 3

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

例如：您可以在此处找到 Chrome (Windows) 的旧版本：（包括 pre-1.0 beta）http://www.oldversion.com/windows/google-chrome/

Answer 4

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

https://www.browserstack.com/

此外，您还可以查看 CSS 可用性：

http://caniuse.com/

Mock CSS 属性不支持测试？

Mock CSS property not supported for testing?

css

browser

cross-browser

示例（禁用 `transform`）：

Mock CSS 属性 不支持测试？

Mock CSS property not supported for testing?

css

browser

cross-browser

示例（禁用 transform）：

Mock CSS 属性不支持测试？

示例（禁用 `transform`）：