سال‌ها است که سبک‌بندی کنترل‌های فرم مانند عنصر <select> به‌عنوان یکی از چالش‌های عمده توسعه‌دهندگان گزارش شده است و ما درحال کار روی راه‌حلی برای آن بوده‌ایم. اگرچه این کار پیچیده است و زمان زیادی طول کشیده تا به‌درستی انجام شود، اما به راه‌اندازی این ویژگی بسیار نزدیک شده‌ایم. نسخه قابل‌سفارشی‌سازی عنصر select رسماً در مرحله ۲ در WHATWG قرار دارد و علاقه زیادی به آن در مرورگرهای مختلف وجود دارد و نمونه اولیه‌ای برای آزمایش شما از Chrome Canary 130 دردسترس است.
آن را امتحان کنید و بازخوردتان را به ما ارائه دهید
بررسی کنید که نصب Chrome Canary به نسخه ۱۳۰ به‌روز شده باشد و پرچم ویژگی‌های پلاتفرم وب آزمایشی روشن باشد. می‌توانید این پرچم را با رفتن به chrome://flags در نوار نشانی و روشن کردن #experimental-web-platform-features روشن کنید. سپس باید بتوانید نسخه‌های نمایشی Codepen را در این پست ببینید. یا می‌توانید این مجموعه Codepen را بررسی کنید تا همه آن‌ها را در یک مکان مشاهده کنید.
از این فرم برای ارائه بازخورد درباره این ویژگی استفاده کنید. تکمیل آن فقط سه دقیقه طول می‌کشد!
بیایید به ویژگی‌های میانای برنامه‌سازی کاربردی انتخاب سفارشی‌سازی‌شدنی بپردازیم که براساس برچسب انتخاب HTML موجود ساخته شده است.
موافقت کردن با <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> جدید قابل‌سفارشی‌سازی از عملکرد popover و anchor positioning استفاده می‌کند. این مدل با این دو فناوری زیربنایی ساخته شده است. این یعنی فهرست گزینه‌های کرکره‌ای در یک انتخاب به‌عنوان یک پاپ‌اور عمل می‌کند که به دکمه راه‌انداز بازکننده انتخاب متصل است.
می‌توانید از موقعیت‌یابی لنگر برای سبک‌دهی به این ::picker(select) پاپ‌اور استفاده کنید (ازجمله لنگر کردن آن به عناصر دیگر). این مدل محتوا همچنین به این معنی است که سبک‌های پویانمایی لایه بالایی با فهرست گزینه‌ها برای پویانمایی جلوه‌های ورود و خروج کار می‌کنند.
بهبود عنصر <select> موجود
پیش‌تر، تیم Chrome روی ایده عنصر <selectlist> کار می‌کرد. آنچه در این پست شرح داده شده است، طراحی مجدد این ویژگی برای استفاده مجدد از عنصر <select> موجود است.
یکی از مزایای کلیدی استفاده مجدد از عنصر <select> موجود، توانایی ارتقای پیش‌رو عنصر HTML پایه است. درمقایسه با یک عنصر کاملاً جدید، استفاده مجدد از <select> همچنان محتوای معنی‌داری را در صفحه شما ارائه می‌دهد. مثال زیر انتخاب سفارشی‌شده را درمقابل آنچه کاربر در مرورگر پشتیبانی‌نشده می‌بیند نشان می‌دهد:
option در نسخه بازگشتی عنصر 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() برای پویانمایی عرض انتخابگر استفاده می‌شود، از نمایش نمادها تا نمایش عرض کامل گزینه‌ها هنگام نگه داشتن نشانگر روی آن‌ها یا اگر انتخاب گزینه‌ای با 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);
}
محدودیت‌ها و نکات دسترس‌پذیری
قدرت زیاد مسئولیت زیاد به‌همراه دارد. برای اینکه این ویژگی دردسترس باقی بماند، محدودیت‌هایی برای آن وجود دارد.
- به‌جز عناصر
<option>، هنوز هیچ عنصر تعاملی (قابل‌تمرکز) دیگری مثل دکمه‌ها یا عناصر دیگر در<select>مجاز نیست. درحال‌حاضر، مدل محتوای پیشنهادی فقط عناصر<div>،<span>،<option>،<optgroup>،<img>،<svg>، و<hr>را مجاز می‌کند. - دکمه‌های تقسیم درحال‌حاضر در مرحله آزمایشی هستند و ما درحال کار روی یک راه‌حل دسترس‌پذیر هستیم.
در آینده، انتظار می‌رود مدل محتوا گسترش یابد تا انعطاف‌پذیرتر شود، زیرا داستان دسترس‌پذیری برای این تجربه‌ها کامل‌تر می‌شود.
نتیجه‌گیری
مشتاقیم که پیشرفت این ویژگی را ازطریق گروه‌های کاری و نهادهای استاندارد ببینیم و پیشرفتمان را درحین ساختن فعالانه نمونه اولیه و ارزیابی شکل این ویژگی هم‌رسانی کنیم. اگر با چیزی مواجه شدید که طبق انتظارتان کار نمی‌کند، به ما اطلاع دهید!
و درحالی‌که این ویژگی هنوز درحال توسعه است، دوست داریم بازخوردتان را ازطریق این فرم بازخورد کوتاه بشنویم.
از اینکه به ما کمک می‌کنید تا این کار را به‌درستی انجام دهیم و ساختن کنترل‌های فرم دسترس‌پذیر و قابل‌سفارشی‌سازی را در وب آسان‌تر کنیم، سپاس‌گزاریم!