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

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

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

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

• استخدام الميزة. على سبيل المثال، يتم استخدام flexbox في 75% من جميع مشاهدات الصفحات، ويزداد الاستخدام بقوة في HTTP الأرشفة:
• عدد الأخطاء (في Chromium، أبو بريص، WebKit)، وبالنسبة إلى Chromium، كم عدد النجوم تلك الأخطاء السابقة.

• نتائج الاستطلاع:

  • استطلاعات الحمض النووي في MDN
  • تقرير توافق متصفِّح MDN
  • حالة CSS الميزات الأكثر شهرة واستخدامًا

• نتائج الاختبار من web-platform-tests على سبيل المثال، flexbox على wpt.fyi.

• هل يمكنني استخدام الميزات الأكثر بحثًا عنها.

أهم خمسة مجالات سيتم التركيز عليها في عام 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 فإن مشاركة المدونة تتعمق أكثر في هذه المشكلات مع العديد من الأمثلة الإضافية.

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

• الاستطلاعات: أهم المشاكل في تقرير توافق متصفّح MDN الأكثر شهرة واستخدامًا في ولاية خدمة مقارنة الأسعار (CSS)
• الاختبارات: اجتياز بنسبة 85% في جميع المتصفحات
• الاستخدام: 75% من مشاهدات الصفحات، وهي تزداد بقوة في HTTP الأرشفة

شبكة CSS

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

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

• الاستبيانات: المركز الثاني في تقرير توافق متصفّح MDN معروفة ولكن أقل استخدامًا في ولاية خدمة مقارنة الأسعار (CSS)
• الاختبارات: تجتاز% 75 من الاختبارات في جميع المتصفّحات
• الاستخدام: 8% ويزداد بشكل ثابت، نمو طفيف في HTTP الأرشفة

موضع CSS: ثابت

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

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

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

• الاستطلاعات: معروف/مُستخدَم في ولاية CSS وطرحت عدة مرات في تقرير توافق متصفِّح MDN
• الاختبارات: نجاح بنسبة% 66 في جميع المتصفحات
• الاستخدام: 8%

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

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

.container {
  width: 100%;
  padding-top: 56.25%;
}

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

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

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

• الاستبيانات: معروفة بالفعل ولكن لم يتم استخدامها على نطاق واسع بعد في ولاية خدمة مقارنة الأسعار (CSS)
• الاختبارات: اجتياز% 27 في جميع المتصفحات
• الاستخدام: 3% و متوقع أن يزداد

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

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

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

• الاستبيانات: معروفة جدًا ومستخدَمة في ولاية خدمة مقارنة الأسعار (CSS)
• الاختبارات: اجتياز بنسبة 55% في جميع الاختبارات متصفحات
• الاستخدام: 80%

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

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

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

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