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

Una Kravets

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

تُعدّ واجهة برمجة التطبيقات الخصائص والقيم من أكثر الإضافات إثارة إلى خدمة CSS في مظلة Houdini.

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

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

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

ملف JavaScript منفصل (Chromium 78)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '',
  initialValue: 'magenta',
  inherits: false
});
مُضمَّن في ملف CSS (Chromium 85)
@property --colorPrimary {
  syntax: '';
  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 والقيم، ما يوفّر انتقالاً سلسًا لتوقف التدرج. أما المتصفح على الجانب الأيمن، فلا يفعل ذلك. ولا يمكن للمتصفّح غير المتوافق فهم هذا التغيير إلّا كسلسلة تنتقل من النقطة "أ" إلى النقطة "ب". ليس هناك فرصة لدمج القيم، وبالتالي لا ترى هذا الانتقال السلس.

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

/* Check for Houdini support & register property */
@supports (background: paint(something)) {
  @property --gradPoint {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 40%;
  }
}

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

@supports (background: paint(something)) {
  .post:hover,
  .post:focus {
    --gradPoint: 100%;
  }
}

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

انتقال حدود التدرج بسلاسة. الاطّلاع على عرض توضيحي لميزة Glitch

الخلاصة

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

تصوير كريستيان إسكوبار على Unلمحة.