CSS ھارا

CSS ھارا

@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 ھارا