CSS Academy · درس

واجهة خصائص CSS وقيمها (@property)

سجّل الخصائص المخصصة مع أنواعها ووراثتها باستخدام @property لإنشاء متغيرات CSS قابلة للتحريك.

واجهة خصائص CSS وقيمها (@property) درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

ما هي @property؟

@property هي طريقة CSS لتسجيل خاصية مخصصة مع تحديد نوعها وسلوك توريثها وقيمتها الأولية. وهي الصيغة التصريحية لواجهة CSS Properties and Values API (CSS.registerProperty).

بنية @property

سجّلوا خاصية مخصصة باستخدام واصفات ثلاثة مطلوبة:

<div class="box"></div>

واصف syntax

يحدد واصف syntax نوع الخاصية باستخدام أسماء أنواع CSS:

"<number>" و"<integer>" و"<percentage>"
"<angle>" و"<color>" و"<length>"
"<image>" و"<transform-list>"
"*" — قبول أي قيمة (مثل الخاصية غير المسجلة)

واصف inherits

يتحكم في ما إذا كانت الخاصية ستُورث عبر DOM. عيّنوا false للخصائص التي ينبغي عزلها لكل عنصر.

واصف initial-value

يوفر قيمة أولية مضمونة عندما لا تكون الخاصية معيّنة. وهذا يجعل الخاصية قابلة للتحريك.

تحريك الخصائص المخصصة

الفائدة الأساسية من @property هي أن الخصائص المخصصة المسجلة يمكن نقلها وتحريكها، لأن المتصفح يعرف نوعها ويمكنه الاستيفاء بين القيم:

<div class="element is-hovered"></div>

من دون @property

من دون التسجيل، لا يعرف CSS أنواع الخصائص المخصصة. إذ تقفز الانتقالات بين قيمتي متغير بدلًا من الاستيفاء، لأن المتصفح لا يستطيع حساب القيمة الوسطى لنوع غير معروف.

@property لتحريك التدرجات

تحريك نقاط توقف التدرج (وهو أمر كان مستحيلًا سابقًا دون @property):

<div class="loader loading"></div>

المكافئ في JavaScript

يمكنكم أيضًا تسجيل الخصائص باستخدام واجهة JavaScript البرمجية:

<div id="box"></div>
<script>
  // JavaScript equivalent of @property
  CSS.registerProperty({
    name: '--rotation',
    syntax: '<angle>',
    inherits: false,
    initialValue: '0deg'
  });

  document.getElementById('box').style.setProperty('--rotation', '45deg');
</script>

دعم المتصفحات

يحظى @property بدعم Chrome 85 والإصدارات الأحدث وEdge 85 والإصدارات الأحدث وSafari 16.4 والإصدارات الأحدث وFirefox 128 والإصدارات الأحدث. وهو متاح على نطاق واسع في المتصفحات الحديثة.

الاستخدامات العملية لـ @property

حالات الاستخدام الشائعة:

تحريك مواضع التدرجات وألوانها
تحريك درجة اللون والتشبّع في ألوان HSL
تحريك تعبئة أشرطة التقدم
تحريك العدادات لإظهار الأرقام
انتقالات سلسة بين الوضعين الداكن والفاتح عبر تحريك رموز الألوان

تحقق سريع

لماذا يُعد @property مطلوبًا لتحريك الخصائص المخصصة في CSS؟

مراجعة

يسجل @property الخصائص المخصصة باستخدام نوع syntax وعلامة inherits وinitial-value. وتصبح الخصائص المسجلة قابلة للتحريك والانتقال، لأن المتصفح يستطيع إجراء الاستيفاء بين قيمها المكتوبة. ويتيح ذلك تحريك التدرجات وانتقالات درجة اللون وتحريك العدادات، وهي أمور مستحيلة باستخدام الخصائص المخصصة غير المسجلة.

الأسئلة الشائعة

هل درس «واجهة خصائص CSS وقيمها (@property)» مجاني؟

نعم — نص درس «واجهة خصائص CSS وقيمها (@property)» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «واجهة خصائص CSS وقيمها (@property)»؟

سجّل الخصائص المخصصة مع أنواعها ووراثتها باستخدام @property لإنشاء متغيرات CSS قابلة للتحريك. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «واجهة خصائص CSS وقيمها (@property)»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy