إتقان CSS: تسجيل خاصية CSS مخصصة باستخدام ‎@property

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

ما هي @property؟

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

• التحقق من النوع: يضمن تعيين قيمة من النوع الصحيح للخاصية المخصصة.
• الرسوم المتحركة: تتيح الانتقالات والرسوم المتحركة السلسة للخصائص المخصصة لأنواع معينة، مثل الأرقام أو الألوان.
• القيم الافتراضية: توفر قيمة احتياطية إذا لم يتم تحديد الخاصية المخصصة بشكل صريح.
• التحكم في الإرث: يحدد ما إذا كانت الخاصية المخصصة ترث قيمتها من العنصر الأصل.

فكر في الأمر على أنه إضافة أمان النوع إلى متغيرات CSS الخاصة بك. فهو يسمح لك بإنشاء أوراق أنماط أكثر قوة ويمكن التنبؤ بها.

بنية @property

بنية قاعدة @property الأساسية هي:

@property --property-name {
  syntax: '';
  inherits: true | false;
  initial-value: ;
}

دعنا نحلل كل جزء:

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

فهم واصف syntax

واصف syntax هو الجزء الأكثر أهمية في قاعدة @property. فهو يخبر المتصفح بنوع القيمة المتوقعة للخاصية المخصصة. فيما يلي بعض قيم بناء الجملة الشائعة:

