CSS Paint API

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

ما هو CSS Paint API؟

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

تسمح لك واجهة برمجة تطبيقات CSS Paint باستدعاء وظيفة paint() في المواقف التي يتم فيها العمل ، في الظروف العادية ، على سبيل المثال ، بقيمة معينة تصف صورة معينة. مثال شائع على ذلك هو خاصية background-image ، عند العمل يمكنك استخدام وظيفة url() لتمرير النظام رابطًا إلى ملف الصورة:

 area { background-image: url('assets/myimage.jpg'); } 

تتيح لك واجهة برمجة تطبيقات CSS Paint API ، بدلاً من وظيفة مماثلة ، وظيفة paint() ، وتمريرها ما يسمى ببرنامج العمل ، الموصوف بواسطة JavaScript. يمكن النظر إلى Vorklet على أنه جزء من الرمز الذي يسمح للمطور برسم أي شيء يريده برمجيًا. وبما أننا نتحدث عن JavaScript ، يمكن جعل الصورة ديناميكية. في حد ذاتها ، تشبه واجهة برمجة التطبيقات هذه واجهة برمجة تطبيقات HTML5 Canvas ، وسنتحدث الآن عن كيفية عمل كل شيء.

ميزات CSS Paint API

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

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

ماذا عن دالة CSS ذات التدرج المخروطي ؟ يمكن القول ، أنها لا تدعمها حتى الآن المتصفحات التي لا تحتوي على polyfill. يسمح لك استخدام API الجديد بإنشاء تدرجات مخروطية ، وضبط معلماتها ، والتي لا تختلف بشكل خاص عما هو موجود في المواصفات. كل هذا يعني أنه في الممارسة العملية ، باستخدام واجهة برمجة التطبيقات الجديدة ، يمكنك إنشاء polyfill الأصلي الخاص بك. وهذا رائع.

ضع في اعتبارك أن كل هذا جزء من مجموعة أكبر من الميزات المعروفة باسم CSS Houdini. إليك ما تقوله وثائق المشروع حوله: "إن هدف CSS-TAG Houdini Task Force (CSS Houdini) هو تطوير آليات مشتركة تكسر اللغز من تقنية تصميم صفحات الويب وبناء تصميماتها".

تبدو جيدة ، أليس كذلك؟ وفي الواقع ، تهدف هذه الآليات الجديدة إلى السماح للمطورين بتوسيع وظائف CSS نفسها ، مما يمنحهم أدوات تصفيف أفضل ودعمًا عبر المستعرضات والقدرة على إنشاء ملفات متعددة.

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

دعم CSS Paint API عن طريق المتصفحات

هل يمكنني استخدام CSS Paint API اليوم؟ يمكننا إعطاء إجابة إيجابية على هذا السؤال ، على الرغم من أنه يجب ملاحظة أنه بعيدًا عن جميع المتصفحات التي تدعم هذه التقنية. للحصول على معلومات الدعم لواجهة برمجة التطبيقات هذه ، يمكنك استخدام مورد caniuse.com .


دعم واجهة برمجة تطبيقات CSS Paint بواسطة متصفحات مختلفة (يوليو 2018)

كما ترى ، فإن واجهة برمجة التطبيقات هذه تدعم Chrome فقط حتى الآن. ولكن كن على هذا النحو ، فلنتحدث عن كيفية استخدامه. سنقوم بتغطية بنيات البرامج اللازمة لجعل واجهة برمجة التطبيقات الجديدة تعمل. يتضمن ذلك ميزات CSS الجديدة وبعض آليات JavaScript الحديثة إلى حد ما. سيتم تقسيم مثالنا إلى ثلاث خطوات.

الخطوة رقم 1: CSS

تذكر أنه من أجل إنشاء صورة باستخدام CSS Paint API ، فإن الأدوات هي أجزاء من كود JS. لذلك ، بالنسبة للمبتدئين ، نحتاج إلى إعطاء اسم العمل واسمه في CSS. awesomePattern نسميها awesomePattern . ونتيجة لذلك ، سيبدو CSS كما يلي:

 section { background-image: url('fallback.png'); background-image: paint(awesomePattern); }; 

تم الانتهاء من الاستعدادات الأولية ، ولكن حتى يصبح نموذجنا جاهزًا ، لن ينجح كل هذا.

الخطوة رقم 2: جافا سكريبت

نحتاج الآن إلى وصف مجموعة العمل باستخدام JS. يظهر هنا كيف يتم تحميل برنامج نصي آخر في البرنامج النصي الرئيسي الذي ينفذ الوظيفة التي نحتاجها.

 CSS.paintWorklet.addModule('patternWorklet.js'); 

