التوافق مع التعديلات في منتصف العام 2021: الثغرات الأمنية في جميع المجالات

تم إطلاق تحديث منتصف العام على Compat 2021 للحدّ من مشاكل التوافق مع المتصفّحات في خمسة مجالات تركيز رئيسية، وهي: CSS flexbox وCSS Grid والموضع: ثابت ونسبة العرض إلى الارتفاع وعمليات تحويل CSS.

فيليب ياغنشتيت

ماريكو كوساكا

حان وقت تحديث برنامج Compat 2021 في منتصف العام للحدّ من مشاكل التوافق مع المتصفّحات في خمسة مجالات تركيز رئيسية. لمزيد من التفاصيل حول عمل #compat2021 والطريقة التي حدّدناها للمجالات التي يجب التركيز عليها، يمكنك الاطّلاع على إشعار شهر آذار (مارس).

ستشمل التحسينات التي تم إجراؤها على Chromium والتي تمت مناقشتها في هذه المشاركة كل من Chrome وEdge وجميع المتصفحات المستندة إلى Chromium.

الطريقة التي نقيس بها مستوى التقدّم

يمكنك الاطّلاع على لوحة بيانات Compat 2021 للاطّلاع على Web-platform-tests للاطّلاع على عدد الاختبارات الناجحة والرسوم البيانية الرائجة للمتصفّحات المختلفة.

إنّ تحديد عدد بسيط من "الاختبارات التي تم اجتيازها" لا يُطلعك على كامل المسألة مع توافُق المتصفّح، إلا أنّه يشكّل إحدى الإشارات التي نستخدمها لمعرفة مدى تقدّم جهودنا. تعني الاختلافات الأقل بين المتصفحات في نتائج الاختبار زيادة إمكانية التشغيل البيني لميزة الويب على مستوى متصفّحات متعددة.

المربع المرن في CSS

شهدت محركات المتصفّح الثلاثة تحسينات على Flexbox.

شحن الإصدار 14.1 من Safari إلى السمة gap للّعبة المرنة . إنّ السمة gap هي طريقة سهلة لضبط المسافة بين العناصر. غالبًا ما تُستخدم هذه السمة في تنسيق الشبكة، وكان الدعم في تنسيق flexbox أحد أكثر الميزات المطلوبة في تقرير توافق متصفّح MDN. بعد إجراء هذا التحديث، تتوفّر السمة gap في التنسيقات المرنة في جميع المتصفّحات الرئيسية، وقد تم حلّ تحدّي التوافق. وشمل الإصدار 14.1 من Safari أيضًا العديد من الإصلاحات للصور في flexbox، ما كان يلغي الحاجة إلى الحلول القديمة.

وتمكّنت خدمة Firefox من عرض الجداول كعناصر مرنة، ووصلت إلى مستوى أقرب إلى اجتياز الاختبارات بنسبة 100% (حاليًا 98.5%).

أصلح Chromium أيضًا الجداول كعناصر مرنة. في Chromium 88، تم أيضًا إعادة صياغة الصور كعناصر مرنة، لحلّ عدد من الأخطاء القديمة. أخيرًا، أضاف Chromium مؤخرًا إتاحة استخدام كلمات رئيسية جديدة للمحاذاة: start وend وself-start وself-end وleft وright. يمكن تجربة هذه الكلمات الرئيسية في Chrome Canary وEdge Canary.

شبكة CSS

استخدام شبكة CSS يتزايد باستمرار، وذلك حاليًا بنسبة 9% من مشاهدات الصفحة. تطبق جميع المحركات الرئيسية الثلاثة للمتصفّحات شبكة CSS والتي تجتاز أكثر من 89% من اختبارات النظام الأساسي ذات الصلة على الويب. يعد سد فجوة التوافق أمرًا مهمًا لدعم النمو الثابت لهذه الميزة.

