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

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

Una Kravets

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

طبقة Houdini

يتيح Houdini استخدام المزيد من لغة CSS الدلالية باستخدام نموذج العناصر من النوع. يمكن للمطوّرين تحديد خصائص مخصّصة متقدّمة في CSS باستخدام البنية والقيم التلقائية والوراثة من خلال Properties and Values API.

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

فهم وحدات العمل في Houdini

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

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

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

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

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

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

لقطة شاشة لصفحة "وحدة العمل"
لقطة شاشة من الصفحة الرئيسية لموقع 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 من خلال نص برمجي أو استيراده مباشرةً، كما يمكنك فعل ذلك باستخدام إطار عمل أو أداة تجميع.

في ما يلي مثال على كيفية استخدام 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 الذي يتضمّن إرشادات المساهمة. يسرّنا الاطّلاع على أفكارك.