وظائف عرض محتوى عبر المتصفحات وHoudini.how

يمكنك تعزيز أداء خدمة مقارنة الأسعار (CSS) باستخدام أدوات الطلاء المصغّرة من هوديني ببضع نقرات فقط.

Una Kravets

CSS Houdini هو مصطلح شامل سلسلة من واجهات برمجة التطبيقات ذات المستوى المنخفض في المتصفّح والتي توفّر للمطوّرين مزيدًا من التحكّم والإمكانيات الأنماط التي يكتبونها.

يتيح هوديني استخدام لغة CSS أكثر دلالية باستخدام العنصر النوعي النموذج: يمكن للمطوّرين تحديد خصائص CSS المخصصة المتقدمة بالبنية والقيم التلقائية والتوريث من خلال واجهة برمجة التطبيقات للخصائص والقيم:

يقدم أيضًا الطلاء والتخطيط والرسوم المتحركة worklets، والتي تفتح عالم من الاحتمالات، من خلال تسهيل إشراك المؤلفين في عملية التصميم والتخطيط لمحرك العرض في المتصفح.

فهم معاصر "هوديني"

مهام هوديني هي تعليمات متصفّح تعمل خارج سلسلة التعليمات الرئيسية ويمكن استدعاؤها عند احتاجت. تتيح لك Worklet كتابة لغة CSS معيارية لإنجاز مهام محدّدة، وتتطلب لغة CSS واحدة سطر JavaScript للاستيراد والتسجيل. مثل العاملين في مجال الخدمات لأسلوب CSS، حيث تعمل وظائف هوديني الصغيرة تسجيل في طلبك، وبعد التسجيل يمكن استخدامه في خدمة CSS حسب الاسم.

كتابة ملف العمل المصغّر تسجيل وحدة العمل (CSS.paintWorklet.addModule(workletURL)) استخدام الوظيفة المصغّرة (background: paint(confetti))

تنفيذ الميزات الخاصة بك باستخدام واجهة برمجة تطبيقات الطلاء في CSS

تُعد CSS Painting API مثالاً على Worklet (الوظائف الصغيرة) وتمكن المطورين من تحديد دوال الرسم المخصصة التي تشبه لوحة الرسم يمكن استخدامها مباشرةً في CSS كخلفيات وحدود وأقنعة وغير ذلك. هناك عالم كامل من حول كيفية استخدام CSS Paint في واجهات المستخدم الخاصة بك.

على سبيل المثال، بدلاً من انتظار المتصفح لتنفيذ ميزة حدود الزاوية، يمكنك كتابة أو استخدام وظيفة صغيرة منشورة حاليًا. ثم، بدلاً من استخدام نصف قطر الحد وتطبيق هذا العمل على الحدود والاقتصاص.

.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 هي مكتبة ومرجع لمهام "هوديني" ومراجعه. أُنشأها جون هنتر، الذي كان متخصصًا كل ما تحتاج إلى معرفته عن CSS هوديني: دعم المتصفح، نظرة عامة على واجهات برمجة التطبيقات المتنوعة والاستخدام والمعلومات والموارد الإضافية وأداة الرسم المباشر النماذج وتعتمد كل عينة على Houdini.how على واجهة برمجة تطبيقات "الطلاء" في CSS، ما يعني يعمل كل واحد منها على جميع المتصفحات الحديثة. جرِّبها بانتظام.

استخدام "هوديني"

يجب تشغيل وظائف هوديني الصغيرة إما عبر خادم محلي أو على HTTPS في الإنتاج. من أجل للعمل باستخدام تطبيق هوديني الصغير، فستحتاج إما إلى تثبيته محليًا أو استخدام عرض المحتوى (CDN) مثل unpkg لعرض الملفات. ستحتاج بعد ذلك إلى تسجيل الوظيفة محليًا.

هناك عدة طرق لتضمين أدوات عرض هوديني.how في مشروعات الويب لديك. يمكنه إما عبر شبكة توصيل محتوى (CDN) في القدرة على إنشاء نماذج أولية، أو يمكنك إدارة المهام الصغيرة بنفسك باستخدام وحدات npm. وفي كلتا الحالتين، ستحتاج أيضًا إلى تضمين تطبيق Paint Polyfill في CSS لضمان عبر المتصفحات.

1. إنشاء نماذج أولية باستخدام شبكة توصيل محتوى

عند التسجيل من ملف unpkg، يمكنك الربط مباشرةً بملف worklet.js بدون الحاجة إلى محلي لتثبيت الوظيفة الصغيرة. سيتم تحليل Unpkg إلى worklet.js كنص برمجي رئيسي، أو يمكنك تحديده نفسك. لن يتسبب Unpkg في حدوث مشاكل في CORS، لأنه يتم عرضه عبر HTTPS.

CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");

تجدر الإشارة إلى أنّ هذا لا يُسجِّل الخصائص المخصصة للبنية والقيم الاحتياطية. بدلاً من ذلك، ولكل منها قيم احتياطية مضمنة في الوظيفة الصغيرة.

لتسجيل الخصائص المخصّصة اختياريًا، أدرِج ملف Property.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.how أي وظائف مصغّرة، لكنّها تعرض بدلاً من ذلك أعمال أفراد المنتدى. في حال حذف لديك عمل صغير أو مورد تريد إرساله، اطلع على github المستودع مع إرشادات المساهمة. تهمّنا معرفة ما توصّلت إليه.