قاعدة @property في CSS: إطلاق العنان لقوة تعريف أنواع الخصائص المخصصة

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

ما هي خصائص CSS المخصصة (المتغيرات)؟

قبل الغوص في قاعدة @property، من الضروري فهم خصائص CSS المخصصة، والمعروفة أيضًا باسم متغيرات CSS. تتيح لك الخصائص المخصصة تحديد قيم قابلة لإعادة الاستخدام داخل CSS الخاص بك، مما يجعل أوراق الأنماط الخاصة بك أكثر قابلية للصيانة وأسهل في التحديث. يتم الإعلان عنها باستخدام صيغة --variable-name ويتم الوصول إليها باستخدام دالة var().

مثال:

:root {
  --primary-color: #007bff; /* لون أساسي معرّف بشكل عام */
  --secondary-color: #6c757d;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
}

في هذا المثال، --primary-color و --secondary-color هما خاصيتان مخصصتان. إذا كنت بحاجة إلى تغيير اللون الأساسي عبر موقعك بالكامل، فما عليك سوى تحديثه في مكان واحد – وهو مُحدِّد :root.

محدودية الخصائص المخصصة الأساسية

على الرغم من أن الخصائص المخصصة مفيدة بشكل لا يصدق، إلا أن لها قيودًا كبيرة: يتم التعامل معها أساسًا كسلاسل نصية. هذا يعني أن CSS لا يعرف بطبيعته نوع القيمة التي تحملها الخاصية المخصصة (على سبيل المثال، رقم، لون، طول). بينما يحاول المتصفح استنتاج النوع، يمكن أن يؤدي ذلك إلى سلوك غير متوقع، خاصة عندما يتعلق الأمر بالرسوم المتحركة والانتقالات. على سبيل المثال، قد لا تعمل محاولة تحريك خاصية مخصصة تحمل لونًا كما هو متوقع، أو قد لا تعمل بشكل متسق عبر المتصفحات المختلفة.

تقديم قاعدة @property

تتناول قاعدة @property هذه المحدودية من خلال السماح لك بتعريف النوع والصيغة والقيمة الأولية وسلوك الوراثة لخاصية مخصصة بشكل صريح. يوفر هذا طريقة أكثر قوة ويمكن التنبؤ بها للعمل مع الخصائص المخصصة، خاصة عند تحريكها أو نقلها.

صيغة قاعدة @property

الصيغة الأساسية لقاعدة @property هي كما يلي:

@property --property-name {
  syntax: ;
  inherits: ;
  initial-value: ;
}

دعنا نحلل كل جزء من القاعدة:

