قاعدة @property CSS

قاعدة @property CSS

@property القواعد تستخدم لتحديد الخاصية CSS المخصصة مباشرة في جدول الأنماط دون الحاجة إلى تشغيل أي JavaScript.

@property القواعد تحتوي على فحص نوع البيانات والقيود، وتعيين القيم الافتراضية، وتحديد ما إذا كان يمكن تراث القيمة.

تحديد مثال على الخاصية المخصصة:

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

تعني التعريف أعلاه --myColor هي الخاصية اللونية، والتي يمكنها الاستمرار في القيمة الأصلية للعنصر الأب، والقيمة الافتراضية هي lightgray.

للبحث عن استخدام خصائص CSS المخصصة، نستخدم var() الوظيفة:

body {
  background-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;
}

جرب بنفسك

قاعدة @property CSS