0Pricing
HTML Academy · درس

عنصر selectlist

تخصيص عناصر التحكم المنسدلة باستخدام عنصر selectlist المقترح

عنصر selectlist درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

القيد المستمر منذ زمن

يُعد العنصر <select> أحد عناصر النماذج القليلة التي لا يمكن تصميم مظهرها. وتتجاهل المتصفحات كل قاعدة CSS تُطبّق عليه، مثل الحدود المخصصة والخطوط وأنماط الخيارات، مما أدى إلى ظهور آلاف مكتبات "القوائم المنسدلة المخصصة" التي تكرر السلوك الأصلي لمجرد الحصول على خيارات قابلة للتصميم.

ماهية selectlist

يُعد <selectlist>، الذي يظهر أيضًا باسم <selectmenu>، عنصر HTML أصليًا مصممًا ليكون بديلًا قابلًا للتصميم للعنصر <select>. وهو يقبل النموذج المفاهيمي نفسه، أي زر تشغيل وقائمة خيارات، لكن كل جزء فيه مكشوف لتخصيصه عبر CSS.

<selectlist>
  <option>Apple</option>
  <option>Banana</option>
  <option>Cherry</option>
</selectlist>

الأجزاء التي يمكنكم تصميمها

يعرض selectlist الزر، وهو المشغّل في الحالة المغلقة، وlistbox، وهي القائمة المنسدلة المفتوحة، والخيارات. وتتيح العناصر الزائفة في CSS، مثل ::part(button) و::part(listbox)، تصميم كل جزء منها دون التأثير في السلوك الأصلي.

تخصيص الخيارات

يمكن أن تحتوي الخيارات داخل selectlist على محتوى عشوائي، مثل الأيقونات والأوصاف والتخطيطات المخصصة، وليس النص فقط. ويستمر المتصفح في إدارة منطق الاختيار والتنقل بلوحة المفاتيح وإدارة التركيز، بينما تتحكمون بحرية في المظهر.

الحفاظ على السلوكيات المدمجة

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

زر مخصص

وفّر slot للمشغّل: <button slot="button">Choose fruit <svg>...</svg></button>. فالزر قابل للتصميم بالكامل؛ إذ يمكنكم استبدال المثلث الأصلي بأيقونة مخصصة، وإضافة تسميات، وتغيير الألوان. ويستمر المتصفح في إدارة الفتح والإغلاق.

المشاركة في النماذج

يشارك selectlist في إرسال النموذج تمامًا مثل select: إذ يتضمن سمة name وقيمة value، ويُرسل مع النموذج. وتكون المعالجة من جانب الخادم مطابقة. وهو بديل مباشر على مستوى markup لمعظم حالات استخدام select.

دعم المتصفحات

يُعد selectlist ميزة في مرحلة مبكرة. واعتبارًا من عام 2026، يتوفر في المتصفحات المبنية على Chromium خلف أعلام تجريبية أو بصيغة محدودة. أما Firefox وSafari فلم يدعماه بعد. ويتطلب استخدامه في الإنتاج توفير بديل يعتمد على <select> عادي للمتصفحات غير الداعمة.

صعوبة إنشاء Polyfill

من الصعب إنشاء Polyfill لقائمة منسدلة مخصصة كاملة إمكانية الوصول وتطابق السلوك الأصلي، بسبب حبس التركيز والتنقل بلوحة المفاتيح والتكامل مع قارئات الشاشة والمشاركة في النماذج. وتنجز مكتبات مثل Downshift وCombobox وreact-aria هذا العمل بآلاف الأسطر من الكود. أما selectlist فيستبدل كل ذلك بعنصر واحد.

متى يُنصح باعتمادها

بالنسبة إلى التطبيقات الداخلية أو عمليات النشر المخصّصة لمتصفّح Chromium، توفّر selectlist قدرًا كبيرًا من الشيفرة اليوم. أمّا بالنسبة إلى المواقع العامة التي تستهدف جمهورًا واسعًا، فانتظروا دعم Firefox وSafari، أو استخدموا مكتبة تغليف تستعمل selectlist حيثما كانت مدعومة، وتعود إلى قائمة منسدلة مخصّصة مبنية باستخدام React أو Vue في غير ذلك.

خارطة طريق الاستبدال

عندما تصبح selectlist متاحة في جميع المتصفحات، توقّعوا أن تُهمَل موجة من مكتبات القوائم المنسدلة المخصّصة أو تتحوّل إلى أغلفة رقيقة حول العنصر الأصلي. تابعوا مسار تطوير المواصفة؛ فقد خضعت واجهة API لمراجعات، وقد تستمر في التطور قبل اعتمادها معيارًا نهائيًا.

الآثار على التصميم

يمكن للمصممين الآن تحديد قوائم منسدلة متقنة بدقة البكسل، من دون التحفّظ المعتاد: «هذا هو التصميم، لكن القائمة المنسدلة ستبدو مختلفة في المتصفح». تزيل selectlist أحد أقدم أوجه عدم الاتساق المرئي بين نماذج التصميم وHTML المنشور.

اختبار المعرفة

لماذا يُعدّ عنصر selectlist مهمًا — وما القيد في