• --property-name: هذا هو اسم الخاصية المخصصة التي تقوم بتعريفها. يجب أن يبدأ بشرطتين (--).
• syntax: يحدد هذا النوع المتوقع لقيمة الخاصية المخصصة. إنها سلسلة نصية تصف القيمة (القيم) الصالحة للخاصية المخصصة. تشمل قيم الصيغة الشائعة ما يلي:
• *: يطابق أي قيمة. هذا هو الإعداد الافتراضي إذا لم يتم تحديد صيغة. استخدم هذا بحذر لأنه يتجاوز التحقق من النوع.
• <color>: يطابق أي قيمة لون CSS صالحة (على سبيل المثال، #ff0000, rgb(255, 0, 0), red).
• <length>: يطابق أي قيمة طول CSS صالحة (على سبيل المثال، 10px, 2em, 50%).
• <number>: يطابق أي قيمة رقمية (على سبيل المثال، 1, 3.14, -2.5).
• <integer>: يطابق أي قيمة عدد صحيح (على سبيل المثال، 1, -5, 0).
• <angle>: يطابق أي قيمة زاوية (على سبيل المثال، 45deg, 0.5rad, 100grad).
• <time>: يطابق أي قيمة زمنية (على سبيل المثال، 1s, 500ms).
• <percentage>: يطابق أي قيمة نسبة مئوية (على سبيل المثال، 50%, 100%).
• <image>: يطابق أي قيمة صورة (على سبيل المثال، url(image.jpg), linear-gradient(...)).
• <string>: يطابق أي قيمة سلسلة نصية (محاطة بعلامات اقتباس مزدوجة أو مفردة).
• يمكنك أيضًا دمج واصفات الصيغة باستخدام | للسماح بأنواع متعددة (على سبيل المثال، <length> | <percentage>).
• يمكنك استخدام التعبيرات النمطية لتعريف صيغة أكثر تعقيدًا. يستخدم هذا الكلمات المفتاحية على مستوى CSS inherit، initial، unset، و revert كقيم صالحة إذا حددتها الصيغة، حتى لو لم تكن مسموحًا بها عادةً لنوع الصيغة. مثال: '\d+px' يسمح بقيم مثل '10px' ، '200px' ، ولكن ليس '10em'. لاحظ الهروب المزدوج للشرطة المائلة العكسية.
• inherits: هذه قيمة منطقية (true أو false) تشير إلى ما إذا كانت الخاصية المخصصة يجب أن ترث قيمتها من عنصرها الأصل. القيمة الافتراضية هي false.
• initial-value: يحدد هذا القيمة الأولية للخاصية المخصصة. هذه هي القيمة التي ستحتوي عليها الخاصية إذا لم يتم تعيينها بشكل صريح على عنصر. من المهم توفير قيمة أولية صالحة تتطابق مع syntax المحددة. إذا لم يتم توفير قيمة أولية، ولم يتم وراثة الخاصية، فستكون قيمتها الأولية هي قيمة الخاصية غير الصالحة.

أمثلة عملية على قاعدة @property

دعنا نلقي نظرة على بعض الأمثلة العملية لتوضيح كيفية استخدام قاعدة @property في سيناريوهات العالم الحقيقي.

مثال 1: تحريك لون مخصص

قد يكون تحريك الألوان باستخدام انتقالات CSS القياسية أمرًا صعبًا في بعض الأحيان. تجعل قاعدة @property هذا أسهل بكثير.

@property --brand-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

:root {
  --brand-color: #007bff;
}

.element {
  background-color: var(--brand-color);
  transition: --brand-color 0.5s ease-in-out;
}

.element:hover {
  --brand-color: #28a745; /* تغيير إلى اللون الأخضر عند التمرير */
}

في هذا المثال، نحدد خاصية مخصصة تسمى --brand-color ونحدد أن صيغتها هي <color>. نحدد أيضًا قيمة أولية قدرها #007bff (درجة من اللون الأزرق). الآن، عند تمرير الفأرة فوق .element، ينتقل لون الخلفية بسلاسة من الأزرق إلى الأخضر.

مثال 2: تحريك طول مخصص

يعد تحريك الأطوال (مثل العرض والارتفاع) حالة استخدام شائعة أخرى لقاعدة @property.

@property --element-width {
  syntax: <length>;
  inherits: false;
  initial-value: 100px;
}

.element {
  width: var(--element-width);
  transition: --element-width 0.3s ease-out;
}

.element:hover {
  --element-width: 200px;
}

هنا، نحدد خاصية مخصصة تسمى --element-width ونحدد أن صيغتها هي <length>. يتم تعيين القيمة الأولية على 100px. عند تمرير الفأرة فوق .element، ينتقل عرضه بسلاسة من 100 بكسل إلى 200 بكسل.

مثال 3: إنشاء شريط تقدم مخصص

يمكن استخدام قاعدة @property لإنشاء أشرطة تقدم مخصصة مع مزيد من التحكم في الرسوم المتحركة.

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

.progress-bar {
  width: 200px;
  height: 10px;
  background-color: #eee;
}

.progress-bar::before {
  content: '';
  display: block;
  width: calc(var(--progress) * 1%);
  height: 100%;
  background-color: #007bff;
  transition: --progress 0.3s ease-in-out;
}

.progress-bar[data-progress="50"]::before {
  --progress: 50;
}

.progress-bar[data-progress="100"]::before {
  --progress: 100;
}

في هذا المثال، نحدد خاصية مخصصة تسمى --progress، والتي تمثل النسبة المئوية للتقدم. ثم نستخدم دالة calc() لحساب عرض شريط التقدم بناءً على قيمة --progress. من خلال تعيين سمة data-progress على عنصر .progress-bar، يمكننا التحكم في مستوى التقدم.

مثال 4: التنسيق باستخدام الخصائص المخصصة

تعزز قاعدة @property التنسيق من خلال توفير سلوك أكثر موثوقية ويمكن التنبؤ به عند الانتقال بين السمات المختلفة. ضع في اعتبارك المثال التالي لمحول بسيط بين السمة الداكنة والفاتحة:

@property --bg-color {
    syntax: <color>;
    inherits: false;
    initial-value: #ffffff; /* الوضع الفاتح الافتراضي */
}

@property --text-color {
    syntax: <color>;
    inherits: false;
    initial-value: #000000; /* الوضع الفاتح الافتراضي */
}

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    transition: --bg-color 0.3s, --text-color 0.3s;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.dark-theme {
    --bg-color: #333333; /* الوضع الداكن */
    --text-color: #ffffff;
}

من خلال تحديد --bg-color و --text-color باستخدام قاعدة @property، سيكون الانتقال بين السمات أكثر سلاسة وموثوقية مقارنة باستخدام الخصائص المخصصة الأساسية بدون أنواع محددة.

توافق المتصفحات

اعتبارًا من أواخر عام 2023، يعد دعم المتصفحات لقاعدة @property جيدًا بشكل عام عبر المتصفحات الحديثة، بما في ذلك Chrome و Firefox و Safari و Edge. ومع ذلك، من الجيد دائمًا التحقق من أحدث معلومات توافق المتصفحات على مواقع الويب مثل Can I Use (caniuse.com) للتأكد من أن جمهورك المستهدف لديه دعم كافٍ لهذه الميزة.

إذا كنت بحاجة إلى دعم المتصفحات القديمة التي لا تدعم قاعدة @property، فيمكنك استخدام اكتشاف الميزات باستخدام JavaScript وتوفير حلول بديلة. على سبيل المثال، يمكنك استخدام JavaScript لاكتشاف ما إذا كان المتصفح يدعم CSS.registerProperty (واجهة برمجة تطبيقات JavaScript المرتبطة بـ @property) ثم تطبيق أنماط بديلة إذا لم يكن مدعومًا.

أفضل الممارسات لاستخدام قاعدة @property

فيما يلي بعض أفضل الممارسات التي يجب مراعاتها عند استخدام قاعدة @property:

• حدد الصيغة بعناية: اختر قيمة الصيغة الأنسب لخاصيتك المخصصة. سيساعد هذا في منع الأخطاء وضمان أن CSS الخاص بك يعمل كما هو متوقع.
• وفر قيمًا أولية: وفر دائمًا initial-value لخصائصك المخصصة. هذا يضمن أن الخاصية لها قيمة صالحة حتى لو لم يتم تعيينها بشكل صريح على عنصر.
• ضع في اعتبارك الوراثة: فكر مليًا فيما إذا كانت خاصيتك المخصصة يجب أن ترث قيمتها من عنصرها الأصل. في معظم الحالات، من الأفضل تعيين inherits على false ما لم يكن لديك سبب محدد لتمكين الوراثة.
• استخدم أسماء خصائص وصفية: اختر أسماء وصفية لخصائصك المخصصة تشير بوضوح إلى الغرض منها. سيجعل هذا CSS الخاص بك أكثر قابلية للقراءة والصيانة. على سبيل المثال، بدلاً من --color، استخدم --primary-button-color.
• اختبر بدقة: اختبر CSS الخاص بك عبر متصفحات وأجهزة مختلفة للتأكد من أنه يعمل كما هو متوقع. انتبه بشكل خاص للرسوم المتحركة والانتقالات، حيث أن هذه هي المجالات التي يمكن أن يكون لقاعدة @property التأثير الأكبر فيها.
• وثق التعليمات البرمجية الخاصة بك: أضف تعليقات إلى CSS الخاص بك لشرح الغرض من خصائصك المخصصة وكيفية استخدامها. سيجعل هذا من السهل على المطورين الآخرين (ونفسك في المستقبل) فهم التعليمات البرمجية الخاصة بك.

اعتبارات إمكانية الوصول

عند استخدام قاعدة @property، من المهم مراعاة إمكانية الوصول. تأكد من أن الرسوم المتحركة والانتقالات الخاصة بك ليست مشتتة للغاية أو مربكة للمستخدمين ذوي الإعاقات المعرفية. تجنب استخدام الرسوم المتحركة التي تومض أو تومض، حيث يمكن أن تؤدي إلى نوبات صرع لدى بعض الأفراد.

أيضًا، تأكد من أن اختياراتك للألوان توفر تباينًا كافيًا للمستخدمين ذوي الإعاقات البصرية. يمكنك استخدام أدوات مثل WebAIM Contrast Checker للتحقق من أن تركيبات الألوان الخاصة بك تلبي إرشادات إمكانية الوصول.

الاعتبارات العالمية

عند تطوير مواقع الويب والتطبيقات لجمهور عالمي، من المهم مراعاة الاختلافات الثقافية والترجمة. فيما يلي بعض الأشياء التي يجب مراعاتها عند استخدام قاعدة @property في سياق عالمي:

• اتجاه النص: كن على دراية باتجاه النص (من اليسار إلى اليمين مقابل من اليمين إلى اليسار) عند استخدام الخصائص المخصصة للتحكم في التخطيط أو تحديد الموضع. استخدم الخصائص المنطقية (على سبيل المثال، margin-inline-start بدلاً من margin-left) لضمان تكيف تخطيطك بشكل صحيح مع اتجاهات النص المختلفة.
• تنسيقات الأرقام والتواريخ: انتبه إلى تنسيقات الأرقام والتواريخ المختلفة المستخدمة في البلدان المختلفة. تجنب ترميز تنسيقات معينة في CSS الخاص بك وبدلاً من ذلك اعتمد على التنسيق الافتراضي للمتصفح أو استخدم JavaScript لتنسيق الأرقام والتواريخ وفقًا للمنطقة المحلية للمستخدم.
• رمزية الألوان: كن على دراية بأن الألوان يمكن أن يكون لها معانٍ مختلفة في ثقافات مختلفة. تجنب استخدام الألوان التي قد تعتبر مسيئة أو غير مناسبة في ثقافات معينة.
• دعم اللغة: تأكد من أن خصائصك المخصصة تعمل بشكل صحيح مع لغات مختلفة. اختبر موقع الويب الخاص بك بمجموعة متنوعة من اللغات لتحديد أي مشكلات محتملة.

مستقبل خصائص CSS المخصصة وقاعدة @property

تمثل قاعدة @property خطوة مهمة إلى الأمام في تطور CSS. مع استمرار تحسن دعم المتصفحات، يمكننا أن نتوقع رؤية المزيد من الاستخدامات المبتكرة لهذه الميزة القوية. في المستقبل، قد نرى قيم صيغة جديدة تضاف إلى قاعدة @property لدعم أنواع بيانات أكثر تعقيدًا، مثل المصفوفات والكائنات. قد نرى أيضًا تكاملاً أفضل مع JavaScript، مما يسمح للمطورين بإنشاء خصائص مخصصة ومعالجتها ديناميكيًا في وقت التشغيل.

يمهد الجمع بين الخصائص المخصصة وقاعدة @property الطريق لبنية CSS أكثر نمطية وقابلية للصيانة وقوة. من خلال تبني هذه الميزات، يمكن للمطورين إنشاء تجارب ويب أكثر تطورًا وجاذبية يمكن الوصول إليها للمستخدمين في جميع أنحاء العالم.

الخلاصة

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

قراءات إضافية

• MDN Web Docs: @property
• CSS Custom Properties for Cascading Variables Module Level 1