ماذا تعني وحدة الرسوم المتحركة للصور في CSS لصور WebP وGIF المتحركة الخاصة بك؟

نشرت W3C المسودة العامة الأولى لـ وحدة الرسوم المتحركة للصور في CSS المستوى 1، وهي مواصفات تقترح آليات للتحكم في عرض الصور المتحركة مثل GIF وWebP المتحركة وAVIF المتحركة. بالنسبة لمطوري الويب والمصممين الذين يستخدمون WebPS لإنشاء وتصدير الصور المتحركة، فإن فهم هذه المسودة هو مفتاح لتحضير أعمالك للمستقبل وضمان أن تبدو رسومك المتحركة رائعة عبر جميع المتصفحات.

ماذا تقترح وحدة الرسوم المتحركة للصور في CSS؟

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

• تحديد عدد مرات تكرار الرسوم المتحركة.
• التحكم في اتجاه التشغيل (عادي، عكسي، متناوب).
• تعيين وقت البدء أو التأخير قبل بدء الرسوم المتحركة.
• ربما إيقاف الرسوم المتحركة مؤقتًا أو كليًا باستخدام CSS.

على الرغم من أن المسودة لا تزال في مراحلها المبكرة (مسودة عمل عامة أولى)، إلا أنها تشير إلى تحول نحو معالجة الصور المتحركة كأصول وسائط يمكن التنبؤ بها بدلاً من صور GIF صندوقية سوداء.

كيف يؤثر هذا على WebP وGIF المتحركة؟

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

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

بالإضافة إلى ذلك، قد تقدم الوحدة تحسينات في الأداء. يمكن للمتصفحات التعامل بشكل أفضل مع الرسوم المتحركة غير المرئية على الشاشة (على سبيل المثال، عن طريق إيقافها مؤقتًا باستخدام CSS `image-animation: paused`)، مما يوفر طاقة المعالج والبطارية.

ماذا يجب على مستخدمي WebPS فعله الآن؟

نظرًا لأن المواصفات هي مسودة عمل عامة أولى، فهي لم تنفذ بعد في أي متصفح. ومع ذلك، يمكنك البدء في الاستعداد:

• احرص على تصدير ملفات نظيفة: تأكد من أن تصدير WebP وGIF المتحركة من WebPS يحتوي على بيانات وصفية مناسبة (عدد التكرارات، تأخير الإطارات، إلخ) كخيار احتياطي. ستعزز وحدة CSS ضوابط مستوى الملف، وليس استبدالها.
• ابق على اطلاع: تابع تقدم مواصفات W3C وأخبار تنفيذ المتصفح. تعمل شركات المتصفحات مثل WebKit (كما ظهر في إصدارات Safari Technology Preview الأخيرة) بنشاط على ميزات ذات صلة.
• جرب في WebPS: استخدم WebPS لتصدير تكوينات تكرار مختلفة واختبر سلوكها. عندما تصل وحدة CSS إلى المتصفحات، يمكنك تجاوز هذه الإعدادات بسهولة.

لماذا هذا مهم لتحرير الصور عبر الإنترنت؟

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

الخاتمة

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

تابعونا للحصول على المزيد من التحديثات مع نضوج المواصفات. في غضون ذلك، استمر في إنشاء رسوم متحركة رائعة باستخدام WebPS!