Chrome Dev Insider: إصدار CSS وواجهة المستخدم

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

أنا راشيل أندرو، رئيسة قسم المحتوى في موقع web.dev وdeveloper.chrome.com، ضِمن فريق علاقات مطوّري برامج Chrome. لقد عملتُ على الويب منذ أكثر من عشرين عامًا، مع التركيز على معايير الويب المفتوح وCSS، كما أنّني أحد أعضاء مجموعة عمل خدمات CSS.

قبل شهرين، انتهينا من مؤتمر Google I/O حيث شاركنا بعض أهم التعديلات حول كيفية دعمنا للمطوّرين من أجل جعل الويب أسرع وأكثر فعالية مع الحفاظ على أمان معلومات المستخدمين وخصوصيتها.

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

في الأخبار

في أول نسخة من Chrome Dev Insider، شاركنا بعض التعديلات حول مبادرات Compat 2021 وInterop 2022 التي تعاون فيها مورّدو المتصفحات والجهات المشغِّلة في المنظومة المتكاملة لتوفير المزيد من الميزات المتوافقة على جميع المتصفحات. وتركّز المبادرة بشكل كبير على خدمة مقارنة الأسعار (CSS) لأنّ عدم توافق المتصفّح هو أحد أكبر التحديات التي تواجه مطوّري تلك الخدمة.

قد لا يكون هذا الأمر مشوّقًا لمعظم الأشخاص، ولكن من المثير للاهتمام رؤية التقدم الذي أحرزناه بالفعل عبر المتصفحات.

Chrome Dev في 71، وFirefox Nightly في 74، Safari TP في 73.
نتائج المتصفحات التجريبية في آذار (مارس) 2022
Chrome Dev في 77، Firefox Nightly في 80، Safari TP في 80.
النتائج الواردة من المتصفّحات التجريبية في تموز (يوليو) 2022 الاطّلاع على أحدث النتائج

في وقت سابق من الشهر الماضي، رأينا Safari علنًا عن إصدار ملصق صغير باستخدام الإصدار التجريبي من Safari 16.0 والذي يتضمن ميزات رائعة مثل Container Query وsubgrid وأداة فحص flexbox. تضمنت الإصدارات الحديثة من Firefox وChrome عددًا من الميزات والإصلاحات الشيقة - نتناول الأمور الأساسية في المتصفحات الثابتة والتجريبية كل شهر في سلسلة مشاركاتي الجديدة على نظام الويب الأساسي.

التفاصيل الداخلية: دعم مطوري CSS وواجهة المستخدم

مع العام 2022 الذي كان عامًا رائعًا بالنسبة إلى ميزات CSS، اعتقدنا أنّه الوقت المناسب للتعرّف على ما وراء الكواليس. وتحدّثتُ عن "أونا كرافيتس"، وهي مسؤولة مسؤولين في Devrel في مجال واجهة مستخدم الويب وأدوات مطوّري البرامج ونيكول سوليفان، مديرة المنتجات لواجهة مستخدم الويب التي تركّز على واجهات برمجة تطبيقات CSS وHTML، للتحدث عن رحلة Chrome لدعم مطوّري برامج واجهة المستخدم.

لِنبدأ بالحديث عنكما. هل يمكنك إخبارنا بالمزيد عن نفسك؟

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

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

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

أونا: احتجنا إلى القيام ببعض الإجراءات لإظهار مدى أهمية هذا العمل وسبب اعتباره أولوية. بدأنا باستطلاع MDN DNA في عام 2019، والذي أشار إلى أنّ واجهة المستخدم تمثّل بعض المشاكل على المنصة. ومنذ ذلك الحين، واصلنا استخدام البيانات كدليل لنا من خلال شبكة MDN واستطلاعاتنا الداخلية حول رضا المطوّرين. نتيجةً لذلك، تمكّنا من الحصول على دعم أعمق من القيادة وتمكّننا من إعطاء الأولوية للعمل الهندسي على بعض ميزات المطوّرين الأكثر طلبًا في مساحة واجهة المستخدم، والتي تشكِّل أيضًا أكبر قدر من التركيز على مبادرات، مثل Compat 2021 وInterop 2022.

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

لنتحدّث قليلاً عن واجهات برمجة التطبيقات (LAPIs). ماذا حدث هناك؟

نيكول: بالنسبة إلى تطبيقات LAPIs، أدركنا أنّ الويب بحاجة إلى تجربة لمطوّري المكوّنات الإضافية والتي كانت أقرب إلى تصميم واجهة المستخدم الأصلية. وكان من الواضح أن إعادة ابتكار العجلة كانت تعيق مطوري البرامج. لا يمكنني عد عدد علامات التبويب التي أنشأتها في مسيرتي المهنية! ومع ذلك، حاولنا حلّ هذه المشكلة من خلال شحن JavaScript باستخدام المتصفّح، الأمر الذي كان صعبًا للغاية. لم يشحن أي شخص JavaScript في المتصفح من قبل، ولم يكن من الواضح كيفية تفاعله مع رمز C++ الذي يشغّل محرك عرض المتصفح. لقد استمعنا إلى آراء مورّدي المتصفحات الآخرين (نشكرك يا Mozilla) وتوقّفنا عن اتّباع هذا النهج، وبالتالي تمكّنا من العثور على ميزة أفضل بكثير باستخدام واجهة المستخدم المفتوحة. ومن خلال الاعتماد على HTML وCSS، يمكننا الحصول على حلول تعريفية مرنة. ولأنّنا تعبير عن المعلومات، يمكننا توفير إمكانية الوصول مباشرةً بطريقة لم يكن من السهل تنفيذها باستخدام JavaScript. أنا متحمس حقًا بشأن ما سيحدث. نحن نعمل على إتاحة selectالقائمة والنافذة المنبثقة وتلميح والتنقل وأكورديون وعلامات التبويب ولوحة العرض الدوّارة والتبديل، وهي أنماط أساسية حقًا في تصميم واجهة المستخدم.

لقد تعلّمنا الكثير. وأعلم أنّ هناك مبادرات أخرى في هذا المجال، مثل CSS هوديني. ما هي القصة؟

أونا: نعم CSS هوديني مكان آخر تعلّمنا فيه من المنتدى. هناك الكثير من ميزات هوديني المفيدة، لكن العديد منها كان منخفض المستوى لدرجة أنّه تعذّر اعتماده ودعمه على نطاق أوسع. أدركنا أنّ استخدام واجهات برمجة التطبيقات منخفضة المستوى لم يؤدِّ بالضرورة إلى تقليل أي صعوبات يواجهها المطوّرون. وبدلاً من ذلك، ساعد التركيز على الحلول والاحتياجات على مستوى أعلى في جذب الدعم عبر المتصفحات وتحقيق النتائج المرجوة في المنظومة المتكاملة. نحن نتتبّع حاليًا مستوى التقدّم على الرابط https://ishoudinireadyyet.com/.

في ما يتعلّق بإتاحة التوافق مع مختلَف المتصفحات، يبدو أنّ مبادرات، مثل Spam 2022 وOpen UI 2022، تحقّق نتائج إيجابية كبيرة للمنتدى. ما هي ملاحظات المطوّرين؟

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

نيكول: حماسة المنتدى ملموسة. يمكنك الاطّلاع عليها على Twitter. :)

التغريدة المذكورة في الفقرة السابقة

أثبت استخدام المنظومة المتكاملة أهميتها الكبيرة في أي نجاح حقّقناه في تطوير حياة أسهل. أعلم أن فريقك قام بالكثير من العمل هناك. هل تريد مشاركة بعض التفاصيل؟

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

على سبيل المثال، بدأنا قبل بضع سنوات العمل باستخدام أُطر عمل JavaScript، مثل React وAngular. والإطارات الوصفية - على سبيل المثال Next وNuxt وGatsby. في العام الماضي، بدأنا فعل الشيء نفسه مع أدوات وأُطر عمل واجهة المستخدم، مثل Sass و Bootstrap وMaterial. وآمل هذا العام أن نتمكن من التعاون مع GreenSock وغيرها من الأدوات التي تجعل تجربة حياة أسهل. لقد رأيت "كاسي إيفانز" من GreenSock تتحدث في Smashing conference (مؤتمر Smashing) وقد أثار شعوري بالحماس الشديد للعمل مع الأشخاص في مجال الصور المتحركة.

أين نجد أكبر فرصة للمنظومة المتكاملة لواجهة مستخدم الويب؟

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

مع نيكول، ما هي الخطة القادمة لفريقك؟

نيكول: لا تتحول كل الاستكشافات إلى شيء قابل للشحن، ولكن هناك الكثير من الأشياء التي أنا متحمسة جدًا حاليًا:

لم نتحدث عن أول شيء، فإننا نعمل على تمكين تصميم سريع الاستجابة ومستند إلى المكونات. يتضمن أدوات لتصميم أنظمة الألوان حتى يتمكن المصممون من الاستجابة لتفضيلات المستخدم مثل الوضع الداكن. على سبيل المثال، تحافظ مساحة ألوان OKLCH على اتساق مستوى السطوع في جميع تدرجات اللون. يمكن للمصممين الانتقال من اختيار الألوان إلى تصميم العلاقات بين الألوان، دون الانتهاء من لوحات ألوان موحلة!

ونعمل أيضًا على بعض واجهات برمجة التطبيقات الأكثر طلبًا، مثل طلبات البحث في الحاوية وطبقات التتابع وأداة الاختيار الرئيسية (:has) والأنماط ذات النطاق الواسع والدمج. يحتاج المطورون إلى هذه حتى يتمكنوا من بناء أنظمة تصميم مرنة مليئة بالمكونات القابلة لإعادة الاستخدام.

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

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

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

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

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

شكرًا لكما. أنا متأكد من أنّ المنتدى بأكمله، مثلنا، متحمسون لرؤية السرعة المتجددة للتحسينات والميزات في عالم واجهة مستخدم الويب. لا يزال هناك الكثير من الأمور التي يجب تعلّمها، فأين يمكن أن يبدأ المرء في رحلته؟

أونا: تتناول جلسة الميزات الجديدة في منصة الويب في مؤتمر I/O النقاط البارزة للعديد من الميزات التي سنطرحها هذا العام. كتب "آدم أرجيل" أيضًا مقالة رائعة حول جميع عمليات الانتقال إلى CSS الجديدة والقادمة. وأود التركيز بشكل مستمر على الإصدارات الثابتة في الوقت الحالي، وسأكون على دراية بالأعمال الأخرى التي سيتم العمل عليها في المستقبل. ننصحك بمتابعتها لسلسلة الفيديوهات جديد على منصة الويب الرائعة. سيؤدي الاشتراك في نشرة web.dev الإخبارية أيضًا إلى إتاحة هذا المحتوى للمطوّرين. البريد الوارد. وبالنسبة إلى المطوّرين الذين يريدون المشاركة والمساعدة في كل ذلك، يُعدّ الانضمام إلى واجهة المستخدم المفتوحة إحدى أفضل الطرق لدعم هذا العمل.

التحديثات الرئيسية القادمة

ونحن نحافظ على تقاليدنا لتنبيهك بشأن أي تغيير قادم يجب أن تضعه في اعتبارك أثناء إنشاء تجارب الويب.

الحد الأقصى لمدة استخدام ملفات تعريف الارتباط إلى 400 يوم

  • التعديل: عند ضبط ملفات تعريف الارتباط باستخدام سمة Expires/Max-Age صريحة، لن يتجاوز الحدّ الأقصى لهذه القيمة 400 يوم في المستقبل. في السابق، لم يكن هناك حد أقصى ويمكن أن تنتهي صلاحية ملفات تعريف الارتباط لعدة آلاف في المستقبل. الهدف من هذا الحد هو تحقيق التوازن بين أنماط الاستخدام الشائعة واحترام خصوصية المستخدم. وبإمكان أي موقع إلكتروني تتم زيارته أكثر من كل 400 يوم إعادة تحميل ملفات تعريف الارتباط لضمان استمرار الخدمة، ويمكن للمستخدمين الاطمئنان إلى أنّ ملفات تعريف الارتباط لن تظلّ محفوظة في المتصفّح لآلاف السنين بدون استخدامها.
  • المخطط الزمني المقدَّر: سيتم الشحن في الإصدار 104 من Chrome (سيتم طرح الإصدار الثابت في 2 آب (أغسطس) 2022).
  • عبارة الحث على اتخاذ إجراء من المطوّرين: قد يحتاج المطوّرون إلى إعادة تحميل ملفات تعريف الارتباط بشكل استباقي أكثر من أي وقت مضى عند زيارة المستخدمين لمواقعهم الإلكترونية. وبخلاف ذلك، قد يتم تسجيل خروج المستخدمين بعد 400 يوم من إعداد ملف تعريف الارتباط في البداية.

نأمل أن تكون قد استمتعت بقراءة هذا الإصدار من Chrome Dev Insider. إذا فاتتك الرسالة، إليك الأول. ونتطلع إلى تقديم المزيد لك في الربع القادم.

وحتى ذلك الحين، يُرجى إخبارنا برأيك في هذا الإصدار من Chrome Dev Insider وما يمكننا فعله لتحسينه.

ما رأيك بهذا الإصدار من The Chrome Dev Insider؟ شارِك ملاحظاتك.