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

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

سام ريتشارد

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

ما هي Houdini؟

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

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

تتيح لنا خصائص CSS والقيم المستوى 1 لواجهة برمجة التطبيقات (Houdini Props و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 و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، ما يؤدي إلى تحريك التدرج الخطي. تحقق من Glitch أدناه لرؤية التعليمات البرمجية الكاملة قيد التنفيذ وجربها بنفسك.

الخلاصة

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

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