如何將webkit支持添加到calc？

Question

我可以看到，使用webkit時，calc更加兼容。通常當你添加對webkit或moz的支持時，你可以這樣做：

-webkit-font-smoothing: antialiased; 
-webkit-text-size-adjust: 100%; 

什麼是calc的正確語法？

width: -webkit-calc(100% - 100px); 

Answer 1

用於計算正確的語法是

/* Firefox */ 
width: -moz-calc(100% - 100px); 
/* WebKit */ 
width: -webkit-calc(100% - 100px); 
/* Opera */ 
width: -o-calc(100% - 100px); 
/* Standard */ 
width: calc(100% - 100px) 

Answer 2

至少你需要支持Safari瀏覽器6時，Chrome 25或FF 15，你只需要編寫width: calc(100% - 100px)

// Firefox 4 to 15 
width: -moz-calc(100% - 100px); 

// Chrome 19 to 25 
// Safari 6 
width: -webkit-calc(100% - 100px); 

// Standard 
width: calc(100% - 100px) 

// Note: Never existed a Opera prefix for calc 

注意從未存在Opera前綴-o-calc，因爲在Opera中引入了calc，它始終只使用calc。您可以檢查caniuse中的計算支持。

我建議你，當你對供應商前綴有疑問時，你應該檢查它是否需要。例如從未存在的Opera的-o-calc(100% - 100px)。或者，您可能不需要供應商前綴，因爲您不再支持舊版本的特定瀏覽器。例如，你可能不需要支持FF 15，如果是這種情況，你不應該使用width: -moz-calc(100% - 100px)。