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

Una Kravets

کنترل‌های فرم استایل‌سازی مانند عنصر <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> همچنان محتوای معنی‌داری را در صفحه شما ارائه می‌کند. مثال زیر انتخاب سفارشی شده را در مقابل آنچه یک کاربر در یک مرورگر پشتیبانی نشده می بیند نشان می دهد:

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

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

/* 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> اجازه می‌دهد.
• دکمه های تقسیم در حال حاضر در مرحله آزمایش هستند زیرا ما یک راه حل قابل دسترس را کار می کنیم.

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

نتیجه گیری

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

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

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

Una Kravets

کنترل‌های فرم استایل‌سازی مانند عنصر <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> همچنان محتوای معنی‌داری را در صفحه شما ارائه می‌کند. مثال زیر انتخاب سفارشی شده را در مقابل آنچه یک کاربر در یک مرورگر پشتیبانی نشده می بیند نشان می دهد:

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

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

/* 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> اجازه می‌دهد.
• دکمه های تقسیم در حال حاضر در مرحله آزمایش هستند زیرا ما یک راه حل قابل دسترس را کار می کنیم.

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

نتیجه گیری

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

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

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

Una Kravets

کنترل‌های فرم استایل‌سازی مانند عنصر <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> همچنان محتوای معنی‌داری را در صفحه شما ارائه می‌کند. مثال زیر انتخاب سفارشی شده را در مقابل آنچه یک کاربر در یک مرورگر پشتیبانی نشده می بیند نشان می دهد:

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

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

/* 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> اجازه می‌دهد.
• دکمه های تقسیم در حال حاضر در مرحله آزمایش هستند زیرا ما یک راه حل قابل دسترس را کار می کنیم.

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

نتیجه گیری

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

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

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

Una Kravets

کنترل‌های فرم استایل‌سازی مانند عنصر <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 on MacOS:

تجزیه قطعات

هنگامی که در حالت جدید انتخابی قابل تنظیم هستید ، عناصر جدیدی که اکنون به آن دسترسی دارید شامل موارد زیر است: - selectedoption : HTML داخلی گزینه ای را که در حال حاضر انتخاب شده است منعکس می کند. - option::before : شامل یک علامت چک برای نشان دادن گزینه انتخاب شده در حال حاضر به عنوان هزینه دسترسی پیش فرض (این در معرض تغییر است). - ::picker(select) : POPOVER که شامل تمام مطالب خارج از button در داخل یک انتخاب قابل تنظیم است.

می توانید هر بخشی از انتخاب را سبک کنید. به عنوان مثال ، می توانید محتوای غیر تعاملی دلخواه را در عناصر <option> اضافه کنید ، دکمه درون صفحه را سبک کنید که کشویی را باز می کند و لیست کشویی گزینه ها را سبک می کند (انتخاب ::picker(select) ) .

همچنین می توانید button را سبک کنید ، نشانگر فلش خود را بیاورید و محتوای دلخواه را در داخل و اطراف هر یک از عناصر اضافه کنید. علاوه بر اضافه کردن محتوا ، می توانید هر یک از این عناصر جدید و سبک های پیش فرض را پنهان کنید. به عنوان مثال ، اگر نمی خواهید یک علامت نشانگر در :: قبل از شبه عنصر گزینه گزینه ، از 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>

New Confucizable <select> از قابلیت های Popover و Anchor استفاده می کند. این کشور با این دو فناوری اساسی ساخته شده است. این بدان معنی است که لیست گزینه کشویی در یک انتخاب به عنوان یک پوور که به دکمه ماشه لنگر می رود که انتخاب را باز می کند ، عمل می کند.

شما می توانید از موقعیت یابی لنگر استفاده کنید تا سبک این ::picker(select) Popover (از جمله آن را به عناصر دیگر لنگر بزنید). این مدل محتوا همچنین به این معنی است که سبک های انیمیشن لایه بالا با لیست گزینه برای تحریک جلوه های ورود و خروج کار می کنند.

عنصر <select> موجود را تقویت کنید

پیش از این ، تیم Chrome در حال کار بر روی ایده یک عنصر <selectlist> بود. آنچه در این پست توضیح داده شده است این است که ویژگی برای استفاده مجدد از عنصر <select> موجود دوباره طراحی شده است.

یکی از مزایای اصلی استفاده مجدد از عنصر <select> موجود ، امکان تقویت تدریجی عنصر اساسی HTML است. در مقایسه با یک عنصر کاملاً جدید ، استفاده مجدد از <select> هنوز هم محتوای معنی دار را در صفحه شما ارائه می دهد. مثال زیر انتخاب سفارشی را در مقابل آنچه کاربر در یک مرورگر بدون پشتیبانی مشاهده می کند ، نشان می دهد:

یک ظاهر طراحی شده

تغییرات ممکن است به سادگی یک ظاهر طراحی بصری از عنصر انتخاب باشد. به عنوان مثال ، برای به روزرسانی سبک های دکمه ، سبک های شناور و تمرکز یا پس زمینه گزینه های 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 UI است ، که برای صرفه جویی در فضا ، برچسب پس از انتخاب گزینه حذف می شود. این کار را با اتصال به عنصر <selectedoption> برای یک ظاهر طراحی انجام دهید. <option> شامل همه نشانه های زیر است:

 <option value="reply-all">
    <img class="material-symbol"  src="material-symbol-reply.png">
    <span class="text">Reply all</span>
  </option>

.text برای مخفی کردن محتوای متن و فقط نماد display: none نشان <selectedoption> :

selectedoption .text {
  display: none;
}

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

با کنترل کامل بر روی یک ظاهر طراحی شده ::picker(select) ، روی نسخه ی نمایشی قبلی بسازید تا آن را در Hover و Focus تعاملی کنید. در این نسخه ی نمایشی ، از تابع جدید 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);
}

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

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

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

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

نتیجه گیری

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

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

با تشکر از شما برای اینکه بخشی از اطمینان از این حق را دارید و ساخت کنترل فرم های قابل تنظیم و قابل تنظیم را در وب آسان تر می کنیم!