是否有簡短的方式列出供應商前綴CSS3關鍵幀？

目前，我必須列出所有變化：是否有簡短的方式列出供應商前綴CSS3關鍵幀？

@-webkit-keyframes show { 
    from { background-color: rgba(0, 0, 0, 0); } 
    to { background-color: rgba(0, 0, 0, 0.8); } 
} 

@-moz-keyframes show { 
    from { background-color: rgba(0, 0, 0, 0); } 
    to { background-color: rgba(0, 0, 0, 0.8); } 
} 

[…]

你的想法。有什麼辦法可以寫這個更短嗎？像這樣的事情是不打破它：

@-webkit-keyframes show, @-moz-keyframes show {}

來源

2013-03-12 insertusernamehere

至少對於選擇器來說，規則是如果給定規則的任何選擇器無效，那麼整個規則必須被刪除 - [reference]（http://www.w3.org/TR/selectors /＃分組）。我猜想同樣的規則適用於這裏。由於webkit瀏覽器不會看到'@ -moz ...'有效，它會丟棄整個事物，反之亦然。 – 2013-03-12 14:36:19

不原生地在CSS，但你可以通過使用CSS預處理，例如LESS支持「混入」的概念，以消除一些重複做到這一點。

更多信息，可以發現here，具體的例子從文章：

@-webkit-keyframes some-animation {.mixi-frames;} 
@-moz-keyframes some-animation {.mixi-frames;} 

.mixi-frames() { 
    from {width: 254px;} 
    to {width: 512px;} 
}

來源

2013-03-12 14:37:08 andyb

是的，我已經認爲* LESS *是實現這一目標的唯一方法。 – insertusernamehere 2013-03-12 14:38:03

本來有用的提到！ – andyb 2013-03-12 14:43:16

沒錯。抱歉。我正在尋找一個本地解決方案，並且您的第一句話就回答了。那謝謝啦。 :) – insertusernamehere 2013-03-12 14:56:32

根據您的需求，圖書館等https://github.com/jQueryKeyframes/jQuery.Keyframes也可以通過管理關鍵幀語法您完成自動前綴。

來源

2014-03-17 09:38:13

正如接受的答案中所述，CSS預處理器中的mixin是前段時間解決此問題的最先進技術。

但幸運的是時間的變化和工具變得越來越好。像Bootstrap等框架切換到像autoprefixer這樣的工具，它可以自動將供應商前綴添加到您的css中。通過這種方式，您不必再考慮關於供應商前綴的一秒鐘，並且仍然保持最新狀態。

Autoprefixer使用來自caniuse.com的數據來保持自己的最新狀態，您只需指定您想要支持哪些瀏覽器並且不需要關心。如果你還沒有切換到Grunt任務自動化，現在是時候嘗試一下了，因爲還有一個grunt-autoprefixer任務。

來源

2014-08-04 21:36:08 wedi

+1不錯的解決方案。 – insertusernamehere 2014-08-05 10:34:33

是否有簡短的方式列出供應商前綴CSS3關鍵幀？

回答

相關問題