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

bookmark_border تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

Sam Richard

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

ما هو Houdini؟

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

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

تتيح لنا واجهة برمجة التطبيقات 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.

المشاكل الشائعة

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

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

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

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

<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، نوسّع الآن مجموعة أدواتنا الإبداعية من خلال إضافة ميزة "الخصائص والقيم المخصّصة"، ما يتيح لنا تحديد خصائص CSS مكتوبة واستخدامها لإنشاء تصاميم جديدة ومثيرة وتحريكها. سنطرح المزيد من الميزات قريبًا في قائمة انتظار مشاكل Houdini حيث يمكنك تقديم ملاحظاتك والاطّلاع على الميزات التالية التي سنطرحها في Houdini. تم إنشاء Houdini لتطوير ميزات تشرح "سحر" التصميم والتنسيق على الويب، لذا ننصحك بتجربتها والاستفادة منها.

صورة من مايك جونيتز على Unsplash