• *: يسمح بأي قيمة. هذا هو بناء الجملة الأكثر تساهلاً ويكرر بشكل أساسي سلوك متغير CSS القياسي بدون تسجيل. استخدم هذا باعتدال.
• <length>: يتوقع قيمة طول (على سبيل المثال، 10px، 2em، 50%). يتيح هذا الرسوم المتحركة السلسة بين قيم الأطوال المختلفة.
• <number>: يتوقع قيمة رقمية (على سبيل المثال، 1، 3.14، -5). مفيد لتحريك الخصائص العددية مثل التعتيم أو المقياس.
• <percentage>: يتوقع قيمة مئوية (على سبيل المثال، 25%، 100%).
• <color>: يتوقع قيمة لون (على سبيل المثال، #f00، rgb(255, 0, 0)، hsl(0, 100%, 50%)). يتيح انتقالات ورسوم متحركة سلسة للألوان.
• <image>: يتوقع قيمة صورة (على سبيل المثال، url(image.jpg)، linear-gradient(...)).
• <integer>: يتوقع قيمة عدد صحيح (على سبيل المثال، 1، -10، 0).
• <angle>: يتوقع قيمة زاوية (على سبيل المثال، 45deg، 0.5rad، 200grad). مفيد لتحريك عمليات التدوير.
• <time>: يتوقع قيمة وقت (على سبيل المثال، 1s، 500ms). مفيد للتحكم في مدة الرسوم المتحركة أو التأخيرات عبر الخصائص المخصصة.
• <resolution>: يتوقع قيمة دقة (على سبيل المثال، 300dpi، 96dpi).
• <transform-list>: يتوقع قائمة بوظائف التحويل (على سبيل المثال، translateX(10px) rotate(45deg)). يسمح بتحريك التحويلات المعقدة.
• <custom-ident>: يتوقع معرفًا مخصصًا (سلسلة). على غرار enum.
• <string>: يتوقع قيمة سلسلة (على سبيل المثال، "Hello World"). كن حذرًا مع هذا، حيث أن تحريك السلاسل غير مدعوم بشكل عام.
• بنى الجملة المخصصة: يمكنك إنشاء بنى جملة أكثر تعقيدًا باستخدام مجموعات مما سبق وعوامل | (أو)، `[]` (تجميع)، `+` (واحد أو أكثر)، `*` (صفر أو أكثر)، و`؟` (صفر أو واحد). على سبيل المثال: <length> | <percentage> يسمح بقيمة طول أو قيمة نسبة مئوية.

يعد اختيار syntax الصحيح أمرًا ضروريًا للاستفادة من القوة الكاملة لـ @property.

أمثلة عملية لـ @property

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

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

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

@property --bg-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

.button {
  background-color: var(--bg-color);
  transition: --bg-color 0.3s ease;
}

.button:hover {
  --bg-color: #f00; /* Red */
}

في هذا المثال، نقوم بتسجيل الخاصية المخصصة --bg-color ببنية <color>، مما يعني أنها تتوقع قيمة لون. تم تعيين initial-value على اللون الأبيض (#fff). عند تمرير الماوس فوق الزر، يتم تغيير --bg-color إلى اللون الأحمر (#f00)، ويقوم الانتقال بتحريك تغيير لون الخلفية بسلاسة.

المثال 2: التحكم في نصف قطر الحدود برقم

يمكنك استخدام @property للتحكم في نصف قطر حدود العنصر وتحريكه.

@property --border-radius {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.rounded-box {
  border-radius: var(--border-radius);
  transition: --border-radius 0.5s ease;
}

.rounded-box:hover {
  --border-radius: 20px;
}

هنا، نقوم بتسجيل --border-radius كـ <length>، مما يضمن قبوله لقيم الطول مثل px أو em أو %. القيمة الأولية هي 0px. عند التمرير فوق .rounded-box، يتحرك نصف قطر الحدود إلى 20px.

المثال 3: تحريك إزاحة الظل

لنفترض أنك تريد تحريك الإزاحة الأفقية لظل مربع.

@property --shadow-offset-x {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.shadowed-box {
  box-shadow: var(--shadow-offset-x) 5px 10px rgba(0, 0, 0, 0.5);
  transition: --shadow-offset-x 0.3s ease;
}

.shadowed-box:hover {
  --shadow-offset-x: 10px;
}

في هذه الحالة، يتم تسجيل --shadow-offset-x كـ <length>، وقيمته الأولية هي 0px. تستخدم خاصية box-shadow هذه الخاصية المخصصة للإزاحة الأفقية. عند التمرير، تتحرك الإزاحة إلى 10px.

المثال 4: استخدام <custom-ident> للتصميم

تتيح لك بنية <custom-ident> تحديد مجموعة من قيم السلسلة المحددة مسبقًا، مما يؤدي بشكل فعال إلى إنشاء تعداد لمتغيرات CSS الخاصة بك. هذا مفيد للتصميم أو التحكم في الحالات المتميزة.

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light; /* Default Theme */
}

body {
  background-color: var(--theme) == light ? #fff : #333;
  color: var(--theme) == light ? #000 : #fff;
}

.dark-theme {
  --theme: dark;
}

هنا، يتم تسجيل --theme ببنية <custom-ident>. على الرغم من أننا لا نسرد المعرفات المسموح بها صراحةً في قاعدة @property نفسها، إلا أن التعليمات البرمجية تعني أنها `light` و `dark`. ثم يستخدم CSS المنطق الشرطي (var(--theme) == light ? ... : ...) لتطبيق أنماط مختلفة بناءً على المظهر الحالي. ستؤدي إضافة الفئة `dark-theme` إلى عنصر ما إلى تبديل المظهر إلى الوضع الداكن. لاحظ أن المنطق الشرطي الذي يستخدم `var()` ليس CSS قياسيًا وغالبًا ما يتطلب معالجات مسبقة أو JavaScript. سيستخدم النهج الأكثر قياسية فئات CSS والتتالي:

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light;
}

body {
  background-color: #fff;
  color: #000;
}

body[data-theme="dark"] {
  background-color: #333;
  color: #fff;
}

/* JavaScript to toggle the theme */
/* document.body.setAttribute('data-theme', 'dark'); */

في هذا المثال المنقح، نستخدم سمة data-theme على عنصر body للتحكم في المظهر. سيتم استخدام JavaScript (تم التعليق عليه) لتبديل السمة بين `light` و `dark`. هذا هو نهج أكثر قوة وقياسية للتصميم باستخدام متغيرات CSS.

فوائد استخدام @property

يوفر استخدام @property العديد من المزايا:

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

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

اعتبارًا من أواخر عام 2023، تتمتع @property بدعم جيد، ولكن ليس عالميًا، من المتصفحات. وهي مدعومة في معظم المتصفحات الحديثة، بما في ذلك Chrome و Firefox و Safari و Edge. ومع ذلك، قد لا تدعمها المتصفحات القديمة. تحقق دائمًا من أحدث معلومات توافق المتصفح على مواقع الويب مثل هل يمكنني استخدامه... قبل استخدام @property في الإنتاج.

للتعامل مع المتصفحات القديمة، يمكنك استخدام استعلامات الميزات (@supports) لتوفير أنماط احتياطية:

@supports (--property: value) {
  /* Styles that use @property */
}

@supports not (--property: value) {
  /* Fallback styles for browsers that don't support @property */
}

استبدل --property و value بخاصية مخصصة فعلية وقيمتها.

متى تستخدم @property

ضع في اعتبارك استخدام @property في السيناريوهات التالية:

• عندما تحتاج إلى تحريك الخصائص المخصصة: هذه هي حالة الاستخدام الأساسية لـ @property. يتيح تسجيل الخاصية ببناء الجملة الصحيح الرسوم المتحركة السلسة.
• عندما تريد فرض أمان النوع للخصائص المخصصة: إذا كنت تريد التأكد من أن الخاصية المخصصة تحتفظ دائمًا بقيمة من نوع معين، فاستخدم @property لتسجيلها.
• عندما تريد توفير قيمة افتراضية لخاصية مخصصة: يتيح لك واصف initial-value تحديد قيمة احتياطية.
• في المشاريع الكبيرة: تعمل @property على تحسين قابلية صيانة التعليمات البرمجية وتمنع الأخطاء، مما يجعلها مفيدة بشكل خاص للمشاريع الكبيرة التي تضم العديد من المطورين.
• عند إنشاء مكونات قابلة لإعادة الاستخدام أو أنظمة تصميم: يمكن أن تساعد @property في ضمان الاتساق والقدرة على التنبؤ عبر مكوناتك.

الأخطاء الشائعة التي يجب تجنبها

• نسيان واصف syntax: بدون واصف syntax، لن يعرف المتصفح النوع المتوقع للقيمة، ولن تعمل الرسوم المتحركة بشكل صحيح.
• استخدام قيمة syntax خاطئة: يمكن أن يؤدي اختيار بناء جملة خاطئ إلى سلوك غير متوقع. تأكد من تحديد بناء الجملة الذي يعكس بدقة النوع المتوقع للقيمة.
• عدم توفير initial-value: بدون قيمة أولية، قد تكون الخاصية المخصصة غير محددة، مما يؤدي إلى أخطاء. قم دائمًا بتوفير قيمة افتراضية معقولة.
• الإفراط في استخدام * كبنية: على الرغم من أنه مناسب، إلا أن استخدام * يلغي فوائد التحقق من النوع والرسوم المتحركة. استخدمه فقط عندما تحتاج حقًا إلى السماح بأي نوع من القيم.
• تجاهل توافق المتصفح: تحقق دائمًا من توافق المتصفح ووفر أنماطًا احتياطية للمتصفحات القديمة.

@property و CSS Houdini

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

• واجهة برمجة تطبيقات الرسم: تسمح لك بتحديد صور الخلفية والحدود المخصصة.
• واجهة برمجة تطبيقات Animation Worklet: توفر طريقة لإنشاء رسوم متحركة عالية الأداء يتم تشغيلها مباشرةً في مؤشر ترابط الملحن الخاص بالمتصفح.
• واجهة برمجة تطبيقات التخطيط: تتيح لك تحديد خوارزميات التخطيط المخصصة.
• واجهة برمجة تطبيقات المحلل اللغوي: توفر الوصول إلى محلل CSS الخاص بالمتصفح.

@property هي واجهة برمجة تطبيقات Houdini بسيطة نسبيًا للتعلم، ولكنها تفتح الباب لاستكشاف ميزات Houdini الأكثر تقدمًا.

الخلاصة

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