分組CSS規則@keyframes

Question

我完全理解你不能組動畫關鍵幀選擇，如

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

而且，你絕對MUST做

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

我知道有預處理器可以爲我做這一切。但我更感興趣背後的原因爲什麼這樣的話？

我的谷歌福正在失敗我。它似乎總是指向我一個stackoverflow頁面，告訴某人他們'不能'這樣做，他們必須將它們全部分開，或告訴人們有關預處理器 - 或 - 我發送到那個可怕的about.com並閱讀像

• Any Selector Can be Grouped〜about.com

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

Answer 1

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

按規則在this section of CSS2.1 spec中進行了說明，其中規則規則由恰好一個at關鍵字後跟某個語句（以分號終止的語句或塊）組成。就CSS解析器而言，你擁有的是一組三個獨立的規則，每個供應商一個前綴和一個前綴標準的前綴。

at-rules更合適的對應部分是規則集或風格規則，描述爲here。規則集由選擇器和聲明塊（包含樣式聲明）組成。這類似於上述規則的內容。這也意味着選擇器只是規則集的一部分。

特定的規則確實允許在他們的前奏曲逗號分隔值，如@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的關鍵字。

同樣，當您將多個選擇器分組爲單個規則時，您擁有的是一個樣式規則。分組的部分是選擇器;一切都在隨後的聲明塊適用於該組中列出的所有選擇：

.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），它必須忽略選擇器和下述聲明塊（如果有的話），以及。

在http://www.w3.org/TR/CSS21/syndata.html#rule-sets

---

發現所以每個供應商的前綴使得整個規則未解析的所有其他供應商。