不支持測試的模擬CSS屬性？

Question

我需要測試我的網站，就好像不支持不同的CSS屬性。有沒有辦法可以禁用某些屬性的支持，如3D轉換？

Answer 1

最簡單，最快和最可靠的解決方案是使用舊版本的瀏覽器 - 因爲這是最可能的現實世界場景，其中不支持各種CSS屬性。

例如：你可以找到Chrome瀏覽器（Windows）中的舊版本在這裏：（包括預測試版1.0）http://www.oldversion.com/windows/google-chrome/

Answer 2

總之，可能不是。但是你可以通過使用一個結構化的CSS（可能是LESS/SASS）文件來模擬這個，所以你可以簡單地禁用規則塊來查看它的外觀。

如果你的目標是簡單地看看它如何在舊版瀏覽器中作出反應，那麼這不是最好的模擬 - 它是相當學術的。相反，您可能想要使用將爲您測試網頁並向您發送輸出的許多系統之一。

Answer 3

這是一種解決方法，但您可以使用通用選擇器將所有元素重置爲屬性的默認值，使用!important。只要你沒有在你的代碼中使用!important，這應該是一個相當準確的模擬。

例（禁用transform）：

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

你甚至可以從你的瀏覽器開發者工具注入的代碼。

不幸的是，這不適用於支持屬性的子集。

Answer 4

我的建議是在真正的瀏覽器測試CSS屬性。我知道這可能是幾乎不可能得到在計算機上安裝所有需要的瀏覽器測試版本，所以有一個很好的網絡服務，提供了一個測試環境：

• https://www.browserstack.com/

此外，您可以檢查CSS可用性：

• http://caniuse.com/