وصول تأثيرات فلاتر CSS إلى WebKit

الخلفية

كانت تأثيرات الفلاتر متوفّرة منذ فترة، ولكن تم تصميمها لتعمل بتنسيق SVG. لها إمكانات مذهلة في تطبيق تأثيرات مثل كثافة اللون، أو الالتواءات، أو التمويه على صورة قبل تركيبها وعرضها في المستند.

حسنًا، في عام 2009، قالت Mozilla أن رسومات موجّهة يمكن تغيير حجمها لم تكن كافية! وانتهى الأمر بهم إلى اتخاذ إجراءات أخرى باستخدام الفلاتر وسمحوا لها باستخدام محتوى HTML في الإصدار 3.5 من Firefox. اطّلِع على العرض التوضيحي الخالد لـ "بول أيرش" لفلاتر الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) على جهاز <video> قيد التشغيل. ومرة أخرى، يعمل فقط في فايرفوكس ولكن مع استمرار عمل النحل.

اليوم

لقد اجتمعنا حتى نهاية عام 2011، واجتهدنا في Adobe (بالإضافة إلى تطبيقات أخرى) من أجل إضافة هذه التقنية المذهلة إلى CSS. وأقصد على وجه التحديد الإصدار تأثيرات فلاتر CSS الذي بدأت مجموعة WebKit في تنفيذه.

يعني تفعيل الفلاتر مباشرةً في CSS أنّه يمكن لأي عنصر DOM تقريبًا الاستفادة منها. الصور، <video>، <canvas>، سمها ما شئت.

عرض توضيحي لتأثيرات فلاتر CSS

ملف

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

الدعم

Chrome 18.0.976.0 (إصدار Canary حاليًا)، Webkit كل ليلة

في ليالي Webkit، يمكن تطبيق الفلاتر على المحتوى المسرّع بالأجهزة ( مثل img { -webkit-transform: translateZ(0); }). في Chrome، لا تزال الفلاتر على المحتوى المسرّع قيد التنفيذ (استخدِم علامة --enable-accelerated-filters). يشمل ذلك السمة <video>، والتي يتم تسريعها تلقائيًا.