Firefox的支持WebKit的供應商的前綴

Question

我有了這個SCSS代碼：

.gradient-text { 
    color: mix(#cea427, #fbe758); // Fallback to average of 2 colors 
    background: -webkit-linear-gradient(0deg, #cea427, #fbe758); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
} 

Fiddle

起初我只是想在基於WebKit的瀏覽器此代碼的工作，然後添加了不同的方法firefox，但我發現至少最新的每晚firefox也會運行這個代碼，即使它是供應商爲webkit添加的前綴。

我不會擔心，如果只有一個屬性，可以支持Firefox或不。但有2個屬性讓我對只有其中一個工作的情況感到緊張。例如，支持-webkit-linear-gradient和不受支持-webkit-background-clip將與我的預期大不相同。那麼，有沒有什麼方法可以檢查瀏覽器對多個CSS規則的支持，並且如果至少其中一個缺失，gracefylly切換到回退？

還有，是否有任何外國廠商前綴支持列表（如FF中的-webkit-前綴支持）？

Answer 1

在這種情況下，我總是發現檢查MDN非常有幫助。在這種情況下，您可以檢查文章linear-gradient,background-clip和-webkit-text-fill-color。在底部附近，總有一部分標題爲瀏覽器兼容性。它在表格中列出了支持CSS規則和腳註的瀏覽器。例如，關於-webkit-text-fill-color，它說，

[1]此功能偏好layout.css.prefixes.webkit後面實現，默認爲false。由於Gecko 49（Firefox 49.0/Thunderbird 49.0/SeaMonkey 2.46），首選項默認爲true。

這應該回答你爲什麼支持-webkit-前綴版本的問題，以及從何時開始。另請注意，在頂部，文章提到

此功能是非標準的，不在標準軌道上。不要在面向Web的生產站點上使用它：它不適用於每個用戶。實現之間也可能存在很大的不兼容性，並且行爲在未來可能會發生變化。

所以：你會被警告。

在這種特殊情況下，至少在Firefox和Chrome中，您可能會擺脫您想要做的事情。其他瀏覽器...這更棘手。

---

您的其他問題是，如果您可以在不支持規則時正常切換回退。不幸的是，這在純CSS中是不可能的。雖然可以寫rules that specifically target Chrome或Firefox，但我建議不要使用這些。你也許可以使用JavaScript檢查支持，但這是我全心全意勸告的。

---

最後，「有沒有國外供應商前綴支持任何列表（FF像-webkit-前綴支持）？」 Sort of。再次，MDN通常非常完整並且是最新的。希望有所幫助。