درخواست بازخورد توسعه دهنده: انتخاب قابل تنظیم

یونا کراوتس

کنترل‌های فرم استایل‌سازی مانند عنصر <select> برای سال‌ها به‌عنوان یک نقطه درد بالای توسعه‌دهنده گزارش شده است، و ما روی یک راه‌حل کار می‌کنیم. در حالی که این کار پیچیده است و زمان زیادی طول کشیده است تا به درستی انجام شود، ما به ارائه این ویژگی بسیار نزدیک شده ایم. یک نسخه قابل تنظیم از عنصر انتخاب شده به طور رسمی در مرحله 2 در WHATWG است، با علاقه شدید بین مرورگرها و یک نمونه اولیه برای آزمایش از Chrome Canary 130.

آن را امتحان کنید و نظرات خود را با ما در میان بگذارید

بررسی کنید که نصب Chrome Canary شما به نسخه 130 به‌روزرسانی شده باشد و پرچم‌گذاری ویژگی‌های پلتفرم وب آزمایشی را روشن کنید. می‌توانید با رفتن به chrome://flags در نوار آدرس خود و فعال کردن #experimental-web-platform-features، این پرچم را روشن کنید. سپس، شما باید بتوانید دموهای Codepen را در این پست ببینید. از طرف دیگر، می توانید این مجموعه Codepen را بررسی کنید تا همه آنها را در یک مکان مشاهده کنید.

از این فرم برای ارائه بازخورد در مورد ویژگی استفاده کنید. تکمیل آن فقط سه دقیقه طول می کشد!

بیایید به ویژگی‌های API انتخابی قابل تنظیم، که بر روی تگ انتخابی HTML موجود است، بپردازیم.

شرکت در <select> جدید

برای شرکت در رفتار جدید از ویژگی appearance CSS در دکمه انتخاب درون صفحه و همچنین در انتخابگر انتخاب استفاده کنید. برای انتخاب، appearance: base-select روی عنصر <select> خود و در ::picker(select) قرار دهید.

::picker(select) یک شبه عنصر ارائه شده توسط user-agent جدید است که فقط برای عناصر <select> اعمال می شود که با استفاده از appearance: base-select . این شبه عنصر انتخاب کننده پاپاور است که توسط دکمه انتخاب پایه فعال می شود. همانطور که در کد زیر نشان داده شده است، می توانید هر دو را انتخاب کنید:

select,
::picker(select) {
  appearance: base-select;
}

می‌توانید انتخاب کنید که فقط دکمه درون صفحه را انتخاب کنید، اما نمی‌توانید فقط دکمه انتخابگر را بدون انتخاب دکمه درون صفحه انتخاب کنید. ::picker(select) فقط یک بار ایجاد می شود appearance: base-select به <select> اعمال می شود.

اکنون آماده هستید تا عنصر انتخابی خود را سفارشی کنید. انتخاب جدید قابل تنظیم با برخی از سبک های پیش فرض ارائه می شود که در مرورگرها و سیستم عامل ها یکسان به نظر می رسند. در اینجا انتخاب سفارشی پیش‌فرض در برابر انتخاب موجود در Chrome در macOS به نظر می‌رسد:

سبک عامل پیش‌فرض کاربر برای انتخاب قابل تنظیم در سمت راست. این ممکن است تغییر کند، و ما دوست داریم بازخورد شما را در مورد آن ارائه دهید.
نسخه ی نمایشی یک انتخاب اولیه در مقابل انتخاب قابل تنظیم.

شکستن قطعات

نموداری که بخش هایی از یک انتخاب را نشان می دهد.

هنگامی که در حالت انتخاب قابل تنظیم جدید قرار گرفتید، عناصر جدیدی که اکنون به آنها دسترسی دارید شامل موارد زیر است: - selectedoption : HTML داخلی گزینه ای را که در حال حاضر انتخاب شده است منعکس می کند. - option::before : حاوی یک علامت برای نشان دادن گزینه انتخاب شده در حال حاضر به عنوان هزینه دسترسی پیش فرض است (این امکان تغییر دارد). - ::picker(select) : popover که شامل تمام محتوای خارج از 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 در نسخه بازگشتی عنصر انتخاب ارائه می شود.

یک ظاهر طراحی اولیه

