‏select قابل شخصی‌سازی: گزینه‌هایی که اطلاعات واقعی نشون می‌دن

با appearance: base-select بالاخره می‌شه تگ رو استایل داد، ولی نویسنده این مقاله می‌گه تغییر مهم‌تر چیزیه که یه option می‌تونه توش جا بده. تا الان هر گزینه یه خط متن ساده بود و هر چیزی که کاربر برای تصمیم لازم داشت یا باید تو اون یه خط جا می‌شد یا حذف می‌شد. حالا گزینه می‌تونه پیش‌نمایش، عدد، عنوان شغلی یا هشدار داشته باشه، یعنی کاربر به‌جای خوندن و حساب کردن، جواب رو فقط تشخیص می‌ده.

نویسنده پنج نمونه می‌آره. تو انتخاب فونت، هر گزینه با فونت خودش نوشته می‌شه و با یه inline style برای هر option کار تمومه. تو انتخاب منطقه زمانی، به‌جای «(GMT+09:00) Tokyo» ساعت فعلی اون شهر و روز یا شب بودنش نشون داده می‌شه؛ این تنها نمونه‌ایه که JavaScript لازم داره، چون ساعت‌ها از Intl.DateTimeFormat میاد. برای همکارهای هم‌اسم، عنوان شغلی و دپارتمان زیر اسم میاد و گزینه‌هایی که پیامد خاص دارن هم یه badge هشدار می‌گیرن.

برای مقایسه روش‌های ارسال، نویسنده قبول داره که radio button برای دو سه گزینه کوتاه انتخاب درستیه. ولی وقتی هر گزینه چند تا عدد داره، این عددها تو جمله‌ها گم می‌شن. یه select با ستون‌های مرتب، مقایسه رو به یه نگاه از بالا به پایین تبدیل می‌کنه:

option { display: grid; grid-template-columns: 1fr 6.5rem 4rem; }

مهم اینه که همه این نمونه‌ها هنوز یه معمولی هستن. کنترل با کیبورد، پرش با تایپ، ارسال فرم، select.value، required، اعتبارسنجی و role دسترس‌پذیری همه دست مرورگر می‌مونه. بزرگ‌ترین هزینه‌ش روی گوشیه: select بومی picker خود سیستم‌عامل رو باز می‌کنه که برای انگشت و ابزارهای دسترس‌پذیری تنظیم شده، ولی نسخه شخصی‌سازی‌شده لیست خودش رو روی صفحه می‌کشه. راه‌حل نویسنده اینه که فقط وقتی موس یا ترک‌پد هست فعالش کنی:

@media (hover: hover) and (pointer: fine) {
  select,
  ::picker(select) { appearance: base-select; }
}

به گفته نویسنده این یه progressive enhancement کلاسیکه، یعنی مرورگری که پشتیبانی نمی‌کنه فقط یه select معمولی با متن گزینه‌ها نشون می‌ده و همون مقدار رو می‌فرسته. پس فقط یه شرط می‌مونه: متن هر گزینه باید به‌تنهایی معنی بده، مثلاً «Ahmed Mostafa, Accountant · Finance» نه فقط اسم. پیشنهادش اینه که اون selectی که کاربرها بیشتر از همه سرش مکث می‌کنن رو پیدا کنی و جواب سؤالشون رو بذاری تو خود گزینه.

نکات کلیدی:

• appearance: base-select اجازه می‌ده داخل option محتوای غنی مثل پیش‌نمایش و badge بذاری
• فعلاً فقط Chrome و Edge پشتیبانی می‌کنن و بقیه مرورگرها select معمولی نشون می‌دن
• رفتار کیبورد، اعتبارسنجی و مقدار فرم دست‌نخورده می‌مونه و خود کنترل JavaScript لازم نداره
• روی گوشی picker بومی سیستم‌عامل از دست می‌ره، برای همین می‌شه با @media (hover: hover) and (pointer: fine) فقط روی دسکتاپ فعالش کرد
• متن هر گزینه باید بدون استایل هم کامل و قابل فهم باشه