自訂變數的 CSS @property 初學者指南

CSS 隨著時間的推移而不斷發展，新的功能不斷添加到其中，使實現最常用的功能變得更加容易。今天我們就來見識這樣的功能，它讓 css 變得更強大。

@property（at-rule）允許開發人員定義自訂屬性。在這篇文章中，我們將透過一些實際範例來了解 @property 是什麼、為什麼它有用以及如何使用它。

什麼是 @property At 規則？

CSS 自訂屬性（變數）已經存在了一段時間，它們允許您儲存和重複使用顏色、字體大小或任何其他樣式值等值。然而，直到最近，它們還缺乏定義類型、預設值等高級功能。如果我們想要實現複雜的動畫（更多內容將在即將發布的帖子中介紹），這尤其有用。

@property規則代表直接在樣式表中註冊自訂屬性，而無需執行任何js。

基本文法

@property --my-custom-property {
  syntax: "<color>";
  inherits: false;
  initial-value: red;
}
</color>

• 語法：定義屬性的預期資料類型。在本例中，它是一種顏色 ()，但它可以是任何有效的 CSS 資料類型，例如 、 或 。
• 繼承：確定屬性值是否應由子元素繼承。它可以設定為 true 或 false。
• 初始值：未提供屬性時設定預設值。

何時使用@property

• 當您需要對自訂屬性進行動畫處理或轉換以確保行為流暢時。
• 強制執行資料型態（如顏色、長度或數字）以避免無效值所導致的錯誤。
• 為自訂屬性設定預設值，以便在值遺失時保持一致的樣式。
• 控制父子元素之間自訂屬性的繼承。

閱讀更多

• MDN 文件@property

原帖

以上是自訂變數的 CSS @property 初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！