طلب ملاحظات المطوّر: اختيار قابل للتخصيص

Una Kravets

لقد تم الإبلاغ عن أنّ تنسيق عناصر التحكّم في النماذج، مثل العنصر <select>، يشكّل مشكلة كبيرة للمطوّرين منذ سنوات، ونحن نعمل على إيجاد حلّ لهذه المشكلة. على الرغم من أنّ هذا العمل معقّد واستغرق وقتًا طويلاً لإكماله، إلا أنّنا اقتربنا كثيرًا من طرح هذه الميزة. تتوفّر نسخة قابلة للتخصيص من العنصر المحدّد رسميًا في المرحلة الثانية في WhatWG، مع اهتمام قوي عبر المتصفحات ونموذج أوّلي يمكنك اختباره من Chrome Canary 130.

يُرجى تجربتها وإرسال ملاحظاتك إلينا.

تأكَّد من تحديث تثبيت Chrome Canary إلى الإصدار 130، ومن تفعيل ميزة ميزات منصة الويب التجريبية. يمكنك تفعيل هذه الميزة من خلال الانتقال إلى chrome://flags في شريط العناوين وتفعيل #experimental-web-platform-features. بعد ذلك، من المفترض أن تتمكّن من الاطّلاع على العروض التوضيحية في Codepen في هذه المشاركة. بدلاً من ذلك، يمكنك الاطّلاع على مجموعة Codepen هذه للاطّلاع عليها كلها في مكان واحد.

استخدِم هذا النموذج لتقديم ملاحظات حول الميزة. سيستغرق إكمال هذا الاستطلاع ثلاث دقائق فقط.

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

لنتعرّف على ميزات واجهة برمجة التطبيقات المحدّدة القابلة للتخصيص التي تستند إلى علامة HTML المحددة الحالية.

تفعيل <select> الجديد

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

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

select,
::picker(select) {
  appearance: base-select;
}

يمكنك اختيار تفعيل الزرّ المضمّن في الصفحة فقط، ولكن لا يمكنك تفعيل النافذة المنبثقة لاختيار الصور فقط بدون تفعيل الزرّ المضمّن في الصفحة. لا يتم إنشاء ::picker(select) إلا بعد تطبيق appearance: base-select على <select>.

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

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

عرض توضيحي لعنصر اختيار أساسي مقارنةً بعنصر اختيار قابل للتخصيص

ملاحظة: لا تتوفر السمتان multiple وsize عند الاختيار (<select multiple> و<select size=n>) في appearance: base-select بعد.

تقسيم الأجزاء

رسم بياني يعرض أجزاء من الجزء المحدد

بعد الانتقال إلى وضع التحديد الجديد القابل للتخصيص، تتضمّن العناصر الجديدة التي يمكنك الوصول إليها ما يلي: - selectedoption: يعكس HTML الداخلي للخيار المحدد حاليًا. ‫- option::before: يحتوي على علامة اختيار للإشارة إلى الخيار المحدّد حاليًا كعنصر إتاحة تلقائي (يُرجى العِلم أنّ هذا الرمز يخضع للتغيير). - ::picker(select): نافذة منبثقة تتضمّن كل المحتوى خارج button داخل اختيار قابل للتخصيص

يمكنك تصميم أي جزء من الجزء المحدد. على سبيل المثال، يمكنك إضافة محتوى عشوائي غير تفاعلي داخل عناصر <option>، وتصميم الزر في الصفحة الذي يفتح القائمة المنسدلة "اختيار"، وتصميم القائمة المنسدلة للخيارات (::picker(select)).

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

/* Remove the default checkmark from the selected option */
option::before {
 display: none;
}

ملاحظة: يهمّنا معرفة ملاحظاتك حول كيفية الوصول إلى جزء علامة الاختيار في عنصر الاختيار وتنسيقه.

على الرغم من أنّه يمكن أن يكون هناك عدد غير محدود من العناصر داخل عنصر الاختيار، سيجمع المتصفّح أي عنصر خارج عنصر <button> في العنصر الاصطناعي ::picker(select) الذي يعمل كإطار منبثق مرتبط بالزر. يؤدي هذا <button> إلى تفعيل ::picker(select). سيتمّ رفع الخيارات والعناصر الأخرى داخل عنصر الاختيار مباشرةً إلى ::picker(select)، أو يمكنك توفير حاوية خاصة بك لأغراض التصميم. سيتم أيضًا وضع هذا الغلاف داخل العنصر النائب ::picker(select).

<select>
  <button>
    <selectedoption></selectedoption>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

تستخدم <select> الجديدة القابلة للتخصيص وظائف من النافذة المنبثقة وموضع الارتساء. وقد تم إنشاؤها باستخدام هاتين التقنيتين الأساسيتين. وهذا يعني أنّ قائمة الخيارات المنسدلة ضمن عنصر اختيار تعمل كإطار منبثق مرتبط بالزر المشغِّل الذي يفتح عنصر الاختيار.

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

