خصائص مخصّصة أكثر ذكاءً مع واجهة برمجة تطبيقات Houdini الجديدة

الانتقالات وحماية البيانات في CSS

Sam Richard

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

ما هو Houdini؟

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

المستوى 1 من واجهة برمجة التطبيقات CSS Properties and Values API

تتيح لنا واجهة برمجة التطبيقات CSS Properties and Values API Level 1 (Houdini Props and Vals) تنظيم خصائصنا المخصّصة. هذا هو الوضع الحالي عند استخدام الخصائص المخصصة:

.thing {
  --my-color: green;
}

بما أنّ الخصائص المخصّصة لا تتضمّن أنواعًا، يمكن إلغاؤها بطرق غير متوقّعة. على سبيل المثال، لنفترض أنّك حدّدت --my-color باستخدام عنوان URL.

.thing {
  --my-color: url('not-a-color');
  color: var(--my-color);
}

في هذه الحالة، بما أنّه لم تتم كتابة --my-color، لا يمكنه معرفة أنّ عنوان URL ليس قيمة لون صالحة. عند استخدامها، تعود إلى القيم التلقائية (الأسود لـ color، والشفاف لـ background). باستخدام Houdini Props and Vals، يمكن تسجيل الخصائص المخصّصة ليعرف المتصفّح ما يجب أن تكون عليه.

الآن، تم تسجيل الخاصية المخصّصة --my-color كلون. يخبر هذا المتصفح بأنواع القيم المسموح بها وكيف يمكنه كتابة هذه الخاصية والتعامل معها!

بنية الموقع المسجَّل

يتم تسجيل الموقع على النحو التالي:

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

وتتوفّر الخيارات التالية:

name: string

اسم الخاصية المخصّصة

syntax: string

كيفية تحليل الخاصية المخصّصة يمكنك العثور على قائمة كاملة بالقيم المحتملة في مواصفات قيم CSS ووحداتها. القيمة التلقائية هي *.

inherits: boolean

ما إذا كان يكتسب قيمة الإعداد الرئيسي أم لا القيمة التلقائية هي true.

initialValue: string

القيمة الأولية للخاصية المخصّصة

لنلقِ نظرة عن كثب على "syntax". هناك عدد من الخيارات الصالحة التي تتراوح بين الأرقام والألوان وأنواع <custom-ident>. يمكن أيضًا تعديل هذه الصيغ باستخدام القيم التالية

• تشير إضافة + إلى أنّ السمة تقبل قائمة من القيم المفصولة بمسافات لهذه الصيغة. على سبيل المثال، ستكون السمة <length>+ قائمة من الأطوال مفصولة بمسافات
• وتعني إضافة # أنّ السمة تقبل قائمة قيم مفصولة بفاصلة من هذه البنية. على سبيل المثال، ستكون السمة <color># قائمة قيم مفصولة بفاصلة للألوان
• تشير إضافة | بين البُنى أو المعرّفات إلى أنّ أيًا من الخيارات المقدَّمة صالح. على سبيل المثال، يسمح <color># | <url> | magic باستخدام قائمة قيم مفصولة بفاصلة من الألوان أو عنوان URL أو الكلمة magic.

Gotchas

هناك مشكلتان في Houdini Props and Vals. الأول هو أنّه بعد تحديد السمة، لا يمكن تعديل سمة مسجّلة حالية، وستؤدي محاولة إعادة تسجيل سمة إلى ظهور خطأ يشير إلى أنّه سبق تحديدها.

ثانيًا، على عكس السمات العادية، لا يتم التحقق من صحة السمات المسجّلة عند تحليلها. بل يتم التحقّق من صحتها عند احتسابها. That means both that invalid values won't appear as invalid when inspecting the element's properties, and including an invalid property after a valid one won't fall back to the valid one; an invalid property will, however, fall back to the registered property's default.

إضافة حركة إلى الخصائص المخصّصة

توفّر الخاصية المخصّصة المسجّلة ميزة إضافية ممتعة تتجاوز التحقّق من النوع، وهي إمكانية تحريكها. في ما يلي مثال على صورة متحركة أساسية:

<script>
CSS.registerProperty({
  name: '--stop-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'blue',
});
</script>

<style>
button {
  --stop-color: red;
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}
</style>

عند تمرير مؤشر الماوس فوق الزر، سيتحول لونه من الأحمر إلى الأخضر. بدون تسجيل السمة، سينتقل اللون من لون إلى آخر، لأنّه بدون تسجيل السمة، لا يعرف المتصفّح ما يمكن توقّعه بين قيمة وأخرى، وبالتالي لا يمكنه ضمان إمكانية الانتقال بينها. يمكننا تطوير هذا المثال أكثر من خلال إضافة تأثيرات حركية إلى تدرّجات CSS. يمكن كتابة CSS التالية باستخدام السمة المسجّلة نفسها:

button {
  --stop-color: red;
  background: linear-gradient(var(--stop-color), black);
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}

سيؤدي ذلك إلى تحريك السمة المخصّصة التي تشكّل جزءًا من linear-gradient، وبالتالي تحريك التدرج الخطي. يمكنك الاطّلاع على Codepen أدناه لمشاهدة الرمز الكامل أثناء العمل واللعب به بنفسك.

الخاتمة

أصبحت Houdini متاحة للمتصفّحات، ومعها طرق جديدة تمامًا للعمل مع CSS وتوسيع نطاقها. مع توفّر Paint API الآن، بالإضافة إلى Custom Props and Vals، تتوسّع مجموعة أدواتنا الإبداعية، ما يتيح لنا تحديد سمات CSS المكتوبة واستخدامها لإنشاء تصاميم جديدة ومثيرة وتحريكها. هناك المزيد في الطريق أيضًا، في قائمة انتظار مشاكل Houdini حيث يمكنك تقديم الملاحظات والاطّلاع على الخطوات التالية لـ Houdini. تم إنشاء Houdini لتطوير ميزات تشرح "سحر" التصميم والتنسيق على الويب، لذا يمكنك الاستفادة من هذه الميزات السحرية.