Chrome 30 CSS HACK

Question

爲什麼css規則不適用於Chrome？

CSS：

.selector { (;property: value;); } 

或

.selector { [;property: value;]; } 

Answer 1

首先，這不是一個劈。同樣，這不僅適用於Chrome v30。所有其他現代瀏覽器都具有相同的功能。

如在CSS2.1規範中定義here：

...括號（()），括號（[ ]），和括號（{ }）必須總是出現在匹配對和可嵌套。

當您添加(，例如，Chrome將嘗試應用任何樣式之前等待收盤)。但是，沒有CSS屬性像這樣包裝在括號中，因此沒有應用樣式。

拿這個例子：

.selector { 
    (color:#f00;); /* Invalid, ignored. */ 
    font-weight:Bold; /* Valid, not ignored. */ 
} 

這裏color聲明是在括號和font-weight聲明不。 Chrome將完全忽略color財產，因爲這不是一個有效的CSS聲明，但仍處理font-weight正常：

JSFiddle demo。

括號，括號和這樣的大括號僅僅是無效的CSS聲明，並以同樣的方式最終忽略了下面也將達到同樣的：

.selector { 
    color; /* Invalid, ignored. */ 
    font-weight:Bold; /* Valid, not ignored. */ 
} 

另外值得一提的是，Chrome將治療之間的任何括號和括號作爲單個CSS聲明。在你的情況下，(;property: value;);被視爲一個聲明，無論多餘的分號。

同樣值得注意的是，如果在選擇器結束前（}）未能匹配關閉對，則不會處理任何選擇器（example）。

Answer 2

這個特殊的CSS怪異集合實際上是已知的，所謂Safari括號（是的，他們有一個名字）。他們還在Chrome中工作到第28版。它目前在Safari 7.0和更早版本中工作（版本8是當前版本的Safari，因爲我正在編寫此更新）。