تغییرات ممکن است به سادگی استایل بصری عنصر انتخاب شده باشد. به عنوان مثال، برای به‌روزرسانی سبک‌های دکمه، سبک‌های ماوس و فوکوس یا پس‌زمینه گزینه‌های انتخابی. پس از انتخاب با 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;
}
انتخاب به سبک Gmail با نمادی که گزینه انتخاب شده را نشان می دهد.

گزینه های تعاملی

با کنترل کامل بر استایل ::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);
}
انتخاب تعاملی به سبک Gmail با محتوایی که به‌صورت تدریجی نشان داده می‌شود روی نشانگر یا فوکوس.

محدودیت ها و یادداشت های دسترسی

با قدرت زیاد مسئولیت بزرگی به همراه دارد. برای در دسترس نگه داشتن چیزها، محدودیت هایی برای این ویژگی وجود دارد.

  • به غیر از عناصر <option> ، هیچ عنصر تعاملی (قابل تمرکز) هنوز در داخل <select> مجاز نیست، مانند دکمه‌ها یا عناصر دیگر. در حال حاضر، مدل محتوای پیشنهادی فقط به عناصر <div> ، <span> ، <option> ، <optgroup> ، <img> ، <svg> و <hr> اجازه می‌دهد.
  • دکمه های تقسیم در حال حاضر در مرحله آزمایش هستند زیرا ما یک راه حل قابل دسترس را کار می کنیم.

در آینده، انتظار می‌رود که مدل محتوا برای انعطاف‌پذیری بیشتر گسترش یابد، زیرا داستان دسترسی برای این تجربیات شکل می‌گیرد.

نتیجه گیری

ما از دیدن پیشرفت این ویژگی از طریق گروه های کاری و نهادهای استاندارد هیجان زده هستیم و پیشرفت خود را در حین ساختن نمونه اولیه و ارزیابی شکل این ویژگی به اشتراک می گذاریم. اگر با چیزی مواجه شدید که آنطور که انتظار دارید کار نمی کند، به ما اطلاع دهید!

و در حالی که این ویژگی هنوز در حال توسعه است، ما دوست داریم نظرات شما را از طریق این فرم بازخورد کوتاه بشنویم.

از اینکه بخشی از اطمینان از اینکه ما این موضوع را درست انجام می دهیم و ساختن کنترل های فرم قابل دسترس و قابل تنظیم در وب را آسان تر می کنیم، سپاسگزاریم!

،

یونا کراوتس

کنترل‌های فرم استایل‌سازی مانند عنصر <select> برای سال‌ها به‌عنوان یک نقطه درد بالای توسعه‌دهنده گزارش شده است، و ما روی یک راه‌حل کار می‌کنیم. در حالی که این کار پیچیده است و زمان زیادی طول کشیده است تا به درستی انجام شود، ما به ارائه این ویژگی بسیار نزدیک شده ایم. یک نسخه قابل تنظیم از عنصر انتخاب شده به طور رسمی در مرحله 2 در WHATWG است، با علاقه شدید بین مرورگرها و یک نمونه اولیه برای آزمایش از Chrome Canary 130.

آن را امتحان کنید و نظرات خود را با ما در میان بگذارید

بررسی کنید که نصب Chrome Canary شما به نسخه 130 به‌روزرسانی شده باشد و پرچم‌گذاری ویژگی‌های پلتفرم وب آزمایشی را روشن کنید. می‌توانید با رفتن به chrome://flags در نوار آدرس خود و فعال کردن #experimental-web-platform-features، این پرچم را روشن کنید. سپس، شما باید بتوانید دموهای Codepen را در این پست ببینید. از طرف دیگر، می توانید این مجموعه Codepen را بررسی کنید تا همه آنها را در یک مکان مشاهده کنید.

از این فرم برای ارائه بازخورد در مورد ویژگی استفاده کنید. تکمیل آن فقط سه دقیقه طول می کشد!

بیایید به ویژگی‌های API انتخابی قابل تنظیم، که بر روی تگ انتخابی HTML موجود است، بپردازیم.

شرکت در <select> جدید

برای شرکت در رفتار جدید از ویژگی appearance CSS در دکمه انتخاب درون صفحه و همچنین در انتخابگر انتخاب استفاده کنید. برای انتخاب، appearance: base-select روی عنصر <select> خود و در ::picker(select) قرار دهید.

::picker(select) یک شبه عنصر ارائه شده توسط user-agent جدید است که فقط برای عناصر <select> اعمال می شود که با استفاده از appearance: base-select . این شبه عنصر انتخاب کننده پاپاور است که توسط دکمه انتخاب پایه فعال می شود. همانطور که در کد زیر نشان داده شده است، می توانید هر دو را انتخاب کنید:

