تیک سفارشی در رابط کاربری؛ مشکل قدیمی، راهحل تازه
فرانتاندخلاصهٔ کاملتر
استایلدادن به تیک (checkmark) در رابط کاربری یه مسئلهی قدیمیه و این مقاله نشون میده چطور با بهبود تدریجی (progressive enhancement) میشه باهاش کنار اومد.
شبهالمان تازهی ::checkmark که در ماژول CSS Form Control Styling Level 1 معرفی شده، یه قابلیت قدرتمنده: قراره برای استایلدادن به حالت انتخابشدهی المانهای ورودی مثل dropdownِ ، چکباکسها و رادیوباتنها بهکار بره. اما دو تا مشکل جدی داره. اول اینکه در زمان نگارش مقاله، دو مرورگر مهم یعنی سافاری و فایرفاکس ازش پشتیبانی نمیکنن. دوم اینکه با وجود اینکه طبق مشخصات قراره از چکباکس و رادیو و option پشتیبانی کنه، فعلاً فقط برای المانهای داخل کار میکنه.
این یعنی ::checkmark با همهی سادگی و قدرتش هنوز خیلی محدوده و نمیشه کامل بهش تکیه کرد. پس سؤال اینه: باید به همون راهحلهای سنتی برگردیم؟ آیا اونها بهترن؟
مقاله نشون میده روش سنتی ساختن تیک سفارشی (مشابه چیزی که در میبینی) چقدر کار میبره: باید یه dropdown سفارشی بسازی که کلی حالت تعاملی و قانون رو در نظر بگیره؛ از نمایش گزینهی انتخابشده و باز/بستهشدن لیست گرفته تا بستهشدن با کلیک بیرون، آیکن سفارشی picker و آیکن سفارشی تیک برای گزینهی انتخابشده. مرورگر اینها رو برای المانهای غیرسمانتیک بهصورت آماده نمیده. نویسنده در نهایت این رویکرد سنتی رو با راهحل مدرن ::checkmark مقایسه میکنه و توصیههایی برای انتخاب بینشون میده.
نکات کلیدی:
- شبهالمان ::checkmark برای استایلدادن به حالت انتخابشدهی فرمها معرفی شده
- دو محدودیت بزرگ: نبود پشتیبانی در سافاری و فایرفاکس، و کارکردن فقط برای option داخل select
- به همین خاطر هنوز نمیشه کامل بهش تکیه کرد
- مقاله راهحلهای سنتی تیک سفارشی را با ::checkmark در چارچوب بهبود تدریجی مقایسه میکنه
