تتعاون Google مع مورّدي المتصفّحات الآخرين وشركاء المجال لحلّ المشاكل الخمس الأهم التي يواجهها مطوّرو البرامج على الويب في ما يتعلّق بتوافق المتصفِّح، وهي: عمليات تحويل CSS flexbox وCSS Grid وposition: sticky وaspect-ratio وCSS.
تتعاون Google مع مورّدي المتصفحات الآخرين وشركاء الصناعة لإصلاح أهم خمس مشكلات بالنسبة إلى مطوري الويب بشأن توافق المتصفح. وتشمل المجالات التي تركّز عليها عمليات تحويل CSS flexbox وCSS Grid وposition: sticky وaspect-ratio وCSS. يمكنك الاطّلاع على طُرق المساهمة والمتابعة لمعرفة كيفية المشاركة.
الخلفية
لطالما كان التوافق على الويب تحديًا كبيرًا للمطورين. في العامين الماضيين، سعَت Google وشركاء آخرون، بما في ذلك Mozilla وMicrosoft، إلى معرفة المزيد من المعلومات حول أهم الصعوبات التي يواجهها مطوِّرو برامج الويب، من أجل تشجيعهم على العمل وتحديد الأولويات من أجل تحسين الوضع. ارتبط هذا المشروع بعمل فريق رضا المطوّرين (DevSAT) من Google، وقد بدأ على نطاق أوسع مع إنشاء استطلاعات MDN (تقييم احتياجات المطوّرين) في 2019 و2020، والجهود البحثية الدقيقة التي تم تقديمها في تقرير توافق متصفّح MDN لعام 2020. وتم إجراء أبحاث إضافية على قنوات متعدّدة، مثل الاستطلاعات ولاية CSS وولاية JS.
الهدف من عام 2021 هو التخلّص من مشاكل توافق المتصفّحات في خمسة مجالات تركيز رئيسية حتى يتمكّن المطوّرون من الاعتماد عليها بثقة كأسس موثوقة. ويُطلق على هذه الجهود اسم #Compat 2021.
اختيار ما يجب التركيز عليه
في حين أن هناك مشكلات في توافق المتصفح في النظام الأساسي للويب بالكامل، ينصب تركيز هذا المشروع على عدد صغير من أكثر المجالات التي يمكن تحسينها إلى حد كبير، وبالتالي إزالتها باعتبارها أهم المشكلات للمطورين.
يستخدم مشروع التوافق معايير متعددة للتأثير على المجالات التي يجب تحديد أولوياتها، وبعضها كما يلي:
- استخدام الميزة على سبيل المثال، يُستخدم flexbox في 75% من جميع مشاهدات الصفحات، ويتزايد الانتقال بشكل كبير في أرشيف HTTP.
- عدد الأخطاء (في Chromium و Gecko وWebKit) وعدد النجوم التي تمت إضافتها إلى هذه الأخطاء في Chromium.
نتائج الاستبيان:
- استطلاعات الحمض النووي MDN
- تقرير توافق متصفّح MDN
- ميزات حالة خدمة مقارنة الأسعار (CSS) الأكثر شهرة واستخدامًا
نتائج الاختبار من web-platform-tests. على سبيل المثال، flexbox على wpt.fyi.
هل يمكنني استخدام الميزات الأكثر بحثًا عنها؟
أهم خمسة مجالات تركيز في عام 2021
في عام 2020، بدأ Chromium العمل على تناول أهم النقاط الموضّحة في مقالة تحسين توافق Chromium مع المتصفِّح في عام 2020. في عام 2021، نبذل جهودًا كبيرة للتحقيق في المزيد من الإنجازات. تعمل Google وMicrosoft معًا على معالجة أهم المشاكل في Chromium بالتعاون مع Igalia. "إيغاليا" هي مساهمون منتظمون في Chromium وWebKit، وحافظت على منفذ WebKit الرسمي للأجهزة المضمّنة، وشاركت في عمليات التوافق هذه بشكل كبير، وستساعد في معالجة المشاكل التي تم رصدها وتتبُّعها.
في ما يلي المجالات الملتزمة بإصلاحها في عام 2021.
المربع المرن في CSS
يتم استخدام CSS flexbox
على نطاق واسع
على الويب وما زال هناك بعض التحديات الرئيسية للمطورين. على سبيل المثال، واجه كل من Chromium وWebKit مشاكل في حاويات auto-height المرنة التي تؤدي إلى صور بحجم غير صحيح.
تصوير أليريزا محمودي
تشرح مشاركة مدونة Fflexbox Cats في "إيغاليا" تفاصيل هذه المشاكل من خلال أمثلة أخرى كثيرة.
سبب منحها الأولوية
- الاستطلاعات: أهم مشكلة في تقرير توافق متصفّح MDN، وهو الأكثر شهرة واستخدامًا في State of 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.
نأمل أن يساعدك هذا الجهد التعاوني بين مورّدي المتصفحات في تحسين الموثوقية وإمكانية التشغيل التفاعلي على إنشاء أشياء رائعة على الويب.