select,
::picker(select) {
  appearance: base-select;
}

می‌توانید انتخاب کنید که فقط دکمه درون صفحه را انتخاب کنید، اما نمی‌توانید فقط دکمه انتخابگر را بدون انتخاب دکمه درون صفحه انتخاب کنید. ::picker(select) فقط یک بار ایجاد می شود appearance: base-select به <select> اعمال می شود.

اکنون آماده هستید تا عنصر انتخابی خود را سفارشی کنید. انتخاب جدید قابل تنظیم با برخی از سبک های پیش فرض ارائه می شود که در مرورگرها و سیستم عامل ها یکسان به نظر می رسند. در اینجا انتخاب سفارشی پیش‌فرض در برابر انتخاب موجود در Chrome در macOS به نظر می‌رسد:

سبک عامل پیش‌فرض کاربر برای انتخاب قابل تنظیم در سمت راست. این ممکن است تغییر کند، و ما دوست داریم بازخورد شما را در مورد آن ارائه دهید.
نسخه ی نمایشی یک انتخاب اولیه در مقابل انتخاب قابل تنظیم.

شکستن قطعات

نموداری که بخش هایی از یک انتخاب را نشان می دهد.

هنگامی که در حالت انتخاب قابل تنظیم جدید قرار گرفتید، عناصر جدیدی که اکنون به آنها دسترسی دارید شامل موارد زیر است: - selectedoption : HTML داخلی گزینه ای را که در حال حاضر انتخاب شده است منعکس می کند. - option::before : حاوی یک علامت برای نشان دادن گزینه انتخاب شده در حال حاضر به عنوان هزینه دسترسی پیش فرض است (این امکان تغییر دارد). - ::picker(select) : popover که شامل تمام محتوای خارج از 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 در نسخه بازگشتی عنصر انتخاب ارائه می شود.

یک ظاهر طراحی اولیه

تغییرات ممکن است به سادگی استایل بصری عنصر انتخاب شده باشد. به عنوان مثال، برای به‌روزرسانی سبک‌های دکمه، سبک‌های ماوس و فوکوس یا پس‌زمینه گزینه‌های انتخابی. پس از انتخاب با 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;
}
انتخاب به سبک Gmail با نمادی که گزینه انتخاب شده را نشان می دهد.

گزینه های تعاملی

با کنترل کامل بر استایل ::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);
}
انتخاب تعاملی به سبک Gmail با محتوایی که به‌صورت تدریجی نشان داده می‌شود روی نشانگر یا فوکوس.

محدودیت ها و یادداشت های دسترسی

با قدرت زیاد مسئولیت بزرگی به همراه دارد. برای در دسترس نگه داشتن چیزها، محدودیت هایی برای این ویژگی وجود دارد.

  • به غیر از عناصر <option> ، هیچ عنصر تعاملی (قابل تمرکز) هنوز در داخل <select> مجاز نیست، مانند دکمه‌ها یا عناصر دیگر. در حال حاضر، مدل محتوای پیشنهادی فقط به عناصر <div> ، <span> ، <option> ، <optgroup> ، <img> ، <svg> و <hr> اجازه می‌دهد.
  • دکمه های تقسیم در حال حاضر در مرحله آزمایش هستند زیرا ما یک راه حل قابل دسترس را کار می کنیم.

در آینده، انتظار می‌رود که مدل محتوا برای انعطاف‌پذیری بیشتر گسترش یابد، زیرا داستان دسترسی برای این تجربیات شکل می‌گیرد.

نتیجه گیری

ما از دیدن پیشرفت این ویژگی از طریق گروه های کاری و نهادهای استاندارد هیجان زده هستیم و پیشرفت خود را در حین ساختن نمونه اولیه و ارزیابی شکل این ویژگی به اشتراک می گذاریم. اگر با چیزی مواجه شدید که آنطور که انتظار دارید کار نمی کند، به ما اطلاع دهید!

و در حالی که این ویژگی هنوز در حال توسعه است، ما دوست داریم نظرات شما را از طریق این فرم بازخورد کوتاه بشنویم.

از اینکه بخشی از اطمینان از اینکه ما این موضوع را درست انجام می دهیم و ساختن کنترل های فرم قابل دسترس و قابل تنظیم در وب را آسان تر می کنیم، سپاسگزاریم!

