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

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

Sam Richard

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

ما هو Houdini؟

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

المستوى 1 من واجهة برمجة التطبيقات لخصائص CSS وقيمها

يتيح لنا المستوى 1 من واجهة برمجة التطبيقات CSS Properties and Values API (Houdini Props and Vals) إنشاء بنية لخصائصنا المخصّصة. في ما يلي الخطوات التي يجب اتّباعها في الحال الحالية عند استخدام السمات المخصّصة:

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

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

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

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

تم الآن تسجيل السمة المخصّصة --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. هناك عدد من ال options الصالحة التي تتراوح بين الأرقام والألوان وأنواع <custom-ident>. يمكن أيضًا تعديل هذه البنى باستخدام القيم التالية:

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

الأخطاء

هناك خطأان في عناصر Houdini و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، وبالتالي إضافة تأثير متحركة إلى التدرّج اللوني الخطي. يمكنك الاطّلاع على Glitch أدناه للاطّلاع على التعليمات البرمجية الكاملة في العمل واللعب بها بنفسك.

الخاتمة

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

الصورة مقدمة من Maik Jonietz على Unsplash