تم إطلاق تعديلات نهاية العام على Compat 2021 في محاولة للتخلّص من مشاكل التوافق مع المتصفّحات في خمسة مجالات تركيز رئيسية، وهي CSS Flexbox وCSS Grid والموضع: ثابت ونسبة العرض إلى الارتفاع وتحويلات CSS.
أوشكت نهاية العام على الانتهاء، وحان الوقت لتحديث برنامج Compat 2021 الذي يهدف إلى التخلص من مشاكل توافق المتصفِّح في خمسة مجالات تركيز رئيسية.
أكثر من %90
النتيجة في جميع المتصفّحات
منذ آخر تحديث، استمرنا في ملاحظة تحسينات في جميع المتصفحات. وبدأت جميع المتصفحات بدرجات اختبار أقل بكثير في بداية العام، ولكن الآن تجاوز جميع المتصفحات 90%! وهذا يعني أن منصة الويب قد حسّنت بشكل كبير إمكانية التشغيل التفاعلي للمجالات الخمسة.
لا يقدّم مورّدو المتصفحات المساهمات في محرّكات البحث فحسب، بل يقدّمها أيضًا آخرون في منتدى الويب. بالنسبة إلى هذا المشروع، نودّ على وجه التحديد أن نشكر "إغاليا" على مشاركتها وتواصلنا في العمل على تحسين النتائج. ساهمت إيغاليا في تحسين جميع المجالات الخمسة لتركيز Compat لعام 2021.
في wpt.fyi، وهي لوحة بيانات نتائج الاختبارات، يتوفّر الآن عرض نتائج اختبار مفلتَرة يُظهر جميع الاختبارات التي تم تضمينها في Compat لعام 2021، بالإضافة إلى طرق عرض Chrome وFirefox وSafari مقارنةً بين النتائج بآخر تحديث أجريناه في تموز (يوليو).
لنلقِ نظرة على التحسينات في كل مجال!
المربع المرن في CSS
وflex-basis: content في طريقه الآن إلى جميع المتصفحات، مع إمكانية تنفيذ عمليات التنفيذ في
Chromium وWebKit. (القيمة content كانت متوافقة
من قبل من خلال Gecko).
في Chromium، تم إصلاح مشكلة تتعلق بتغيير حجم flexbox، وذلك بما يتوافق مع المواصفات وسلوك Gecko. وفي Gecko، تم إصلاح العديد من المشاكل التي تؤثر في Compat 2021 بما في ذلك مشكلة تتعلّق بارتفاع النسبة المئوية للعناصر المرنة. وأخيرًا، في WebKit، تمّت الآن إضافة المزيد من قيم خصائص المحاذاة (left,right, self-start, self-end, start, end) وأجريت الكثير من التحسينات على الموضع المطلق، بالإضافة إلى تحسين نتائج اختبار flexbox في Compat 2021.
شبكة CSS
يستمر استخدام شبكة CSS Grid على الويب في النمو، كما يظهر ذلك في كل من تقويم الويب لعام 2021 ومقاييس الاستخدام في Chrome.
حلّ إطلاق GridNG في Chrome وEdge 93 في حل العديد من المشاكل التي طالت عمرها في Grid، ما أدّى إلى إغلاق 38 مشكلة رائعة في أداة تتبُّع الأخطاء في Chromium. إلى جانب العديد من التحسينات الصغيرة التي تلت ذلك، تحسّنت نتيجة Compat 2021 لشبكة في Chromium بنسبة% 3 إلى %97. ويقود فريق Edge في Microsoft هذا العمل.
تم إصلاح خطأ مطلق في تحديد الموضع يؤثر في الشبكة في Gecko، ووصلت العديد من الإصلاحات إلى WebKit، ما أدى إلى تحسُّن بنسبة% 1 في متصفّح Firefox وتحسّن بنسبة% 3 في متصفّح Safari في اختبارات الشبكة.
خدمة مقارنة الأسعار (CSS) position: sticky
في التحديث الأخير الذي أجريناه، لاحظنا أنّ position: sticky كانت المرة الأولى التي يصل فيها أي متصفّح (في هذه الحالة
مثل Chrome وEdge) إلى اجتياز الاختبارات بنسبة 100%. والآن، وبعد إجراء عدد من الإصلاحات في تنفيذ WebKit، يحقق Safari أيضًا نتيجة 100% لهذه الاختبارات. تم تضمين معظم هذه التحسينات
في الإصدار 15 من Safari.
سمة aspect-ratio في خدمة مقارنة الأسعار (CSS)
وزادت وتيرة تحديد نسبة العرض إلى الارتفاع (نسبة العرض إلى الارتفاع) للعناصر على جميع المتصفّحات،
ووصلت نتائج Compat 2021 إلى 99% و97% و95% لمتصفِّح Chrome/Edge وFirefox وSafari على التوالي. إنّ معظم التحسينات لا تتعلّق بسمة aspect-ratio نفسها، بل على كيفية ربط السمتَين width وheight بقيمة aspect-ratio تلقائية للعناصر. وتم تنفيذ ذلك على عدة عناصر في WebKit،
و<canvas> في Chromium.
عمليات تحويل CSS
ويتوفر دعم transform: perspective(none) الآن في
Chromium وGecko وWebKit. هذا سيجعل من السهل الرسوم
المتحركة بين منظور وبدون منظور.
في Chromium، transform-style: preserve-3d (الذي يسمح للعناصر الفرعية بالمشاركة في نفس المشهد الثلاثي الأبعاد) وخاصية perspective (التي تطبق تحويل المنظور على العناصر الفرعية)
يتم الآن التوافق مع المواصفات بجعلها تنطبق على العناصر الفرعية فقط.
ترجع الزيادة الكبيرة في النتائج لعمليات تحويل CSS لجميع المتصفحات بشكل أساسي إلى تحسينات على مجموعة الاختبار، حيث تم إصلاح الاختبارات غير الصحيحة أو إزالتها. وهذا يجعل من السهل فهم مشكلات التوافقية المتبقية وتجنب أي تراجع في المستقبل.
الخلاصة
نحن ممتنون للعمل الذي بذله الجميع في إنهاء العام مع العديد من التحسينات على النتيجة بالإضافة إلى تحسين البنية الأساسية للاختبار. كانت ميزة "aspect-ratio" مطلوبة منذ فترة طويلة من قبل مطوّري البرامج على الويب، وهي الآن متوافقة مع جميع المتصفحات. في 2021، ازدادت إمكانية استخدام flexbox وGrid وposition: sticky، وأصبحت هذه الميزات متاحة بشكل أفضل في المتصفحات.
ما هي الخطوات التالية؟ نحن متحمسون لمواصلة التعاون مع مورّدي المتصفّحات الآخرين والمجتمع الأوسع نطاقًا خلال التكرار المحسّن التالي لهذا الجهد. لقد بدأنا البحث ومناقشة المجالات التي سيتم التركيز عليها للعام 2022. يُرجى ترقّب المزيد من الأخبار قريبًا.
إذا كان لديك أي ملاحظات أو أسئلة، يُرجى التواصل معنا على Twitter على @ChromiumDev.