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

Una Kravets

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

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

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

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

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

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

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

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

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

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

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

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

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

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

قد تكون التغييرات بسيطة مثل التصميم المرئي للعنصر المحدّد. على سبيل المثال، لتعديل أنماط الأزرار أو أنماط التمرير بمؤشر الماوس والتركيز أو خلفية خيارات الاختيار. بعد الموافقة على استخدام 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;
}

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

من خلال التحكّم الكامل في تصميم ::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);
}

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

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

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

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

الخاتمة

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

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

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