سد الفجوة

تسهيل عملية إنشاء التطبيقات على الويب

Rachel Andrew

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

فجوة Flexbox

كمثال على إحدى الخصائص التي تسبّب مشاكل، تتيح لك الخاصية gap إنشاء فجوات بين عناصر الشبكة أو المرنة أو الأعمدة في حاوية متعددة الأعمدة. على الرغم من أنّنا أتحنا استخدام column-gap في multicol منذ فترة طويلة، ظهرت السمة أولاً في تخطيط الشبكة على شكل grid-gap، بالإضافة إلى grid-column-gap وgrid-row-gap.

بعد توفّر تخطيط الشبكة في المتصفحات، تمت إعادة تسمية السمة إلى gap، بالإضافة إلى row-gap وcolumn-gap. تم بعد ذلك تحديد أنّه يعمل في التنسيق المرن أيضًا. ويعني تغيير الاسم أنّه ليس لدينا مواقع متعدّدة تؤدي الوظيفة نفسها.

.box {
  display: flex;
  gap: 1em;
}

أصدر متصفّح Firefox هذه السمة لتنسيقات العناصر المرنة في تشرين الأول (أكتوبر) 2018. ولم تظهر في Chrome إلا في يوليو 2020، ثم في Safari في أبريل 2021. وهذا يعني أنّنا لم نتمكّن من استخدام gap بأمان إلا بعد مرور عامَين وستة أشهر. في الواقع، كانت فترة الانتظار أطول بكثير بالنسبة إلى معظم المطوّرين، وذلك بسبب الحاجة إلى توفير التوافق مع إصدارات المتصفّحات الأقدم من أحدث إصدار. أصبح توفير الدعم لـ gap في التصميم المرن أكثر إشكالية بسبب عدم إمكانية استخدام طلبات البحث عن الميزات لرصد إمكانية استخدام الفجوات في التصميم المرن. بما أنّ السمة gap متوافقة مع الشبكة، ستعرض الدالة @supports (gap:1em) القيمة true.

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

لماذا توجد فجوات في الدعم؟

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

سيتم إنشاء نماذج أولية لمعظم الميزات في متصفّح واحد. على سبيل المثال، تم إنشاء مواصفات تخطيط الشبكة أولاً بواسطة Microsoft وتم تنفيذها في نموذج أولي في Internet Explorer 10. بذل أحد المهندسين في Mozilla جهدًا كبيرًا لمعرفة كيفية عمل الشبكة الفرعية، لذا تم إطلاق هذه الميزة أولاً في Firefox. نلاحظ أنّ Safari يتصدّر المشهد في ما يتعلّق ببعض وظائف الألوان الجديدة الرائعة.

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

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

المشاكل

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

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

إمكانية التشغيل التفاعلي

تعمل المتصفحات حاليًا معًا لحلّ مشكلة التشغيل التفاعلي. في العام الماضي، ساعدت Compat 2021 في سدّ الفجوة في التوافق مع عدد من الميزات، بما في ذلك السمة gap في التصميم المرن. يركّز مشروع Interop 2022 هذا العام على 15 ميزة، وقد تم إحراز تقدّم في بعضها.

يمكنك متابعة مستوى التقدّم في لوحة بيانات Interop 2022.

المراسلة

المشكلة الثانية هي مشكلة أحرص على المساعدة في حلّها عندما نتحدث عن الميزات هنا على web.dev وعلى developer.chrome.com. أريد أن تكون حالة الميزات واضحة جدًا عند قراءة المحتوى الذي نقدّمه، وأن نقدّم طرقًا عملية للتعامل مع مشاكل الدعم.

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

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

نساهم أيضًا في مستندات الويب المفتوحة من خلال دعمنا لمشروع Open Web Docs. يضمن ذلك توفير مستندات عالية الجودة على MDN، بالإضافة إلى بيانات حديثة حول توافق المتصفّحات. بعد ذلك، نستخدِم هذه البيانات هنا على web.dev لعرض مدى توفّر الميزات. في ما يلي حالة التوافق الحالية لـ gap في التصميم المرن.

Browser Support

إذا أردت معرفة المزيد عن رؤية Chrome للويب، والأشياء التي نجرّبها في الإصدارات التجريبية من Origin وDeveloper، ستجد المزيد من المحتوى على موقعنا الشقيق developer.chrome.com. قد يكون المحتوى تجريبيًا أو متاحًا في Chrome فقط في الوقت الحالي، ولكن يسعدنا أن تستكشفه وتقدّم لنا ملاحظاتك.

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

الصورة من إعداد كريستوفر ماكسيميليان.