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

سد الفجوة

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

Rachel Andrew Technical Writer

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

الفجوة في نموذج flexbox

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

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

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

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

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

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

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

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

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

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

المشاكل

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

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

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

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

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

المراسلة

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

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

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

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

Browser Support

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

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