،

یونا کراوتس

کنترل‌های فرم استایل‌سازی مانند عنصر <select> برای سال‌ها به‌عنوان یک نقطه درد بالای توسعه‌دهنده گزارش شده است، و ما روی یک راه‌حل کار می‌کنیم. در حالی که این کار پیچیده است و زمان زیادی طول کشیده است تا به درستی انجام شود، ما به ارائه این ویژگی بسیار نزدیک شده ایم. یک نسخه قابل تنظیم از عنصر انتخاب شده به طور رسمی در مرحله 2 در WHATWG است، با علاقه شدید بین مرورگرها و یک نمونه اولیه برای آزمایش از Chrome Canary 130.

آن را امتحان کنید و نظرات خود را با ما در میان بگذارید

بررسی کنید که نصب Chrome Canary شما به نسخه 130 به‌روزرسانی شده باشد و پرچم‌گذاری ویژگی‌های پلتفرم وب آزمایشی را روشن کنید. می‌توانید با رفتن به chrome://flags در نوار آدرس خود و فعال کردن #experimental-web-platform-features، این پرچم را روشن کنید. سپس، شما باید بتوانید دموهای Codepen را در این پست ببینید. از طرف دیگر، می توانید این مجموعه Codepen را بررسی کنید تا همه آنها را در یک مکان مشاهده کنید.

از این فرم برای ارائه بازخورد در مورد ویژگی استفاده کنید. تکمیل آن فقط سه دقیقه طول می کشد!

بیایید به ویژگی‌های API انتخابی قابل تنظیم، که بر روی تگ انتخابی HTML موجود است، بپردازیم.

شرکت در <select> جدید

برای شرکت در رفتار جدید از ویژگی appearance CSS در دکمه انتخاب درون صفحه و همچنین در انتخابگر انتخاب استفاده کنید. برای انتخاب، appearance: base-select روی عنصر <select> خود و در ::picker(select) قرار دهید.

::picker(select) یک شبه عنصر ارائه شده توسط user-agent جدید است که فقط برای عناصر <select> اعمال می شود که با استفاده از appearance: base-select . این شبه عنصر انتخاب کننده پاپاور است که توسط دکمه انتخاب پایه فعال می شود. همانطور که در کد زیر نشان داده شده است، می توانید هر دو را انتخاب کنید:

select,
::picker(select) {
  appearance: base-select;
}

می‌توانید انتخاب کنید که فقط دکمه درون صفحه را انتخاب کنید، اما نمی‌توانید فقط دکمه انتخابگر را بدون انتخاب دکمه درون صفحه انتخاب کنید. ::picker(select) فقط یک بار ایجاد می شود appearance: base-select به <select> اعمال می شود.

اکنون آماده هستید تا عنصر انتخابی خود را سفارشی کنید. انتخاب جدید قابل تنظیم با برخی از سبک های پیش فرض ارائه می شود که در مرورگرها و سیستم عامل ها یکسان به نظر می رسند. در اینجا انتخاب سفارشی پیش‌فرض در برابر انتخاب موجود در Chrome در macOS به نظر می‌رسد:

سبک عامل پیش‌فرض کاربر برای انتخاب قابل تنظیم در سمت راست. این ممکن است تغییر کند، و ما دوست داریم بازخورد شما را در مورد آن ارائه دهید.
نسخه ی نمایشی یک انتخاب اولیه در مقابل انتخاب قابل تنظیم.

شکستن قطعات

نموداری که بخش هایی از یک انتخاب را نشان می دهد.

هنگامی که در حالت انتخاب قابل تنظیم جدید قرار گرفتید، عناصر جدیدی که اکنون به آنها دسترسی دارید شامل موارد زیر است: - selectedoption : HTML داخلی گزینه ای را که در حال حاضر انتخاب شده است منعکس می کند. - option::before : حاوی یک علامت برای نشان دادن گزینه انتخاب شده در حال حاضر به عنوان هزینه دسترسی پیش فرض است (این امکان تغییر دارد). - ::picker(select) : popover که شامل تمام محتوای خارج از 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 در نسخه بازگشتی عنصر انتخاب ارائه می شود.

یک ظاهر طراحی اولیه

