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

Una Kravets

ملاحظة: تتوفّر هذه الميزة الآن في Chrome. يمكنك قراءة أحدث منشور حول ميزة الاختيار المخصّص هنا.

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

جرِّب هذه الميزة وأرسِل إلينا ملاحظاتك

تأكَّد من تحديث إصدار 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>.

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

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

إصدار تجريبي من قائمة اختيار أساسية مقابل قائمة اختيار قابلة للتخصيص

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

نظرة على الأجزاء

مخطّط بياني يعرض أجزاء من قائمة اختيار

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

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

يمكنك أيضًا تصميم button ومؤشر السهم المخصّص وإضافة محتوى عشوائي داخل أي من العناصر وحولها. بالإضافة إلى إضافة المحتوى، يمكنك إخفاء أي من هذه العناصر الجديدة والأنماط التلقائية. على سبيل المثال، إذا كنت لا تريد علامة صح في العنصر الزائف ‎ ::before الخاص بالخيار، استخدِم 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> الجديد القابل للتخصيص وظائف من popover وanchor positioning. وهي تستند إلى التكنولوجيتَين الأساسيتَين التاليتَين. هذا يعني أنّ قائمة الخيارات المنسدلة ضمن عنصر اختيار تعمل كعنصر منبثق يتم تثبيته على زر التفعيل الذي يفتح عنصر الاختيار.

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

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

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

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

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

التنسيق الأساسي

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

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

لتخصيص مؤشر السهم، أضِف الزر والسهم الخاصين بك داخل القائمة المنسدلة.

<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()‎ لتحريك عرض أداة الاختيار من عرض الرموز إلى عرض الخيارات بالكامل عند تمرير مؤشر الماوس فوقها أو إذا كان الخيار المحدّد يحتوي على خيار مع focus-visible.

/* 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 مع محتوى يظهر تدريجيًا عند تمرير مؤشر الماوس فوقه أو التركيز عليه

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

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

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

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

الخاتمة

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

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

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