@property: منح قوى خارقة لمتغيرات CSS

Una Kravets

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

من بين الإضافات الأكثر تشويقًا إلى CSS ضمن مظلة Houdini هي واجهة برمجة التطبيقات Properties and Values.

تُحسِّن واجهة برمجة التطبيقات هذه السمات المخصّصة لتنسيق CSS (المعروفة أيضًا باسم متغيّرات CSS) من خلال منحها معنى دلاليًا (يُحدَّد من خلال بنية) وحتى قيمًا احتياطية، ما يتيح اختبار CSS.

كتابة الخصائص المخصّصة في Houdini

في ما يلي مثال على ضبط خاصية مخصّصة (مثل متغيّر CSS)، ولكن الآن باستخدام بنية (النوع) والقيمة الأولية (العنصر الاحتياطي) والقيمة المنطقية للاكتساب (هل يكتسب القيمة من العنصر الرئيسي أم لا؟). وتتم الطريقة الحالية لتنفيذ ذلك من خلال CSS.registerProperty() في JavaScript، ولكن في المتصفّحات المتوافقة، يمكنك استخدام @property:

CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

يمكنك الآن الوصول إلى --colorPrimary مثل أيّ سمة مخصّصة أخرى في CSS، وذلك من خلال var(--colorPrimary). ومع ذلك، يختلف الأمر هنا لأنّ --colorPrimary لا تتم قراءة كسلسلة فقط. تتضمّن بيانات.

القيم الاحتياطية

كما هو الحال مع أيّ سمة مخصّصة أخرى، يمكنك الحصول على القيم (باستخدام var) أو ضبطها (الكتابة/إعادة الكتابة)، ولكن مع السمات المخصّصة في Houdini، في حال ضبط قيمة خطأ عند إلغاء القيمة، سيرسل محرّك عرض CSS القيمة الأولية (القيمة الاحتياطية) بدلاً من تجاهل السطر.

راجِع المثال أدناه. يحتوي المتغيّر --colorPrimary على initial-value‏ magenta. ولكنّ المطوّر قدّم القيمة غير الصالحة "23". بدون @property، سيتجاهل محلل CSS الرمز غير الصالح. الآن، يعود المُحلِّل إلى magenta. يتيح ذلك استخدام العناصر الاحتياطية الحقيقية واختبارها ضمن CSS. رائع.

.card {
  background-color: var(--colorPrimary); /* magenta */
}

.highlight-card {
  --colorPrimary: yellow;
  background-color: var(--colorPrimary); /* yellow */
}

.another-card {
  --colorPrimary: 23;
  background-color: var(--colorPrimary); /* magenta */
}

البنية

باستخدام ميزة البنية، يمكنك الآن كتابة ملف CSS دلالي من خلال تحديد نوع. تشمل الأنواع الحالية المسموح بها ما يلي:

• length
• number
• percentage
• length-percentage
• color
• image
• url
• integer
• angle
• time
• resolution
• transform-list
• transform-function
• custom-ident (سلسلة معرّف مخصّصة)

يؤدي ضبط بنية إلى تمكين المتصفّح من التحقّق من أنواع السمات المخصّصة. ويعود ذلك بالعديد من الفوائد.

لتوضيح هذه النقطة، سأعرض لك كيفية إضافة تأثير متحركة إلى مخطط متدرّج. في الوقت الحالي، لا تتوفّر طريقة لإنشاء تأثيرات متحركة (أو الاستكمال) بسلاسة بين قيم التدرّج اللوني، لأنّه يتم تحليل كلّ بيان تدرّج لوني كسلسلة.

في هذا المثال، يتمّ إنشاء تأثير متحرك للنسبة المئوية لنقطة توقّف التدرّج من قيمة بدء تبلغ% 40 إلى قيمة نهاية تبلغ% 100 من خلال تفاعل التمرير بمؤشّر الماوس. من المفترض أن يظهر لك انتقال سلس للون التدرّج العلوي للأسفل.

يتيح المتصفّح على يمين الصفحة استخدام واجهة برمجة التطبيقات Houdini Properties and Values API، ما يتيح إجراء انتقال سلس للحدود المتدرجة. لا يعرض المتصفّح على اليسار هذا الخيار. لا يمكن للمتصفّح الذي لا يتيح استخدام هذه الميزة فهم هذا التغيير إلا كسلسلة تنتقل من النقطة "أ" إلى النقطة "ب". لا تتوفّر فرصة لاحتساب معدّل التغيّر في الصور المتحركة، وبالتالي لا يظهر لك هذا الانتقال السلس.

ومع ذلك، إذا أعلنت عن نوع البنية عند كتابة السمات المخصّصة، ثم استخدمت هذه السمات المخصّصة لتفعيل الصورة المتحركة، ستظهر لك عملية النقل. يمكنك إنشاء مثيل للسمة المخصّصة --gradPoint على النحو التالي:

@property --gradPoint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

وبعد ذلك، عندما يحين وقت إضافة مؤثرات متحركة، يمكنك تعديل القيمة من 40% إلى 100%:

.post:hover,
.post:focus {
  --gradPoint: 100%;
}

سيؤدي ذلك إلى تفعيل انتقال التدرج السلس.

الخاتمة

تجعل قاعدة @property التكنولوجيا المثيرة أكثر سهولة من خلال السماح لك بكتابة ملف CSS ذي معنى دلالي ضمن CSS نفسه. للاطّلاع على مزيد من المعلومات حول CSS Houdini وواجهة برمجة التطبيقات Properties and Values API، يمكنك الاطّلاع على هذين المرجعَين:

• هل Houdini جاهز؟
• مرجع MDN Houdini
• خصائص مخصّصة أكثر ذكاءً باستخدام واجهة برمجة التطبيقات الجديدة في Houdini
• قائمة مشاكل CSSWG في Houdini

الصورة مقدمة من كريستيان إسكوبار على Unsplash.