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

ما عليك سوى اتّباع بضع نقرات لتحسين خدمة CSS الخاصة بك باستخدام أدوات طلاء Houdini.

أونا كرافيتس

CSS Houdini هو مصطلح جامع يصف سلسلة من واجهات برمجة التطبيقات (API) للمتصفّحات منخفضة المستوى، والتي تمنح المطورين مزيدًا من التحكّم والقدرة على التحكّم في الأنماط التي يكتبونها.

طبقة هوديني

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

وهي تقدّم أيضًا دوال الرسم والتخطيط والرسوم المتحركة، التي تفتح عالمًا من الاحتمالات، من خلال تسهيل الأمر على المؤلفين للتأثير في تصميم وتخطيط محرك العرض في المتصفح.

فهم وظيفتَي هوديني

دوال Houdini هي تعليمات خاصة بالمتصفّح تشغِّل سلسلة التعليمات الرئيسية ويمكن طلبها عند الحاجة. تتيح لك Worklets كتابة لغة CSS معيارية لإنجاز مهام محددة وتتطلب سطرًا واحدًا من JavaScript لاستيراده وتسجيله. يتم تسجيل وظائف Houdini في تطبيقك، تمامًا مثل مشغِّلي الخدمات لنمط CSS، وبعد تسجيلها يمكن استخدامها في CSS حسب الاسم.

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

تطبيق الميزات الخاصة بك باستخدام CSS Painting API

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

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

يستخدم المثال أعلاه دالة Paint نفسها مع وسيطات مختلفة (راجِع الرمز أدناه) لإنجاز هذه النتيجة. عرض توضيحي عن Glitch 
.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.

دعم Caniuse
تتوفر واجهة CSS Painting API حاليًا على المتصفّحات المستندة إلى Chromium.

ولكن حتى في حال عدم توفّر الدعم الكامل للمتصفّح، سيظلّ بإمكانك التعبير عن الإبداع باستخدام واجهة Houdini Paint API التي تتطلّب استخدام الأنماط والعمل على جميع المتصفّحات الحديثة باستخدام CSS Paint Polyfill. ولعرض بعض أوجه التنفيذ الفريدة، بالإضافة إلى توفير مكتبة مرجعية ومكتبة مهام، أنشأ فريق عملي موقع houdini.how.

Houdini.how

لقطة شاشة لصفحة Worklet
لقطة شاشة من صفحة 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>");

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

لتسجيل السمات المخصّصة اختياريًا، أضِف أيضًا ملف 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)

تثبيت Worklet من npm:

npm install <package-name>
npm install css-paint-polyfill

لا يؤدي استيراد هذه الحزمة إلى إدخال مُشغلات الطلاء تلقائيًا. لتثبيت العمل المصغَّر، ستحتاج إلى إنشاء عنوان URL يؤدّي إلى ملف Worklet.js الخاص بالحزمة وتسجيله. يمكنك القيام بذلك باستخدام:

CSS.paintWorklet.addModule(..file-path/worklet.js)

يمكن العثور على اسم حزمة npm والرابط على كل بطاقة وظيفة صغيرة.

يجب أيضًا تضمين محتوى CSS Paint Polyfill من خلال نص برمجي أو استيراده مباشرةً، كما تفعل مع إطار عمل أو أداة حزم.

فيما يلي مثال على كيفية استخدام Houdini مع رمز 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 الذي يحتوي على إرشادات حول المساهمات. تسرّنا معرفة ما توصّلنا إليه.