واجهة CSS Paint: وحدات Worklets
أنشئ صور خلفية وحدود CSS مخصصة برمجيًا باستخدام Paint Worklets.
واجهة CSS Paint: وحدات Worklets درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
ما هي CSS Paint API؟
تُعد CSS Paint API إحدى ميزات CSS Houdini التي تتيح لكم كتابة دوال Worklet في JavaScript لإنشاء الخلفيات والحدود والأقنعة برمجيًا، مما يوسّع فعليًا ما يمكن لـ CSS background-image عرضه.
بنية Paint Worklet
إن Paint Worklet عبارة عن ملف JavaScript يعمل في نطاق Worklet منفصل (وليس في المسار الرئيسي). ويسجل رسام CSS مخصصًا يمكن استخدامه كقيمة CSS.
كتابة Paint Worklet
يطبّق صنف Worklet الطريقة paint():
<div class="grid"></div>
تسجيل Worklet
حمّلوا Worklet من JavaScript الرئيسي:
<div class="grid"></div>
استخدام الرسام في CSS
أشيروا إلى اسم الرسام المسجل في أي خاصية تقبل صورة:
<div class="grid"></div>
استقبال الخصائص المخصصة في CSS
يمكن للرسامين قراءة الخصائص المخصصة في CSS عبر تعريفها كخصائص إدخال:
<div class="swatch"></div>
واجهة شبيهة بـ canvas
المعامل ctx هو PaintRenderingContext2D، وهو إصدار مقيّد من سياق Canvas 2D. وتستخدمون طرائق مألوفة مثل: fillRect وarc وbezierCurveTo وغيرها.
حالات الاستخدام
يتيح CSS Paint API ما يلي:
- إنشاء خلفيات هندسية معقدة دون استخدام SVG
- إنشاء خلفيات تعتمد على بيانات متغيرة، مثل أشرطة التقدم والرسوم البيانية للنشاط
- إنشاء تأثيرات تموّج على الأزرار اعتمادًا على الخصائص المخصصة
- إنشاء تأثيرات معقدة للحدود، مثل الحدود المتقطعة والمخططة
- إنشاء فواصل متموجة وأشكال عضوية
أداء Paint Worklet
تعمل Paint Worklets خارج الخيط الرئيسي، ضمن سياق worklet منفصل، ولا تعيد الرسم إلا عند تغيّر الخصائص المخصصة لـ CSS. وهذا أكثر كفاءة من الرسم المستند إلى Canvas، الذي يعمل على الخيط الرئيسي.
دعم المتصفحات
يُدعم CSS Paint API في Chrome 65+ وEdge 79+. لا يدعمه Firefox وSafari حتى عام 2024. استخدمه كتحسين تدريجي.
@supports للتدهور التدريجي
وفّر دائمًا بديلًا احتياطيًا، واستخدم @supports لتطبيق Paint Worklet فقط عندما يكون مدعومًا:
<div class="element"></div>
تحقق سريع
ما الطريقة التي تطبقها فئة CSS Paint Worklet لتنفيذ الرسم؟
خلاصة
يتيح CSS Paint API لـ JavaScript worklets إنشاء صور CSS برمجيًا. اكتب فئة تحتوي على الطريقة paint()، وسجّلها باستخدام registerPaint()، وحمّلها باستخدام CSS.paintWorklet.addModule()، ثم استخدمها بصيغة background: paint(name). يستطيع الرسامون قراءة الخصائص المخصصة لـ CSS لإنشاء مرئيات تعتمد على البيانات. وفّر بدائل احتياطية باستخدام @supports.
الأسئلة الشائعة
هل درس «واجهة CSS Paint: وحدات Worklets» مجاني؟
نعم — نص درس «واجهة CSS Paint: وحدات Worklets» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «واجهة CSS Paint: وحدات Worklets»؟
أنشئ صور خلفية وحدود CSS مخصصة برمجيًا باستخدام Paint Worklets. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «واجهة CSS Paint: وحدات Worklets»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- نموذج الكائنات المكتوبة في CSS (OM)
- واجهة خصائص CSS وقيمها (@property)
- واجهة CSS Paint: وحدات Worklets
- واجهة CSS Layout ونطاقها