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

Una Kravets

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

إحدى الإضافات الأكثر إثارة إلى CSS ضمن مظلة هوديني هي الخصائص والقيم API.

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

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

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

ملف JavaScript منفصل (الإصدار 78 من Chromium)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});
مضمّنة في ملف CSS (الإصدار 85 من Chromium)
@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

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

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

كما هو الحال مع أي سمة مخصّصة أخرى، يمكنك الحصول (باستخدام var) أو ضبط (كتابة/إعادة كتابة)، ولكن مع خصائص هوديني المخصصة، إذا تم تعيين قيمة false قيمة عند تجاوزها، سيرسل محرك عرض 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 andValues API، مما يتيح انتقالاً سلسًا لتوقف التدرج. بينما لا يعمل المتصفّح على اليسار. تشير رسالة الأشكال البيانية متصفّح غير متوافق معها فقط هو فهم هذا التغيير عندما تبدأ سلسلة من النقطة أ إلى النقطة ب. لا توجد فرصة لإقحام القيم، وبالتالي لا ترى هذا الانتقال السلس.

ومع ذلك، إذا قمت بتعريف نوع البنية عند كتابة الخصائص المخصصة، ثم استخدم تلك الخصائص المخصصة لتمكين الحركة، سترى الانتقال. إِنْتَ إنشاء مثيل للسمة المخصّصة --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 هوديني وواجهة برمجة التطبيقات للخصائص والقيم، اطلع على هذه الموارد:

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