將@property用於CSS自定義屬性

Chrome 現已支持使用@property聲明CSS 自定義屬性，並提供比字符串更詳盡的信息。這篇文章深入探討了這一功能。

以往，CSS 自定義屬性的聲明方式如下：

 html {
  --stop: 50%;
}

現在，我們可以使用@property提供更多細節：

 @property --stop {
  syntax: "<percentage> ";
  initial-value: 50%;
  inherits: false;
}</percentage>

瀏覽器現在知道這個自定義屬性是一個百分比，而不是一個字符串。 其他有用的類型包括<integer></integer>和<color></color>。 通過這種方式向瀏覽器傳達信息，我們獲得了新的能力，例如在兩個值之間進行過渡。

然而，在實際應用中，需要注意的是，必須明確指定需要過渡的屬性（簡單的transition無法實現）。以下演示重現了Una Kravetz 文章中的示例：

請注意，我正在動畫化顏色停止點的位置（百分比），但我也嘗試動畫化顏色本身，但這仍然不起作用。我原本以為這個新特性可以實現這一點。長期以來，人們對無法動畫化漸變感到困惑。 （參見Ana Tudor 的文章。）

對於不支持自定義屬性的瀏覽器，我們可以在更高級別重新聲明屬性以提供支持。 這聽起來有點滑稽。 Safari 表明對這種基於Houdini 的技術很感興趣，但尚未支持。 Firefox？情況不明朗，在裁員之前，他們將其標記為“值得原型設計”。

@property也能解決CSS 自定義屬性的奇怪回退問題：

與任何其他自定義屬性一樣，您可以獲取（使用var ）或設置（寫入/重寫）值，但是對於Houdini 自定義屬性，如果您在覆蓋時設置一個假值，CSS 渲染引擎將發送初始值（其回退值），而不是忽略該行。

以上是將@property用於CSS自定義屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！