حتى الآن في عام 2021، تحسّن متصفّح Safari من% 89 إلى% 93 من اجتياز الاختبارات، ويعمل Chromium على تصميم بنية جديدة لحلّ المزيد من مشاكل شبكة CSS التي تُعرف باسم GridNG. وهذا جهد قاده فريق Microsoft، وأدّى إلى الزيادة الأخيرة من% 94 إلى% 97 في اختبارات الشبكة المستهدَفة. ترقَّب آخر الأخبار عن GridNG على مدونة Edge.

خدمة مقارنة الأسعار (CSS) position: sticky

في Chromium، تم إصلاح position: sticky لعناوين الجداول بعد إطلاق TablesNG، وهو مشروع امتد لعدّة سنوات لإعادة تصميم عملية عرض الجداول. أدى هذا التغيير، بالإضافة إلى بعض الإصلاحات النهائية، إلى نجاح قناة مطوّري برامج Chrome وEdge 93 في اجتياز 100% من الاختبارات المستهدفة.

بالإضافة إلى position: sticky، تمكّنت شركة TablesNG من حلّ 72 خطأً في Chromium.

سمة aspect-ratio في خدمة مقارنة الأسعار (CSS)

إنّ السمة aspect-ratio التي تجعل من السهل ضبط نسبة العرض إلى الارتفاع مهمة جدًا لتصميم الويب السريع الاستجابة. وهو أيضًا حلّ لمنع المتغيّرات التراكمية في التصميم.

تتوفّر السمة aspect-ratio الآن في الإصدارات الثابتة من Chrome وEdge وFirefox، وفي الإصدار التجريبي 15 من Safari . كلما تحسّن التوافق مع المتصفحات الأخرى، ازداد الاستخدام.

وعلى الرغم من عدم توفّر متصفّح يتضمّن اختبارات بنسبة% 100، إلا أنّ فجوة التوافق في aspect-ratio هي الأصغر من بين جميع المجالات الخمسة التي يجب التركيز عليها في Compat 2021. نجحت في اجتياز الاختبارات الرئيسية بنسبة تزيد عن 90% . من الآن فصاعدًا، سنواصل مراقبة التقدم المحرز باستخدام مجموعة الاختبار هذه لجعلها ميزة قوية.

اطّلِع على مزيد من المعلومات عن استخدام السمة aspect-ratio على web.dev ومزاياها.

عمليات تحويل CSS

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

يعمل فريق Chromium أيضًا على تحسين إمكانية التشغيل التفاعلي لكل من transform-style: preserve-3d وtransform :perspective(). نأمل أن يكون هناك المزيد من التقدم لمشاركتها في التحديث المقبل.

التحسينات في النتيجة الإجمالية

منذ الإعلان عن هذه النتائج في آذار (مارس)، نجحت المحركات الثلاثة في تحسين نتائج Compat لعام 2021:

• ارتفع عدد إصدارات Chrome وEdge Dev من 86 إلى 92.
• ارتفع عدد مستخدمي Firefox من 83 إلى 86.
• انتقل Safari من الإصدار 64 إلى 82.

وعلى وجه الخصوص، دفع Safari إلى سد فجوة التوافق بمقدار 18 نقطة، وذلك بفضل الكثير من العمل الذي بذله المساهمون في WebKit. وعلى وجه التحديد، ساهم الفريق في Igalia في إضافة السمة aspect-ratio والعديد من التحسينات على ميزات Flexbox وGrid، مثل الإضافة gap لنموذج flexbox وإصلاح أخطاء متنوعة.

تابِع التقدّم الذي أحرزته في برنامج Compat 2021.

لمتابعة التقدم الذي أحرزته Compat 2021، يمكنك تتبُّع لوحة البيانات أو الاشتراك في قائمتنا البريدية أو التواصل مع @chromiumdev. إذا واجهت أي مشاكل، فتأكد من الإبلاغ عن خطأ في المتصفح المتأثر.