@property

تسجيل متغيّر مكتوب @property

@property يسجّل متغيّرًا مخصّصًا بنوع صريح (لون، رقم، نسبة) — يجعله قابلًا للحركة والانتقال بسلاسة كأي خاصية عادية.

متغيّرات CSS العادية (--x) نصّية بالكامل من منظور المتصفح: لا يعرف إن كانت لونًا أو رقمًا، لذلك لا يستطيع «حرّكها» بسلاسة بين قيمتين — أي انتقال عليها يقفز فجأة بلا مراحل وسيطة. @property يحل ذلك بتسجيل المتغيّر بنوع صريح عبر ثلاثة أوصاف مطلوبة: syntax (النوع، مثل <color> أو <percentage>)، inherits (هل يُورَّث)، وinitial-value (القيمة الابتدائية).

بمجرد التسجيل، يصبح المتصفح قادرًا على حساب قيم وسيطة أثناء transition أو animation — استخدام شائع: تحريك موضع توقّف تدرّج لوني (Gradient) بسلاسة، وهو مستحيل بمتغيّر غير مسجَّل.

الصياغة

@property --progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.bar { background: linear-gradient(90deg, #7c5cff var(--progress), #e5e7eb var(--progress)); transition: --progress 0.4s; }

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  @property --p { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
  .bar { width: 220px; height: 20px; border-radius: 10px; background: linear-gradient(90deg, #7c5cff var(--p), #e5e7eb var(--p)); transition: --p 0.6s; }
  .bar:hover { --p: 80%; }
</style>
<div class="bar"></div>
<p>مرّر الفأرة فوق الشريط — الانتقال سلس بفضل تسجيل النوع.</p>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
syntax	النوع المسموح، مثل "<color>" أو "<length>" أو "*" لأي قيمة
inherits	true/false — هل تُورَّث القيمة للأبناء
initial-value	القيمة الابتدائية — مطلوبة إلا مع syntax: "*"

💡 نصائح عملية

استخدمه كلما احتجت تحريك متغيّر مخصّص بسلاسة (تدرّج، زاوية، نسبة) بدل قفزة مفاجئة
يوجد مكافئ جافاسكريبت CSS.registerProperty() لتسجيل نفس الشيء برمجيًا

⚠️ أخطاء شائعة

تسجيل متغيّر بـ syntax خاطئ (مثل <length> لقيمة لونية) → القيمة تُرفض وتعود للابتدائية
توقّع دعمه في كل المتصفحات القديمة — ميزة أحدث نسبيًا من متغيّرات CSS العادية

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs