ملخّص مؤتمر I/O لعام 2025: الميزات الجديدة في واجهة مستخدم الويب

Una Kravets

تاريخ النشر: 14 أغسطس 2025

مع اقتراب موسم فعاليات Google I/O من نهايته، يقدّم هذا المنشور ملخّصًا لأهم النقاط البارزة في CSS وواجهة مستخدم الويب التي تم عرضها في فعالياتنا هذا العام.

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

يركّز فريق Chrome، بالتعاون مع مورّدي المتصفّحات الآخرين وهيئات المعايير، مثل CSSWG وWHATWG، والمجموعات المجتمعية، مثل Open UI، على تسهيل تنفيذ أنماط واجهة المستخدم الأساسية هذه.

قوائم اختيار قابلة للتخصيص

عنصر <select> ضروري للنماذج، ولكن كان المتصفّح يحمي بنيته الداخلية منذ القدم، ما يجعل تطبيق أنماط CSS متّسقة وشاملة أمرًا شبه مستحيل. يتطلّب إنشاء <select> فهمًا لمكوّناته الأساسية، أي Popover API وCSS Anchor Positioning API.

‫Popover API: متاحة الآن في Baseline

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

يتطلّب إنشاء عنصر منبثق جزأين: عنصر مشغّل (مثل <button>) وعنصر منبثق. اربط بينهما من خلال منح النافذة المنبثقة السمتَين id و[popover]، ثم الإشارة إلى id في السمة [popovertarget] الخاصة بالزر.

تتولّى Popover API إدارة دورة حياة العنصر بأكملها، وتوفّر ما يلي:

• العرض في الطبقة العليا: لن تحتاج بعد الآن إلى التعامل مع z-index.
• إمكانات الإغلاق الخفيف الاختيارية: يتم إغلاقها عندما ينقر المستخدم خارج منطقة النافذة المنبثقة.
• الإدارة التلقائية للتركيز: يتولّى المتصفّح عملية التنقّل بين علامات التبويب داخل وخارج النافذة المنبثقة.
• عمليات الربط التي يمكن استخدامها: يتم التعامل مع نموذج التفاعل الأساسي بشكلٍ أصلي.

تلقّي عنصر <dialog> ترقية

مع أنّ النافذة المنبثقة فعّالة، إلا أنّها ليست الخيار المناسب دائمًا. على سبيل المثال، في التفاعلات التي تحظر الصفحة وتتطلّب ملاحظات من المستخدم، يكون استخدام النافذة المنبثقة <dialog> أكثر ملاءمةً.

في السابق، لم يكن <dialog> يوفّر بعض الميزات المريحة التي يوفّرها [popover]، ولكنّ ذلك يتغيّر. باستخدام السمة الجديدة closedby="any"، تتيح مربّعات الحوار المشروطة الآن وظيفة الإغلاق السريع، حيث يتم إغلاقها عندما ينقر المستخدم خارجها أو يضغط على مفتاح Escape.

بالإضافة إلى ذلك، توفّر أدوات استدعاء الأوامر ([command] و[commandfor]) طريقة تعريفية لا تستخدم JavaScript لربط زر بإجراء، مثل فتح مربّع حوار باستخدام command="show-modal".

تحديد موضع الإرساء CSS

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

بدءًا من الإصدار 125 من Chrome، يمكنك استخدام CSS Anchor Positioning API. تتيح هذه الإمكانية الجديدة ربط عنصر بآخر بشكل تعريفي، والتعامل تلقائيًا مع إعادة تحديد الموضع عندما يقترب من حافة الشاشة. هذه الميزة هي جزء من مبادرة Interop 2025، وهي مبادرة متصفحات متعددة تهدف إلى توفير الميزات المطلوبة بشكل كبير، ما يعني أنّه يمكننا توقّع توفّرها في جميع المتصفحات الرئيسية بحلول نهاية عام 2025.

على الرغم من أنّه يمكنك ربط العناصر بشكل صريح باستخدام السمتَين anchor-name وposition-anchor، فإنّ التعديل في المواصفات وفي Chrome 133 ينشئ علاقة ربط ضمنية بين <popover> و<button> الذي يستدعيه. يؤدي ذلك إلى تبسيط الرمز البرمجي بشكل كبير، ما يعني أنّه يمكنك الآن تحديد موضع النافذة المنبثقة باستخدام سطر واحد من CSS، مثل: position-area: bottom span-left.

توضّح لك أداة الربط من chrome.dev كيفية استخدام position-area للحصول على موضع الإعلان الذي قد تريده:

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

<select> قابلة للتخصيص بالكامل

بعد توفّر هذه اللبنات الأساسية في الإصدارات السابقة، أصبح بإمكانك أخيرًا استخدام تنسيق متوافق مع الويب لعناصر <select> في الإصدار 134 من Chrome. ويشمل ذلك السمة الجديدة appearance والعناصر الزائفة الجديدة والعنصر <selectedcontent>.

لإتاحة التخصيص، طبِّق appearance: base-select; على العنصر <select> وعنصره الزائف الجديد ::picker(select) الذي يستهدف القائمة المنسدلة للخيارات. يؤدي ذلك إلى عرض أجزاء داخلية جديدة للتصميم، بما في ذلك:

• ‫<selectedcontent>: يمثّل محتوى الخيار المحدّد المعروض في الزر.
• ‫::picker-icon: رمز سهم القائمة المنسدلة
• ‫<option>:checked و::checkmark: لتنسيق الخيار المحدّد ومؤشر علامة الاختيار

يتيح ذلك عرض محتوى غني ضمن الخيارات والتحكّم بدقة في العرض. على سبيل المثال، يمكنك عرض رمز وعنوان فرعي في قائمة الخيارات ولكن إخفاءهما في الحالة المغلقة باستخدام display: none ضمن selectedcontent.

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

منصّات العرض بعناصر متغيّرة

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

بدء استخدام أدوات التمرير

لإنشاء لوحة عرض دوّارة، عليك البدء بقائمة من العناصر التي تتجاوز حجم الحاوية. لإخفاء شريط التمرير الأفقي مع إبقاء المحتوى قابلاً للتمرير، استخدِم scrollbar-width: none. بالإضافة إلى ذلك، لجعل أداة التمرير السريع تبدو "سريعة الاستجابة"، طبِّق scroll-snap-type وscroll-snap-align، ما يضمن تثبيت العناصر في مكانها أثناء تنقّل المستخدم.

السابق والتالي مع ::scroll-button

يطلب عنصر ::scroll-button() الزائف الجديد، الذي تم إطلاقه في الإصدار 135 من Chrome، من المتصفّح إنشاء زرَّي "التالي" و "السابق" يمكن الوصول إليهما ويتضمّنان معلومات الحالة. يتعامل المتصفّح تلقائيًا مع أدوار ARIA الصحيحة وترتيب علامات التبويب، بل إنّه يوقف الأزرار عند الوصول إلى البداية أو النهاية، وكل ذلك بدون أي JavaScript إضافي.

لبدء استخدام أزرار التمرير، يجب توفير محتوى وتصنيف يسهل الوصول إليه، كما يلي:

.carousel {

  &::scroll-button(left) {
    content: "⬅" / "Scroll Previous";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Next";
  }
}

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

التنقّل المباشر باستخدام ::scroll-marker

بالنسبة إلى مؤشرات النقاط أو الصور المصغّرة، يربط العنصران الزائفان ::scroll-marker و::scroll-marker-group علامات التنقّل مباشرةً بالعناصر في حاوية التمرير. يتعامل المتصفّح مع المجموعة كـ tablist ويتيح التنقّل باستخدام لوحة المفاتيح.

كما هو الحال مع أزرار التمرير، ابدأ علامات التمرير من خلال الموافقة على استخدام السمة content، وقدِّم تصنيفًا يسهل الوصول إليه. في المثال التالي، يتم استخدام سمة بيانات لضبط تصنيف علامة التمرير. بالإضافة إلى ذلك، ضَع علامات التمرير في ::scroll-marker-group باستخدام السمة scroll-marker-group. أخيرًا، يمكنك تصميم العلامة النشطة باستخدام الفئة الزائفة الجديدة :target-current. في ما يلي مثال على الشكل الذي قد تبدو عليه لوحة عرض دوّارة أساسية:

.carousel {
  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ''/ attr(data-name);
  }

  > li::scroll-marker:target-current {
    background: blue;
  }
}

طلبات البحث عن حالة التمرير

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

• ‫scroll-state(snapped): يتم التطابق عندما يكون العنصر في الموضع "المحاذي". في منصّات العرض الدوّارة، يكون العنصر هو العنصر الذي يظهر في وسط منصّة العرض الدوّارة.
• ‫scroll-state(stuck): لتحديد نمط عنصر، مثل عنوان، عندما يصبح العنصر الرئيسي ثابتًا
• scroll-state(scrollable): أضِف مؤشرات مرئية، مثل التلاشي، للإشارة إلى توفّر المزيد من المحتوى الذي يمكن الانتقال إليه.

الخلاصة

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

تجمع هذه اللوحة الدوّارة التفاعلية بين طلبات البحث scroll-state() و::scroll-button و::scroll-marker وتحديد موضع العنصر الثابت في CSS و:target-current.

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

مزيد من المعلومات حول لوحات العرض الدوّارة في CSS

البطاقات التفاعلية عند التمرير

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

النوافذ المنبثقة التي يتم تشغيلها حسب الاهتمامات باستخدام [interestfor]

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

لتحويل نافذة منبثقة مستندة إلى النقرة إلى نافذة منبثقة مستندة إلى الاهتمام، أنشئ عنصر استدعاء، يمكن أن يكون <button> أو <a>، وأضِف إليه السمة [interestfor] التي تساوي id العنصر [popover]. يظهر على النحو التالي في HTML:

<button interestfor="profile-callout">
  ...
</button>

<div id="profile-callout" popover>
 ...
</div>

يتعامل المتصفّح مع جميع منطق الأحداث المعقّد، بما في ذلك:

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

تتوافق هذه الميزة مع ميزات أخرى من النوافذ المنبثقة، مثل ميزة "الطبقة العليا"، حيث يتم عرض النافذة المنبثقة في طبقة جديدة فوق بقية شجرة نموذج المستند (DOM). ويتم التعامل مع عمليات ربط المكوّنات الدلالية ونموذج شجرة تسهيل الاستخدام الأساسي بشكلٍ أصلي.

تنسيق عناصر تفعيل الاهتمامات

تتضمّن أدوات استدعاء الاهتمامات بعض الإمكانات الجديدة. إحدى هذه الميزات هي إمكانية التحكّم في تأخيرات الدخول والخروج باستخدام خاصية CSS: interest-target-delay. أما الميزة الأخرى، فهي إمكانية تصميم العنصر الذي يتم استدعاؤه استنادًا إلى ما إذا كان يتضمّن اهتمامًا أم لا، وذلك باستخدام الفئة الزائفة :has-interest.

[interesttarget] {
  interest-target-delay: 0s 1s;

  &:has-interest {
    background: yellow;
  }
}

popover="hint" وواجهة مستخدم متعددة الوظائف

من العناصر الأساسية التي تساعد في استدعاء الاهتمامات نوع جديد من النوافذ المنبثقة: popover="hint". الفرق الأساسي بينها وبين النوافذ المنبثقة الأخرى هو أنّ نافذة التلميح المنبثقة لا تغلق النوافذ المنبثقة الأخرى عند فتحها. هذا الخيار مثالي لتلميحات الأدوات أو بطاقات المعاينة التي يجب أن تظهر بدون إغلاق قائمة أو نافذة محادثة مفتوحة.

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

المستقبل هو أسلوب تصريحي

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

مَراجع إضافية:

• Popover API
• موضع التثبيت
• أداة Anchor
• Command Invokers
• قوائم اختيار قابلة للتخصيص (RFC)
• اللوحات الدوّارة في CSS
• معرض الصور الدوّارة لخدمات CSS
• أداة ضبط حِزام نقل الأمتعة في CSS
• طلبات البحث عن حالة التمرير في CSS
• شرح ميزة "مستدعي الاهتمامات"