تغییرات ممکن است به سادگی استایل بصری عنصر انتخاب شده باشد. به عنوان مثال، برای به‌روزرسانی سبک‌های دکمه، سبک‌های ماوس و فوکوس یا پس‌زمینه گزینه‌های انتخابی. پس از انتخاب با 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;
}
انتخاب به سبک Gmail با نمادی که گزینه انتخاب شده را نشان می دهد.

گزینه های تعاملی

با کنترل کامل بر استایل ::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);
}
انتخاب تعاملی به سبک Gmail با محتوایی که به‌صورت تدریجی نشان داده می‌شود روی نشانگر یا فوکوس.

محدودیت ها و یادداشت های دسترسی

با قدرت زیاد مسئولیت بزرگی به همراه دارد. برای در دسترس نگه داشتن چیزها، محدودیت هایی برای این ویژگی وجود دارد.

  • به غیر از عناصر <option> ، هیچ عنصر تعاملی (قابل تمرکز) هنوز در داخل <select> مجاز نیست، مانند دکمه‌ها یا عناصر دیگر. در حال حاضر، مدل محتوای پیشنهادی فقط به عناصر <div> ، <span> ، <option> ، <optgroup> ، <img> ، <svg> و <hr> اجازه می‌دهد.
  • دکمه های تقسیم در حال حاضر در مرحله آزمایش هستند زیرا ما یک راه حل قابل دسترس را کار می کنیم.

در آینده، انتظار می‌رود که مدل محتوا برای انعطاف‌پذیری بیشتر گسترش یابد، زیرا داستان دسترسی برای این تجربیات شکل می‌گیرد.

نتیجه گیری

ما از دیدن پیشرفت این ویژگی از طریق گروه های کاری و نهادهای استاندارد هیجان زده هستیم و پیشرفت خود را در حین ساختن نمونه اولیه و ارزیابی شکل این ویژگی به اشتراک می گذاریم. اگر با چیزی مواجه شدید که آنطور که انتظار دارید کار نمی کند، به ما اطلاع دهید!

و در حالی که این ویژگی هنوز در حال توسعه است، ما دوست داریم نظرات شما را از طریق این فرم بازخورد کوتاه بشنویم.

از اینکه بخشی از اطمینان از اینکه ما این موضوع را درست انجام می دهیم و ساختن کنترل های فرم قابل دسترس و قابل تنظیم در وب را آسان تر می کنیم، سپاسگزاریم!

،

یونا کراوتس

کنترل‌های فرم استایل‌سازی مانند عنصر <select> برای سال‌ها به‌عنوان یک نقطه درد بالای توسعه‌دهنده گزارش شده است، و ما روی یک راه‌حل کار می‌کنیم. در حالی که این کار پیچیده است و زمان زیادی طول کشیده است تا به درستی انجام شود، ما به ارائه این ویژگی بسیار نزدیک شده ایم. یک نسخه قابل تنظیم از عنصر انتخاب شده به طور رسمی در مرحله 2 در WHATWG است، با علاقه شدید بین مرورگرها و یک نمونه اولیه برای آزمایش از Chrome Canary 130.

آن را امتحان کنید و نظرات خود را با ما در میان بگذارید

بررسی کنید که نصب Chrome Canary شما به نسخه 130 به‌روزرسانی شده باشد و پرچم‌گذاری ویژگی‌های پلتفرم وب آزمایشی را روشن کنید. می‌توانید با رفتن به chrome://flags در نوار آدرس خود و فعال کردن #experimental-web-platform-features، این پرچم را روشن کنید. سپس، شما باید بتوانید دموهای Codepen را در این پست ببینید. از طرف دیگر، می توانید این مجموعه Codepen را بررسی کنید تا همه آنها را در یک مکان مشاهده کنید.

از این فرم برای ارائه بازخورد در مورد ویژگی استفاده کنید. تکمیل آن فقط سه دقیقه طول می کشد!

بیایید به ویژگی‌های API انتخابی قابل تنظیم، که بر روی تگ انتخابی HTML موجود است، بپردازیم.

شرکت در <select> جدید

برای شرکت در رفتار جدید از ویژگی appearance CSS در دکمه انتخاب درون صفحه و همچنین در انتخابگر انتخاب استفاده کنید. برای انتخاب، appearance: base-select روی عنصر <select> خود و در ::picker(select) قرار دهید.

::picker(select) یک شبه عنصر ارائه شده توسط user-agent جدید است که فقط برای عناصر <select> اعمال می شود که با استفاده از appearance: base-select . این شبه عنصر انتخاب کننده پاپاور است که توسط دکمه انتخاب پایه فعال می شود. همانطور که در کد زیر نشان داده شده است، می توانید هر دو را انتخاب کنید:

select,
::picker(select) {
  appearance: base-select;
}

می‌توانید انتخاب کنید که فقط دکمه درون صفحه را انتخاب کنید، اما نمی‌توانید فقط دکمه انتخابگر را بدون انتخاب دکمه درون صفحه انتخاب کنید. ::picker(select) فقط یک بار ایجاد می شود appearance: base-select به <select> اعمال می شود.

اکنون آماده هستید تا عنصر انتخابی خود را سفارشی کنید. انتخاب جدید قابل تنظیم با برخی از سبک های پیش فرض ارائه می شود که در مرورگرها و سیستم عامل ها یکسان به نظر می رسند. در اینجا انتخاب سفارشی پیش‌فرض در برابر انتخاب موجود در Chrome در macOS به نظر می‌رسد:

سبک عامل پیش‌فرض کاربر برای انتخاب قابل تنظیم در سمت راست. این ممکن است تغییر کند، و ما دوست داریم بازخورد شما را در مورد آن ارائه دهید.
نسخه ی نمایشی یک انتخاب اولیه در مقابل انتخاب قابل تنظیم.

شکستن قطعات

نموداری که بخش هایی از یک انتخاب را نشان می دهد.

هنگامی که در حالت انتخاب قابل تنظیم جدید قرار گرفتید، عناصر جدیدی که اکنون به آنها دسترسی دارید شامل موارد زیر است: - selectedoption : HTML داخلی گزینه ای را که در حال حاضر انتخاب شده است منعکس می کند. - option::before : حاوی یک علامت برای نشان دادن گزینه انتخاب شده در حال حاضر به عنوان هزینه دسترسی پیش فرض است (این امکان تغییر دارد). - ::picker(select) : popover که شامل تمام محتوای خارج از 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 در نسخه بازگشتی عنصر انتخاب ارائه می شود.

یک ظاهر طراحی اولیه

تغییرات ممکن است به سادگی استایل بصری عنصر انتخاب شده باشد. به عنوان مثال، برای به‌روزرسانی سبک‌های دکمه، سبک‌های ماوس و فوکوس یا پس‌زمینه گزینه‌های انتخابی. پس از انتخاب با 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;
}
انتخاب به سبک Gmail با نمادی که گزینه انتخاب شده را نشان می دهد.

گزینه های تعاملی

با کنترل کامل بر استایل ::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);
}
انتخاب تعاملی به سبک Gmail با محتوایی که به‌صورت تدریجی نشان داده می‌شود روی نشانگر یا فوکوس.

محدودیت ها و یادداشت های دسترسی

با قدرت زیاد مسئولیت بزرگی به همراه دارد. برای در دسترس نگه داشتن چیزها، محدودیت هایی برای این ویژگی وجود دارد.

  • به غیر از عناصر <option> ، هیچ عنصر تعاملی (قابل تمرکز) هنوز در داخل <select> مجاز نیست، مانند دکمه‌ها یا عناصر دیگر. در حال حاضر، مدل محتوای پیشنهادی فقط به عناصر <div> ، <span> ، <option> ، <optgroup> ، <img> ، <svg> و <hr> اجازه می‌دهد.
  • دکمه های تقسیم در حال حاضر در مرحله آزمایش هستند زیرا ما یک راه حل قابل دسترس را کار می کنیم.

در آینده، انتظار می‌رود که مدل محتوا برای انعطاف‌پذیری بیشتر گسترش یابد، زیرا داستان دسترسی برای این تجربیات شکل می‌گیرد.

نتیجه گیری

ما از دیدن پیشرفت این ویژگی از طریق گروه های کاری و نهادهای استاندارد هیجان زده هستیم و پیشرفت خود را در حین ساختن نمونه اولیه و ارزیابی شکل این ویژگی به اشتراک می گذاریم. اگر با چیزی مواجه شدید که آنطور که انتظار دارید کار نمی کند، به ما اطلاع دهید!

و در حالی که این ویژگی هنوز در حال توسعه است، ما دوست داریم نظرات شما را از طریق این فرم بازخورد کوتاه بشنویم.

از اینکه بخشی از اطمینان از اینکه ما این موضوع را درست انجام می دهیم و ساختن کنترل های فرم قابل دسترس و قابل تنظیم در وب را آسان تر می کنیم، سپاسگزاریم!