سد الفجوة

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

راشيل أندرو

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

فجوة في المربع المرن

كمثال على موقع يتضمّن مشاكل، تتيح لك السمة gap عمل فجوات بين العناصر الشبكة أو المرونة أو الأعمدة في حاوية متعددة الأعمدة. على الرغم من استخدام column-gap في الأعمدة المتعدّدة منذ وقت طويل، ظهرت السمة للمرة الأولى بتنسيق الشبكة بالصيغة 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) القيمة "صحيح".

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

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

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

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

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

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

المشكلات

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

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

التوافقية

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

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

المراسلة

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

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

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

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

التوافق مع المتصفح

  • 84
  • 84
  • 63
  • 14.1

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

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

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