يمكنك تعزيز أداء خدمة مقارنة الأسعار (CSS) باستخدام أدوات الطلاء المصغّرة من هوديني ببضع نقرات فقط.
CSS Houdini هو مصطلح شامل يصف مجموعة من واجهات برمجة التطبيقات المنخفضة المستوى للمتصفّحات التي تمنح المطوّرين مزيدًا من التحكّم والقدرة على النماذج التي يكتبونها.
يتيح Houdini استخدام المزيد من لغة CSS الدلالية باستخدام نموذج العنصر المُحدَّد. يمكن للمطوّرين تحديد خصائص CSS المخصّصة المتقدّمة باستخدام البنية والقيم التلقائية والتوريث من خلال Properties andValue API.
وتوفّر هذه الميزة أيضًا وحدات عمل للرسم والتنسيق والحركة، ما يفتح أمام المؤلفين مزيدًا من الخيارات من خلال تسهيل ربطهم بعملية التصميم والتنسيق في محرّك عرض المتصفّح.
فهم وحدات العمل في Houdini
مهام هوديني هي تعليمات خاصة بالمتصفح تعمل خارج سلسلة التعليمات الرئيسية ويمكن استدعاؤها عند الحاجة. تتيح لك Worklet كتابة لغة CSS معيارية لإنجاز مهام محدّدة، وتتطلب سطرًا واحدًا من JavaScript للاستيراد والتسجيل. تمامًا مثل مهام الخدمة لأسلوب CSS، يتم تسجيل وحدات عمل Houdini في تطبيقك، وبعد التسجيل، يمكن استخدامها في CSS بالاسم.
كتابة ملف وحدات العمل تسجيل وحدة العمل (CSS.paintWorklet.addModule(workletURL)
) استخدام وحدات العمل
(background: paint(confetti)
)
تنفيذ ميزاتك الخاصة باستخدام واجهة برمجة التطبيقات CSS Painting API
CSS Painting API هو مثال على وحدة عمل مماثلة (وحدة عمل Paint)، وتتيح للمطوّرين تحديد دوال رسم مخصّصة تشبه لوحة الرسم ويمكن استخدامها مباشرةً في CSS كخلفيات وحدود وأقنعة وغير ذلك. هناك عالم كامل من الإمكانيات حول كيفية استخدام CSS Paint في واجهات المستخدم الخاصة بك.
على سبيل المثال، بدلاً من انتظار المتصفّح لتنفيذ ميزة الحدود المائلة، يمكنك كتابة وحدة عمل Paint الخاصة بك أو استخدام وحدة عمل منشورة حالية. بعد ذلك، بدلاً من استخدام border-radius ، يمكنك تطبيق هذه الوظيفة على الحدود والقطع.
.angled {
--corner-radius: 15 0 0 0;
--paint-color: #6200ee;
--stroke-weight: 0;
/* Mask every angled button with fill mode */
-webkit-mask: paint(angled-corners, filled);
}
.outline {
--stroke-weight: 1;
/* Paint outline */
border-image: paint(angled-corners, outlined) 0 fill !important;
}
تشكّل CSS Painting API حاليًا إحدى واجهات برمجة تطبيقات Houdini الأفضل توافقًا، وتكون مواصفاتها مقترَحةً من W3C. وهي مفعّلة حاليًا في جميع المتصفّحات المستندة إلى Chromium، ومتوفّرة جزئيًا في Safari، وقيد المراجعة في Firefox.
ولكن حتى في حال عدم توفّر واجهة برمجة تطبيقات كاملة للمتصفّح، سيظل بإمكانك إنشاء تصميمات مبتكرة باستخدام Houdini Paint API وتطبيق أنماطك على جميع المتصفّحات الحديثة باستخدام CSS Paint Polyfill. ولعرض بعض عمليات التنفيذ الفريدة، بالإضافة إلى توفير مكتبة مراجع ووحدات عمل، أنشأ فريقي houdini.how.
Houdini.how
Houdini.how هي مكتبة ومرجع لعمليّات Houdini الصغيرة ومواردها. ويقدّم الدليل كل ما تحتاج إلى معرفته عن CSS Houdini: إتاحة المتصفّح، و نظرة عامة على واجهات برمجة التطبيقات المختلفة، ومعلومات عن الاستخدام ، ومراجع إضافية، وعيّنات من وحدات عمل الرسم المباشر تستند كل عيّنة على Houdini.how إلى واجهة برمجة التطبيقات CSS Paint API، ما يعني أنّه يمكن استخدام كل عيّنة على جميع المتصفحات الحديثة. ننصحك بتجربة ذلك.
استخدام Houdini
يجب تشغيل وحدات عمل Houdini إما من خلال خادم على الجهاز، أو على HTTPS في مرحلة الإنتاج. لاستخدام وحدات عمل Houdini، عليك تثبيتها على الجهاز أو استخدام شبكة توصيل محتوى (CDN) مثل unpkg لعرض الملفات. ستحتاج بعد ذلك إلى تسجيل الواجب المحلي.
هناك بضع طرق لتضمين وحدات عمل عرض Houdini.how في مشاريع الويب الخاصة بك. يمكن استخدامها إما عبر شبكة توصيل المحتوى (CDN) في وضع النماذج الأولية، أو يمكنك إدارة المهام الصغيرة بنفسك باستخدام وحدات npm. وفي كلتا الحالتَين، عليك أيضًا تضمين CSS Paint Polyfill لضمان توافقها مع جميع المتصفّحات.
1. إنشاء النماذج الأولية باستخدام شبكة توصيل المحتوى (CDN)
عند التسجيل من unpkg، يمكنك الربط مباشرةً بملف worklet.js بدون الحاجة إلى تثبيت التطبيق المصغّر محليًا. سيحلّ Unpkg worklet.js كنصّ برمجي رئيسي، أو يمكنك تحديده بنفسك. لن يتسبب Unpkg في حدوث مشاكل متعلّقة بـ CORS، لأنّه يتم عرضه عبر بروتوكول HTTPS.
CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");
تجدر الإشارة إلى أنّ هذا لا يُسجِّل الخصائص المخصصة للبنية والقيم الاحتياطية. بدلاً من ذلك، تحتوي كلّ منها على قيم احتياطية مضمّنة في وحدة العمل.
لتسجيل السمات المخصّصة اختياريًا، أدرِج ملف properties.js أيضًا.
<script src="https://unpkg.com/<package-name>/properties.js"></script>
لتضمين ملف CSS Paint Polyfill باستخدام أمر unpkg:
<script src="https://unpkg.com/css-paint-polyfill"></script>
2. إدارة وحدات العمل الصغيرة من خلال NPM
ثبِّت تطبيقك المصغّر من npm:
npm install <package-name>
npm install css-paint-polyfill
لا يؤدي استيراد هذه الحزمة إلى إدراج وحدة عمل الطلاء تلقائيًا. لتثبيت الأداة المصغّرة، ستحتاج إلى إنشاء عنوان URL يُحيل إلى worklet.js في الحزمة، وتسجيله. ويمكنك إجراء ذلك باستخدام:
CSS.paintWorklet.addModule(..file-path/worklet.js)
يمكن العثور على اسم حزمة npm ورابطها في كل بطاقة أداة عمل.
ستحتاج أيضًا إلى تضمين CSS Paint Polyfill من خلال نص برمجي أو استيراده مباشرةً، كما يمكنك فعل ذلك باستخدام إطار عمل أو أداة تجميع.
فيما يلي مثال على كيفية استخدام هوديني مع حشو الطلاء في برامج التجميع الحديثة:
import 'css-paint-polyfill';
import '<package-name>/properties.js'; // optionally register properties
import workletURL from 'url:<package-name>/worklet.js';
CSS.paintWorklet.addModule(workletURL);
المساهمة
بعد أن جرّبت بعض نماذج Houdini، حان دورك لمشاركة نماذج من تصميمك. لا يستضيف موقع Houdini.how أيّ تطبيقات صغيرة بنفسه، بل يعرض بدلاً من ذلك أعمال المنتدى. إذا كان у вас есть قطعة عمل أو مرجع تريد إرسالهما، يمكنك الاطّلاع على مستودع GitHub الذي يتضمّن إرشادات المساهمة. يسرّنا الاطّلاع على أفكارك.