@財產

@property At-Rule是Chrome（可能是Safari和Firefox）的新增加，允許聲明具有增強控制和功能的CSS自定義屬性。目前，CSS缺乏直接在梯度內過渡某些屬性的能力， @property的旨在解決。

草案規範和“發貨意圖”文檔概述了其功能。 @property規則在選擇器塊外聲明（類似於@media查詢），在使用之前註冊自定義屬性的特徵。此註冊指定屬性的syntax （例如，<color></color> ）， initial-value和inherits標誌。

JavaScript等效的CSS.registerProperty()在Houdini倡議下實現了相同的註冊。關鍵優勢是使以前無法直接動畫的屬性過渡。例如，順利過渡線性梯度的起始顏色，以前需要偽元素（例如偽元素）的解決方法變得很簡單：

 @property  -  Gradient-start {
  文法:"<color> ”
  初始價值：白色；
  繼承：false;
}

.el {
   - 級別啟動：白色；
  背景：線性級別（var（ - 梯度啟動），黑色）;
  過渡： - 級別啟動1；
}

.EL：懸停{
   - 級別啟動：紅色；
}</color>

這是因為@property定義--gradient-start為<color></color>，允許CSS正確處理其動畫。這與attr()函數的當前限制形成對比，該函數返回字符串值，而不是直接可用的CSS類型<length></length>。儘管確切的發布日期仍然未知，但Chrome的計劃實施和其他瀏覽器的積極信號表明可能會廣泛採用。

以上是@財產的詳細內容。更多資訊請關注PHP中文網其他相關文章！