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

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

Sam Richard

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

ما هو هوديني؟

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

سمات CSS وقيمها من واجهة برمجة التطبيقات (المستوى 1)

مستوى واجهة برمجة التطبيقات لخصائص وقيَم CSS 1 ("هوديني بروس" Vals) تتيح لنا تنظيم خصائصنا المخصصة. هذا هو المستوى الحالي الموقف عند استخدام الخصائص المخصصة:

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

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

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

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

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

الخاتمة

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

صورة فوتوغرافية بواسطة مايك جونيتز في إلغاء البداية