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

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

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

لطالما كان التوافق على الويب يشكّل تحديًا كبيرًا للمطوّرين. في السنوات القليلة الماضية، بذلت Google وشركاؤها الآخرون، بما في ذلك Mozilla و Microsoft، جهودًا كبيرة للتعرّف على أهم المشاكل التي تواجه مطوّري الويب، وذلك لتحسين عملنا وتحديد الأولويات من أجل تحسين الأداء. يرتبط هذا المشروع بعمل تم إجراء أبحاث إضافية في قنوات مختلفة، مثل استطلاعات حالة CSS وحالة JS.

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

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

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

يستخدم مشروع التوافق معايير متعدّدة تؤثّر في المجالات التي يجب أولاً منحها الأولوية، وتشمل هذه المعايير ما يلي:

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

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

في ما يلي المجالات التي نلتزم بحلّ مشاكلها في العام 2021.

نموذج flexbox في CSS

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

صورة ممدودة لأرضية شطرنج
صورة بحجم غير صحيح بسبب أخطاء
لوح شطرنج
صورة بالحجم الصحيح
صورة عليرضا محمودي

تتناول مشاركة المدوّنة Igalia's flexbox Cats هذه المشاكل بالتفصيل مع تقديم المزيد من الأمثلة.

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

شبكة CSS

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

عرض توضيحي للشطرنج المتحرك من إنشاء Chen Hui Jing.

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

موضع CSS: ثابت

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

Chromium مع "TablesNG"
Gecko
WebKit

اطّلِع على العرض التقديمي لعناوين الجداول الثابتة الذي أعدّه "روب فلاك".

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

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

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

استخدام padding-top
.container {
 
width: 100%;
 
padding-top: 56.25%;
}
استخدام سمة aspect-ratio
.container {
 
width: 100%;
 
aspect-ratio: 16 / 9;
}

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

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

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

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

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

تأثير قلب البطاقة في Chromium (على يمين الشاشة) وGecko (في الوسط) وWebKit (على يمين الشاشة). عرض توضيحي من إعداد "ديفيد بارون" من bug comment.

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

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

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

سننشر آخر الأخبار بانتظام حول مستوى التقدّم على web.dev، ويمكنك أيضًا متابعة مستوى التقدّم لكلّ مجال تركيز في لوحة بيانات Compat 2021.

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

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