Compat 2021: التخلّص من أهم خمس مشاكل في التوافق على الويب

تتعاون Google مع مورّدي المتصفحات وشركاء المجال الآخرين لمعالجة أهم خمس نقاط تواجه مطوّري البرامج في ما يتعلق بالتوافق مع المتصفحات: CSS flexbox وCSS Grid وposition: sticky وaspect-ratio وCSS التحويلات.

Philip Jägenstedt
Robert Nyman

تتعاون Google مع موردي المتصفحات الآخرين وشركاء الصناعة لإصلاح أهم خمس مشاكل تواجه مطوّري البرامج بخصوص توافق المتصفح مجالات التركيز هي CSS flexbox وCSS Grid وposition: sticky وaspect-ratio وCSS تتحولات. يمكنك الاطّلاع على مقالة كيفية المساهمة والمتابعة وتعرّف على كيفية المشاركة.

الخلفية

لطالما كان التوافق على الويب تحديًا كبيرًا لمطوّري البرامج. في جلسة المعمل، خلال العامين الماضيين، وشركة Google وشركاء آخرين، بما في ذلك Mozilla وقد شرعت شركة Microsoft في التعرف على المزيد من المعلومات حول التحديات الصعبة المتعلقة بالويب والمطورين، لدفع عملنا وتحديد أولوياتنا لتحسين الوضع. هذا المشروع مرتبط بمطوّر برامج Google مستوى الرضا (DevSAT) وكيفية على نطاق أوسع بإنشاء استطلاعات تقييم احتياجات المطوّرين (MDN DNA) في عامي 2019 و2020، والجهود البحثية العميقة التي تم تقديمها في تقرير توافق المتصفّح MDN لعام 2020 وتم إجراء أبحاث إضافية في قنوات متعددة، مثل ولاية CSS وولاية JS الاستطلاعات.

هدفنا في عام 2021 هو التخلّص من مشاكل توافق المتصفّحات في خمسة مجالات أساسية. والمجالات التي يمكن للمطورين الاستفادة منها بثقة كأسس موثوقة. هذا النمط اسمها #Compat 2021

اختيار المواضيع التي يجب التركيز عليها

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

يستخدم مشروع التوافق معايير متعددة تؤثر على المجالات التي يجب الأولويات، وبعضها يكون:

أهم خمسة مجالات سيتم التركيز عليها في عام 2021

في عام 2020، بدأ Chromium العمل على معالجة أهم الجوانب الموضحة في تحسين توافق متصفِّح Chromium في عام 2020 في عام 2021، سنبدأ جاهدةً مخصّصة لتحقيق المزيد من النجاح. Google و تعمل Microsoft معًا على حلّ أهم المشاكل في Chromium، بالإضافة إلى إيغاليا. إيغاليا، من المساهمين المنتظمين إلى Chromium وWebKit، بالإضافة إلى الصيانة على منفذ WebKit للأجهزة المضمنة، داعمين جدًا واشتركوا في جهود التوافق هذه، المساعدة في معالجة وتتبع المشكلات المحددة.

في ما يلي المجالات التي سيتم إصلاحها في عام 2021.

إطار flexbox لصفحات الأنماط المتتالية (CSS)

إطار flexbox لـ CSS CANNOT TRANSLATE مستخدَمة على نطاق واسع على الويب وما زالت هناك بعض التحديات الرئيسية التي تواجه المطوّرين. على سبيل المثال: كل من Chromium WebKit واجهنا مشاكل في auto-height حاويات مرنة تؤدي إلى عرض صور بحجم غير صحيح.

صورة موسَّعة للوحة شطرنج
حجم الصورة غير صحيح بسبب حدوث أخطاء.
لوح شطرنج.
صورة ذات حجم صحيح.
تصوير أليريزا محمودي

لعبة flexbox Cats فإن مشاركة المدونة تتعمق أكثر في هذه المشكلات مع العديد من الأمثلة الإضافية.

سبب منحها الأولوية

شبكة CSS

شبكة CSS هي كتلة أساسية لتخطيطات الويب الحديثة، والتي تحل محل العديد من الأساليب القديمة والحلول البديلة. ومع تزايد الاستخدام، ينبغي أن يكون صلبًا، بحيث الاختلافات بين المتصفحات ليست سببًا لتجنبها أبدًا. يتمثل أحد مجالات ينقصه قدرتنا على تحريك تخطيطات الشبكة، وهي مدعومة في Gecko ولكن ليس Chromium أو WebKit: عند توفّرها تصبح تأثيرات كهذه ممكنة:

عرض توضيحي عن الشطرنج من Chen هوي جينغ.

سبب منحها الأولوية

موضع CSS: ثابت

تثبيت الموضع يسمح بلصق المحتوى بحافة إطار العرض، ويُستخدَم عادةً للعناوين التي تظهر دائمًا في الجزء العلوي من إطار العرض. على الرغم من توفُّره في جميع المتصفحات، هناك حالات استخدام شائعة لا يعمل فيها التطبيق على النحو المطلوب. على سبيل المثال: رؤوس الجداول الثابتة لا يتم دعمها في Chromium، ورغم ذلك الآن محدَّدة خلف علم تكون النتائج غير متسقة عبر المتصفحات:

Chromium مع "TablesNG"
سحلية
WebKit

يمكنك الاطلاع على رؤوس الجداول الثابتة إصدار تجريبي من إعداد "روب فلاك".

سبب منحها الأولوية

خاصية نسبة العرض إلى الارتفاع في CSS

aspect-ratio تسهّل خاصية CSS الحفاظ على نسبة عرض إلى ارتفاع متسقة العناصر، وإزالة الحاجة إلى الأدوات المعروفة اختراق padding-top:

استخدام المساحة المتروكة لأعلى
.container {
  width: 100%;
  padding-top: 56.25%;
}
استخدام نسبة العرض إلى الارتفاع
.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

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

سبب منحها الأولوية

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

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

تأثير قلب البطاقة في Chromium (اليسار) وGecko (الأوسط) وWebKit (اليمين). عرض توضيحي لديفيد بارون من خطأ للتعليق.

سبب منحها الأولوية

كيفية المساهمة والمتابعة

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

سيتمّ طرح تحديثات منتظمة للتقدّم هنا على web.dev ويمكنك متابعة التقدم المحرز في كل مجال من مجالات التركيز في Compat 2021 لوحة البيانات.

لوحة بيانات Compat 2021
لوحة بيانات Compat 2021 (لقطة شاشة تم التقاطها في 16 تشرين الثاني (نوفمبر) 2021)

نأمل أن يتعاون مورّدو المتصفحات في تحسين موثوقية هذه المتصفحات فإن التوافقية سوف تساعدك على البدء في إنشاء أشياء مدهشة على الويب!