سد الفجوة

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

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

فجوة Flexbox

على سبيل المثال، يتيح لك السمة gap إنشاء فجوات بين عناصر grid أو flex أو الأعمدة في حاوية multicol. على الرغم من أنّنا استخدمنا 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 في تنسيق flex layout لأنّه لا يمكننا استخدام طلبات البحث عن الميزات لرصد مدى توفّر المساحة في تنسيق flex layout. بما أنّ سمة gap متاحة في الشبكة، ستعرض @supports (gap:1em) القيمة true.

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

ما سبب وجود فجوات في الدعم؟

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

سيتم إنشاء نماذج أولية لمعظم الميزات في متصفّح واحد. على سبيل المثال، أنشأت 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. أريد أن تكون حالة الميزات واضحة جدًا عند قراءة المحتوى الخاص بنا، وأن نقدّم طرقًا عملية للتعامل مع مشاكل الدعم.

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

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

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

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

  • Chrome: 84
  • الحافة: 84
  • Firefox: 63
  • Safari: 14.1

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

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

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