规则 @property CSS

规则 @property CSS

@property Peraturan digunakan untuk mendefinisikan properti CSS kustom secara langsung di dalam tabel gaya, tanpa perlu menjalankan JavaScript apapun.

@property Peraturan memiliki pemeriksaan tipe data, batasan, menetapkan nilai default, dan mendefinisikan apakah properti dapat mewarisi nilai.

Definisi instansi properti kustom:

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

Definisi di atas menunjukkan --myColor Adalah properti warna, yang dapat mewarisi nilai elemen induk, nilai defaultnya adalah lightgray.

Untuk menggunakan properti kustom di CSS, kami menggunakan var() Fungsi:

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

使用 @property Manfaatnya:

• Periksa Jenis：须指定自定义属性的数据类型，如 <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;
}

亲自试一试

规则 @property CSS