تحسين عنصر <select> الحالي

في السابق، كان فريق Chrome يعمل على فكرة عنصر <selectlist>. يوضِّح هذه المشاركة أنّ الميزة المُعاد تصميمها لإعادة استخدام عنصر <select> الحالي بدلاً من ذلك.

من بين المزايا الرئيسية لإعادة استخدام عنصر <select> الحالي هي إمكانية تحسين عنصر HTML الأساسي بشكل تدريجي. مقارنةً بعنصر جديد تمامًا، ستؤدي إعادة استخدام <select> إلى عرض محتوى مفيد على صفحتك. يعرض المثال التالي الخيار المخصّص مقارنةً بما سيرى المستخدم في متصفّح غير متوافق:

يتم عرض كل محتوى النص ضمن option في الإصدار الاحتياطي من عنصر الاختيار.

التصميم الأساسي

يمكن أن تكون التغييرات بسيطة مثل التصميم المرئي للعنصر المحدد. على سبيل المثال، لتعديل أنماط الأزرار أو أنماط التمرير فوق العنصر والتركيز عليه أو خلفية خيارات الاختيار. بعد الموافقة على استخدام appearance: base-select، يمكنك تطبيق أيّ CSS تريده على الأجزاء التي اخترتها.

تغيير أنماط أجزاء مختلفة من العنصر المحدّد باستخدام الزر التلقائي

لتخصيص مؤشر السهم، أضِف الزر والسهم الخاصَين بك داخل العنصر المحدَّد.

<select>
  <button>
    <selectedoption></selectedoption>
    <span>
      // Arrow here
    </span>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

بعد ذلك، اضبط نمط السهم:

/* style the arrow */
button span {
  /* arrow styles */
  transition: rotate 0.2s;
}

/* adjust arrow styles when the picker is open */
select:open button span {
  rotate: -180deg;
}

محتوى معقد ضمن الخيارات

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

<option value="france">
  <img src="img/flag_of_france.svg" alt="" />
  <span>France</span>
</option>

أداة اختيار البلدان مع الأعلام

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

<option value="eur">
    <img src="euro-flag.png" alt="" />
    <div class="currency">
      <div class="currency-short">EUR</div>
      <div class="currency-long">Euro</div>
    </div>
    <div class="symbol" aria-hidden="true">€</div>
</option>

لقطة شاشة لأداة اختيار العملة

تحديد نمط الخيار المحدّد

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

 <option value="reply-all">
    <img class="material-symbol"  src="material-symbol-reply.png">
    <span class="text">Reply all</span>
  </option>

الآن، طبِّق display: none على .text داخل <selectedoption> لإخفاء محتوى النص وعرض الرمز فقط:

selectedoption .text {
  display: none;
}

اختيار على غرار Gmail مع رمز يمثّل الخيار المحدّد

خيارات تفاعلية

بفضل التحكّم الكامل في تصميم "::picker(select)"، يمكنك الاستفادة من الإصدار التجريبي السابق لجعله تفاعليًا عند التمرير والتركيز. في هذا العرض التجريبي، يتم استخدام الدالة الجديدة calc-size()‎ لإضافة تأثير متحرك إلى عرض عرض أداة الاختيار من عرض الرموز إلى عرض العرض الكامل للخيارات عند التمرير فوقها أو إذا كان خيار الاختيار يتضمّن خيارًا مرئيًا عند التركيز.

/* base styles when picker is open but not interacted with */
::picker(select) {
  width: var(--icon-width);
  transition: width 0.5s;
}

/* animate the text in on hover & focus */
::picker(select):hover,
select:has(option:focus-visible)::picker(select) {
  /*  auto width!  */
  width: calc-size(auto, size + 0.5rem);
}

اختيار تفاعلي على غرار Gmail مع عرض المحتوى تدريجيًا عند التمرير فوقه أو التركيز عليه.

القيود وملاحظات حول تسهيل الاستخدام

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

• لا يُسمح بعد باستخدام أي عناصر تفاعلية (قابلة للتركيز) داخل <select>، مثل الأزرار أو العناصر الأخرى، باستثناء عناصر <option>. في الوقت الحالي، لا يسمح نموذج المحتوى المقترَح إلا بعناصر <div> و<span> و<option> و<optgroup> و<img> و<svg> و<hr>.
• أزرار التقسيم هي حاليًا في المرحلة التجريبية ونعمل على تطوير حل يمكن الوصول إليه.

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

الخاتمة

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

وبينما لا تزال هذه الميزة في مرحلة التطوير، تسرّنا معرفة آرائك وملاحظاتك من خلال نموذج الملاحظات الموجز هذا.

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