شرح خاصية @property في CSS لتخصيص المتغيرات والتحكم بها

🎨 ما هي خاصية @property في CSS ولماذا هي رائعة؟

مرحباً بك في عالم CSS المتقدم! إذا كنت قد استخدمت المتغيرات المخصصة (Custom Properties) في CSS من قبل (مثل --main-color: blue;)، فأنت تعلم مدى فائدتها في جعل شفراتك أكثر تنظيماً وقابلية للصيانة. قاعدة @property تأخذ هذه الفكرة إلى مستوى جديد تماماً! 🚀

ببساطة، @property هي قاعدة (at-rule) في CSS تسمح لك بتعريف وتخصيص متغير CSS مخصص بشكل رسمي ودقيق. تخيلها كأنك تقدم تعريفاً مفصلاً لهوية المتغير للغة CSS نفسها، فتخبرها: "هذا المتغير اسمه كذا، ونوع قيمته كذا، ويمكن أن يرث قيمته من العنصر الأب أم لا". هذا التعريف الرسمي يفتح أبواباً من الإمكانيات التي لم تكن متاحة بمجرد تعريف المتغير بالطريقة التقليدية.

🔍 الفرق بين تعريف المتغير العادي و @property

دعنا نرى الفرق العملي لتتضح الصورة:

الطريقة التقليدية (دون @property):

:root {
  --primary-color: #3498db; /* مجرد تعريف للقيمة */
}

.element {
  background-color: var(--primary-color);
}

هنا، CSS تعامل مع --primary-color كسلسلة نصية (string) تحتوي على "#3498db". لا تعرف أي معلومات أخرى عنه.

الطريقة الجديدة (باستخدام @property):

@property --primary-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #3498db;
}

.element {
  background-color: var(--primary-color);
}

الآن، CSS تعرف أن --primary-color هو متغير من نوع لون (<color>)، لا يرث قيمته من العنصر الأب، وله قيمة ابتدائية محددة. هذا التعريف يجعل المتغير "مسجلاً" رسمياً في النظام.

📝 بناء جملة (Syntax) قاعدة @property

الصيغة الأساسية لتعريف خاصية @property هي كما يلي:

@property --variable-name {
  syntax: '<value-type>';
  inherits: true | false;
  initial-value: initial_value;
}

دعنا نشرح كل جزء من هذا التعريف السحري:

1. --variable-name 🏷️: هذا هو اسم المتغير المخصص الذي تريد تعريفه، ويجب أن يبدأ بشرطتين (--) كما هو معتاد.
2. syntax 📖: هذا هو الجزء الأهم. يحدد نوع البيانات الذي يمكن أن يحتويه المتغير. تخبر CSS: "اقبل فقط القيم من هذا النوع". أمثلة على الأنواع:
   • <color>: للقيم اللونية (مثل #ff0000, rgb(255,0,0), red).
   • <length>: للقياسات (مثل 10px, 5em, 50%).
   • <number>: للأرقام الصحيحة أو الكسرية (مثل 10, 3.14).
   • <percentage>: للنسب المئوية (مثل 100%).
   • <angle>: للزوايا (مثل 45deg, 1.57rad).
3. inherits 👨‍👦: تحدد ما إذا كان هذا المتغير يرث قيمته من العنصر الأب أم لا. تأخذ القيم true (نعم) أو false (لا).
4. initial-value 🏁: تحدد القيمة الافتراضية للمتغير في حالة عدم تعيين أي قيمة له. يجب أن تتوافق هذه القيمة مع النوع المحدد في syntax.

💡 مثال عملي بسيط: تخصيص لون مع التحكم

لنطبق ما تعلمناه. سننشئ متغير لون لا يرث قيمته، ولنعطيه قيمة ابتدائية.

/* الخطوة 1: تعريف المتغير باستخدام @property */
@property --accent-color {
  syntax: '<color>';        /* النوع: لون */
  inherits: false;          /* لا يرث من الأب */
  initial-value: #2ecc71;   /* القيمة الابتدائية: أخضر */
}

/* الخطوة 2: استخدام المتغير */
.button {
  background-color: var(--accent-color);
  padding: 10px 20px;
  color: white;
  border: none;
}

.special-button {
  /* يمكننا تغيير القيمة هنا لأننا عرفنا النوع */
  --accent-color: #e74c3c; /* أحمر */
}

في هذا المثال:

• عرفنا --accent-color كمتغير لوني رسمي.
• جميع الأزرار (button) ستأخذ القيمة الابتدائية الخضراء (#2ecc71).
• الزر الخاص (.special-button) يغيّر قيمة المتغير لنفسه إلى الأحمر (#e74c3c). لأن inherits: false، هذا التغيير لا يؤثر على الأزرار الأخرى.

⚡ الميزة الكبرى: التحريك (Animation) والتدرج (Transition)

هذه هي أقوى ميزة لـ @property! المتغيرات العادية في CSS لا يمكن تحريكها (animate) أو عمل تدرج لها (transition) لأن المتصفح لا يعرف نوع قيمتها. ولكن عندما تعرف المتغير بـ @property، يصبح بإمكانك ذلك!

/* تعريف متغير لوني يمكن تحريكه */
@property --glow-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #3498db;
}

.box {
  width: 100px;
  height: 100px;
  background-color: var(--glow-color);
  transition: --glow-color 0.5s ease; /* تدرج سلس لتغيير اللون! */
}

.box:hover {
  --glow-color: #9b59b6; /* عند التمرير، يتغير اللون بسلاسة */
}

بدون @property، خاصية transition على --glow-color لن تعمل. الآن، بما أننا عرفنا النوع (<color>)، يعرف المتصفح كيفية إنشاء التدرج اللوني بين القيمتين، مما يخلق تأثيراً سلساً وجميلاً! ✨

🎯 متى تستخدم خاصية @property؟

استخدم @property عندما:

• تريد تحريك متغير مخصص أو عمل تدرج له.
• تريد ضمان نوع معين من القيم لمتغيرك (مثلاً، التأكد من أن --spacing دائماً يكون <length>).
• تريد تحسين الأداء قليلاً، حيث أن التعريف المسبق يساعد المتصفح على تحسين العمليات.
• تريد منع الوراثة لمتغير معين بوضع inherits: false.

🚫 ملاحظات هامة ودعم المتصفحات

• الدعم: خاصية @property مدعومة في جميع المتصفحات الحديثة (Chrome, Edge, Firefox, Safari). تأكد من أن إصدارات المتصفحات محدثة.
• التعريف مرة واحدة: عادةً ما يتم تعريف @property في أعلى ملف الـ CSS، مثل مستوى :root، ليكون متاحاً في جميع أنحاء المستند.
• لا تستخدم للمتغيرات البسيطة: إذا كان لديك متغير بسيط لا تحتاج لتحريكه أو التحكم الدقيق بنوعه، فاستخدم الطريقة التقليدية (--my-var: value;) فهي كافية وأبسط.

🧪 تمرين سريع: حاول بنفسك

جرب هذا المثال البسيط في محررك:

1. عرف متغيراً باستخدام @property اسمه --box-size من النوع <length>، لا يرث، وقيمته الابتدائية 50px.
2. استخدم هذا المتغير لتحديد width و height لـ div.
3. أضف transition للمتغير.
4. عند :hover، غيّر قيمة --box-size إلى 150px. شاهد كيف سيتحرك الصندوق بتوسع سلس! 🎉