قاعدة @property CSS

التعريف والاستخدام

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

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

استخدام @property المزايا:

  • تحقق من النوع والقيود: يجب تحديد نوع البيانات الخاصية المخصصة، مثل <number>،<color>،<length>، إلخ. هذا يمكن منع الأخطاء وضمان استخدام الخاصية المخصصة بشكل صحيح.
  • تعيين القيمة الافتراضية: يمكن تعيين قيمة افتراضية للخاصية المخصصة. هذا يضمن أن إذا تم تخصيص قيمة غير صالحة، فإن المتصفح سيستخدم القيمة التراجعية المحددة.
  • تعيين سلوك الوراثة: يجب تحديد ما إذا كانت الخاصية المخصصة يمكن أن تورث القيمة من العنصر الأم.

مثال: تعريف الخاصيات المخصصة

@property --my-color {
  النحو: "<color>";
  يورث: صحيح;
  القيمة_الاولية: lightgray;
}

تعريف أعلاه يعني أن --my-color هو خاصية اللون، يمكن أن تورث القيمة من العنصر الأم، وأن القيمة الافتراضية هي lightgray.

في CSS باستخدام الخاصيات المخصصة:

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

مثال

مثال 1

تحديد خاصيتين مخصصة لتحديد التدرج - واستخدامها لتحريك التدرج:

@property --startColor {
  النحو: "<color>";
  القيمة_الاولية: #EADEDB;
  يورث: خطأ;
}
@property --endColor {
  النحو: "<color>";
  القيمة_الاولية: #BC70A4;
  يورث: خطأ;
}

تجربة شخصية

مثال 2

تحديد خاصيتين مخصصة: واحدة لقياس العنصر، وأخرى لقيمة اللون للعنصر:

@property --item-size {
  النحو: "<percentage>";
  يورث: صحيح;
  القيمة_الاولية: 50%;
}
@property --item-color {
  النحو: "<color>";
  يورث: خطأ;
  القيمة_الاولية: lightgray;
}

تجربة شخصية

نحو CSS

@property --اسم_الخصائص {
  النحو: "<color>";
  القيمة_الاولية: أحمر;
  يورث: خطأ;
}

قيمة الخاصية

القيمة الوصف
--اسم_الخصائص مطلوب. اسم الخاصية المحددة.
النحو

يمكن أن يكون <length>، <number>، <percentage>، <length-percentage>، <color>، <image>، <url>، <integer>، <angle>، <time>، <resolution>، <transform-function> أو <custom-ident>، أو قائمة من أنواع البيانات والقيم المفتاحية.

+ (مسافات) و # (كومياس) كوفيزيات تعني قائمة من القيم، مثل <color># يتوقع الجملة المتوقعة هي قائمة من القيم المفصولة بالكومياس من <color>.

الخط العريض (|) يمكن أن يخلق شرط "أو" للجملة المتوقعة، مثل <length> | auto يقبل <length> أو auto، بينما <color># | <integer># يتوقع قائمة من القيم المفصولة بالكومياس من <color> أو قائمة من القيم المفصولة بالكومياس من <integer>.
القيمة_الاولية إعداد القيمة الأولية للخصائص.
يورث صحيح أو خطأ. يتحكم في ما إذا كان التركة المحددة بواسطة @property تورث بشكل افتراضي.

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم بشكل كامل @ القاعدة.

كروم إدج فايرفوكس سفاري أوبرا
85 85 128 16.4 71

الصفحات ذات الصلة

دروس:قاعدة @property CSS