في هذه المرحلة ، مرة أخرى ، لا يحدث شيء ، لأن الأكثر إثارة للاهتمام مخفي في ملف patternWorklet.js .

في ملف patternWorklet.js نحتاج إلى تسجيل فئة vorklet:

 registerPaint('awesomePattern', Shape); 

هنا نطلق على وظيفة registerPaint() وننقلها إلى ما نعتبره مجموعة عمل ، في هذه الحالة awesomePattern . بالإضافة إلى ذلك ، نقوم بتمرير هذه الوظيفة رابطًا للفئة التي سنكتبها ، في هذه الحالة ، Shape . يجب إضافة هذا الأمر بعد إعلان الفئة المقابلة. عند الإعلان عن الفئات واستخدامها ، لا يمكنك الاعتماد على شيء مثل آلية رفع تعريفات الوظائف. قبل أن تتمكن من استخدام فئة ، يجب أن تعلن عنها.

بعد ذلك ، سنستخدم البنية لإعلان فئات ECMAScript 2015 وكتابة فصل يرسم صورة الخلفية. نظرًا لأن هذه الفئة مسجلة الآن كفئة من الطبقة العاملة ، يمكننا استخدام بعض الآليات الخاصة التي ستكون متاحة تلقائيًا فيها.

 class Shape { paint(ctx, geom, properties) {   ctx.strokeStyle = 'white';   ctx.lineWidth = 4;   ctx.beginPath();   ctx.arc( 200, 200, 50, 0, 2*Math.PI);   ctx.stroke();   ctx.closePath(); } } 

يحتوي رد الاتصال paint() على معلمات ctx و geom و properties . المعلمة ctx هي نفسها سياق العرض الثنائي الأبعاد الذي يمكن الحصول عليه من <canvas> . حسنًا ، إنه تقريبًا نفس الشيء. الحقيقة هي أن <canvas> يسمح لك بقراءة بيانات البكسل ، لكن CSS Paint API لا تسمح بذلك. على الرغم من الاختلافات ، باستخدام ctx ، يمكننا استخدام نفس أساليب إخراج الرسومات التي يتم استخدامها عند العمل مع <canvas> . في هذا المثال ، باستخدام الدالة arc() ، نرسم دائرة.

أول قيمتين تم تمريرهما إلى دالة arc() هما الإحداثيات X و Y لمركز الدائرة ، بالبكسل ، بالنسبة إلى الأصل الموجود في الزاوية اليسرى العليا للعنصر. ومع ذلك ، أريد أن تكون الدائرة في وسط العنصر. لحل هذه المشكلة ، فإن معلمة geom مفيدة لنا. يتيح الوصول إلى كائن PaintSize ، وهو وصف لإعدادات الصورة. على وجه الخصوص ، بالإشارة إلى ذلك ، يمكننا قراءة معلمات width height ، وهذا بالضبط ما نحتاجه لتوسيط الدائرة.

نتيجة لذلك ، نأتي إلى هذا الرمز:

 class Shape { paint(ctx, geom, properties) {     let x = geom.width/2;   let y = geom.height/2;   ctx.strokeStyle = 'white';   ctx.lineWidth = 4;   ctx.beginPath();   ctx.arc(x, y, 50, 0, 2*Math.PI);   ctx.stroke();   ctx.closePath();   } } registerPaint('awesomePattern', Shape); 

يمكنك مشاهدة نسخة العمل من المثال على CodePen . بالمعنى الدقيق للكلمة ، هذا ما يخرجه هذا الرمز.


تم إنشاء الدائرة باستخدام واجهات برمجة تطبيقات CSS Paint

كل هذا جيد ، لكن مثالنا بسيط للغاية. دعونا ، بدلاً من الدائرة المعتادة ، نرسم شيئًا أكثر إثارة للاهتمام. على سبيل المثال - مثل علامة النجمة - css-tricks.com شعار الموقع.


تم إنشاء علامة النجمة باستخدام واجهات برمجة تطبيقات CSS Paint

هنا مشروع CodePen الذي يسمح لك بالقيام بذلك.

عندما تنظر إلى كود JS لهذا المشروع ، انتبه إلى طريقة drawStar() والوظائف العديدة المستخدمة عند العمل مع <canvas> .

الخطوة رقم 3: خصائص CSS المخصصة

