對CSS @keyframes規則進行分組

Question

我完全明白你不能將動畫關鍵幀選擇器組合起來

@keyframes,
@-moz-keyframes,
@-webkit-keyframes { /*do something*/ }

並且你絕對必須這樣做

@keyframes { /*do something*/ }
@-moz-keyframes { /*do something*/ }
@-webkit-keyframes { /*do something*/ }

我知道有預處理器可以為我做這一切。 但我更感興趣的是為什么會出現這種情況的原因？

我的google-fu讓我失望了。 它似乎總是指向一個stackoverflow頁面，告訴別人他們“不能”做到這一點，他們必須將它們全部分開，或者告訴人們關於預處理器 - 或者 - 我被發送到那個可怕的about.com並閱讀像

在這種情況下，這顯然不正確。 如果有人可以指導我閱讀一篇文章，或者向我解釋為什么它不能分組，那將是最有幫助的。

Answer 1

請記住，規則和選擇器是完全不同的東西。

CSS2.1規范的這一部分涵蓋了規則，該規則指出一個at-rule只包含一個at-keyword，后跟一些語句（無論是以分號結尾的語句，還是一個塊）。 就CSS解析器而言，你所擁有的是一組三個獨立的at-rules，每個供應商有一個前綴，標准有一個無前綴的規則。

更合適的對手在規則是規則集，或樣式規則，描述在這里。 規則集由選擇器和聲明塊（包含樣式聲明）組成。 這類似於如上所述的規則的內容。 它還意味着選擇器只是規則集的一部分 。

某些規則允許在其前奏中使用逗號分隔值，例如@media ：

@media screen, projection {
    /* Styles for both screen and projection media */
}

但是，不是將整個規則分組，而是在規則開頭的at-keyword之后的值內進行分組。

這個@media規則可以擴展為兩個單獨的規則，如下所示：

@media screen {
    /* Styles for screen media */
}

@media projection {
    /* Styles for projection media */
}

請注意，每個規則都有自己的@media at-keyword。

同樣，當您將多個選擇器組合到一個規則中時，您擁有的是一種樣式規則 。 分組的部分是選擇器; 以下聲明塊中的所有內容都適用於組中列出的所有選擇器：

.foo, .bar {
    /* Styles that apply to both .foo and .bar elements */
}

當你擴展它時，它變成兩個規則集：

.foo {
    /* Styles that apply to .foo elements */
}

.bar {
    /* Styles that apply to .bar elements */
}

Answer 2

因為

當用戶代理無法解析選擇器（即，它不是有效的CSS 2.1）時，它必須忽略選擇器和以下聲明塊（如果有的話）。

因此，每個供應商前綴使整個規則對所有其他供應商都不可解析。