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

Una Kravets

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

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

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

كتابة خصائص هوديني المخصصة

في ما يلي مثال على ضبط خاصية مخصّصة (مثل متغيّر 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 جاهز؟
• مرجع MDN Houdini
• خصائص مخصّصة أكثر ذكاءً باستخدام واجهة برمجة التطبيقات الجديدة في Houdini
• قائمة مشاكل CSSWG في Houdini

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