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

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

Sam Richard

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

ما هو Houdini؟

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

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

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

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

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

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

في هذه الحالة، لا يعلم البرنامج أنّ عنوان URL ليس قيمة ملفتة للنظر. عند استخدامها، يتم الرجوع إلى القيم التلقائية (أسود لـ 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 أدناه للاطّلاع على التعليمات البرمجية الكاملة في العمل والتجربة بنفسك.

الخاتمة

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

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