سد الفجوة

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

Rachel Andrew

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

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

• التعرّف على CSS
• التعرّف على "نماذج Google"
• التعرّف على التصميم
• مزيد من المعلومات عن تطبيقات الويب التقدّمية (PWA)

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

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

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

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

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