باستخدام التكنولوجيا الجديدة ، يمكننا الذهاب أبعد بكثير من رسم الدوائر والنجوم. يمكننا إلقاء نظرة على الميزات القوية لخصائص CSS المخصصة (المتغيرات). بالمناسبة ، هم ، حتى لوحدهم ، مثيرون للاهتمام للغاية. في حالتنا ، تبين أنها مفيدة بشكل خاص.

افترض أننا نريد أن نتمكن من تغيير حجم أو لون شعار تم إنشاؤه مسبقًا. يمكن وضع هذه المعلمات في رمز CSS في شكل خصائص مخصصة ، ثم استخدامها في البرنامج من خلال المعلمة الثالثة ، التي تم تمريرها إلى رد الاتصال paint() . حول معلمة properties .

نضيف --star-scale إلى رمز CSS الخاص بنا ، والذي يهدف إلى التحكم في تغيير حجم الصورة ، وخاصية --star-color ، والتي يتم استخدامها لتنظيم تغيير لون الشعار مباشرة في CSS. إليك ما حصلنا عليه:

 section { --star-scale: 2; --star-color: hsla(200, 50%, 50%, 1); background-image: paint(awesomePattern) }; 

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

 static get inputProperties() { return ['--star-scale','--star-color']; } 

الآن يمكنك العمل معهم في طريقة paint() :

 const size = parseInt(properties.get('--shape-size').toString()); 

بطبيعة الحال ، يمكن استخدام القيم التي تم الحصول عليها في الكود المسؤول عن تكوين الصورة. هذا يؤدي إلى حقيقة أنه إذا قمنا ، في كود CSS ، بتغيير قيمة --star-scale أو --start-color ، فسيؤثر ذلك على الفور على كيفية ظهور الصورة.


تأثير خصائص CSS المخصصة على الصورة النهائية

يتم تنفيذ هذه الوظيفة في نفس مشروع CodePen الذي ذكرناه أعلاه.

بالمناسبة ، تجدر الإشارة إلى أنه عند استخدام واجهة برمجة التطبيقات الجديدة ، فإن جميع خصائص CSS المعتادة المتعلقة بتعيين خلفية العناصر ، مثل background-size background-repeat ، ستعمل بنفس الطريقة كما كانت من قبل. لم تفقد أهميتها.

الملخص

إن CSS Paint API هي تقنية قوية للغاية لا تقتصر قدراتها على إنشاء صور خلفية.

تخيل أن العنصر يجب أن يكون له حد خاص ، على سبيل المثال ، حدود غير مرئية بالكامل أو مزدوجة. ربما لتحقيق مثل هذه التأثيرات ، عادة ما تستخدم العناصر الزائفة ::before أو ::after ، أو ربما box-shadow تم تكوينه خصيصًا. يمكن تنفيذ الحدود (وأكثر من ذلك بكثير) باستخدام CSS Paint API وخاصية border-image .

تجمع واجهة برمجة تطبيقات CSS Paint API معًا الكثير من الميزات الرائعة ، مثل الأدوات وفئات ECMAScript 2015 وميزات <canvas> . بالإضافة إلى ذلك ، فإنه يوفر للمطور برامج إدارة الصور المستندة إلى JavaScript. على سبيل المثال ، باستخدام آلية الحدث ، يمكنك تنظيم تحديث الخصائص المخصصة ، مما يعني أن الصورة نفسها ، كما هو موضح هنا ، على سبيل المثال ، حيث يبدأ حدث click عملية تحديث الخصائص في وظيفة requestAnimationFrame ، والتي تتيح لك إنشاء صورة متحركة في كل مرة ينقر فيها المستخدم على الزر. علاوة على ذلك ، حتى إحداثيات مؤشر الماوس عند النقر تؤخذ بعين الاعتبار.

للوهلة الأولى ، قد يبدو كل هذا مربكًا بعض الشيء ، ولكن دعونا نلقي نظرة على بعض الأجزاء الأخرى من مشروع هوديني الذي قد نلتقي به:

• تسمح واجهة برمجة تطبيقات تخطيط CSS للمطور بعمل شيء ما مثل display: layout('myCustomLayout') . مثال نموذجي هو إنشاء تخطيطاتك الخاصة بأسلوب البناء ، ولكن نطاق استخدام هذه الميزة أوسع بكثير.
• تسمح لك خصائص CSS API وقيمها بتعيين أنواع الخصائص المخصصة.
• تدفع CSS Animation Worklet API عمليات معالجة الرسوم المتحركة إلى ما بعد البث الرئيسي ، والذي يجب أن يترجم إلى رسوم متحركة سلسة تمامًا.

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

أعزائي القراء! ما هي مجالات تطبيق CSS Paint API التي تجدها أكثر إثارة للاهتمام؟