قانون @property CSS

قانون @property CSS

@property قوانین برای تعریف مستقیم ویژگی‌های CSS سفارشی در جدول استایل بدون نیاز به اجرای هیچگونه کد جاوااسکریپت استفاده می‌شوند.

@property قوانین دارای بررسی نوع داده‌ها و محدودیت‌ها، تنظیم ارزش پیش‌فرض و تعریف اینکه آیا ارزش‌ها می‌توانند به ارث برده شوند یا خیر هستند.

تعریف نمونه ویژگی‌های سفارشی:

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

تعریف بالا نشان‌دهنده --myColor یک ویژگی رنگ است که می‌تواند ارزش پدر عنصر را به ارث ببرد و ارزش پیش‌فرض آن lightgray است.

برای استفاده از ویژگی‌های سفارشی در CSS، ما از var() توابع:

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

استفاده @property فوائد:

• نوع بررسی：须指定自定义属性的数据类型，如 、、。可防止错误并确保正确使用自定义属性
• 设置默认值：可以为自定义属性设置默认值。这确保了如果以后分配了无效值，浏览器将使用定义的备用值。
• 设置继承行为：必须指定自定义属性是否可以继承其父元素的值。

浏览器支持

表格中的数字表示完全支持该规则的第一个浏览器版本。

简单的 @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 实例

在下例中，我们在

@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