CSS @property 規則

CSS @property 規則

@property 規則用于直接在樣式表中定義自定義 CSS 屬性，而無需運行任何 JavaScript。

@property 規則具有數據類型檢查和約束、設置默認值，并定義屬性是否可以繼承值。

定義自定義屬性的實例：

@property --myColor {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

上面的定義表示 --myColor 是一個顏色屬性，它可以繼承父元素的值，其默認值為 lightgray。

要在 CSS 中使用自定義屬性，我們使用 var() 函數：

body {
  backgound-color: var(--myColor);
}

使用 @property 的好處：

• 類型檢查：須指定自定義屬性的數據類型，如 <number>、<color>、<length>。可防止錯誤并確保正確使用自定義屬性
• 設置默認值：可以為自定義屬性設置默認值。這確保了如果以后分配了無效值，瀏覽器將使用定義的備用值。
• 設置繼承行為：必須指定自定義屬性是否可以繼承其父元素的值。

瀏覽器支持

表格中的數字表示完全支持該規則的第一個瀏覽器版本。

簡單的 @property 實例

下例定義了兩個自定義屬性：--my-bg-color 和 --my-txt-color。然后，div 在 background-color 和 color 中使用自定義屬性：

實例

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}
@property --my-txt-color {
  syntax: "<color>";
  inherits: true;
  initial-value: darkblue;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
  color: var(--my-txt-color);
}

親自試一試

另一個 @property 實例

在下例中，我們在 <div> 元素上使用默認的自定義屬性。然后我們在 .fresh 和 .nature 類中覆蓋自定義屬性（通過設置其他顏色），效果非常好：

實例

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: rgb(120, 180, 30);
}

親自試一試

通過類型檢查和備用值避免錯誤

在下例中，我們將 .nature 類中的自定義屬性設置為整數。這是無效的，瀏覽器將使用在 initial-value 屬性中定義的備用顏色（lightgray）：

實例

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: 2;
}

親自試一試

使用 inherits 值

在下例中，我們將 inherits 值設置為 false。這意味著自定義屬性不會從其父元素繼承值。查看結果：

實例

@property --my-bg-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

親自試一試

下一個例子將 inherits 值設置為 true。這意味著自定義屬性會從其父元素繼承值。查看結果：

實例

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

親自試一試

使用 @property 創建平滑動畫

使用 @property 規則可以實現的全新機會是動畫化以前無法動畫化的內容：漸變。查看以下實例：

實例

為漸變指定兩個自定義屬性：

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

親自試一試

CSS @property 規則