คำขอความคิดเห็นของนักพัฒนาแอป: ตัวเลือกที่ปรับแต่งได้

Una Kravets

การจัดสไตล์ตัวควบคุมแบบฟอร์ม เช่น องค์ประกอบ <select> ได้รับการรายงานว่าเป็นปัญหาหลักของนักพัฒนาซอฟต์แวร์มาหลายปีแล้ว และเราก็พยายามหาวิธีแก้ปัญหานี้ แม้ว่างานนี้จะซับซ้อนและใช้เวลานาน แต่เรากําลังใกล้จะเปิดตัวฟีเจอร์นี้ องค์ประกอบ select เวอร์ชันที่ปรับแต่งได้อยู่ในระยะที่ 2 อย่างเป็นทางการใน WHATWG โดยมีความสนใจในการใช้งานข้ามเบราว์เซอร์อย่างมาก และมีต้นแบบให้คุณทดสอบได้จาก Chrome Canary 130

ลองใช้และแสดงความคิดเห็น

ตรวจสอบว่าการติดตั้ง Chrome Canary อัปเดตเป็นเวอร์ชัน 130 แล้ว และคุณเปิดใช้ Flag ฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลองไว้ คุณเปิด Flag นี้ได้โดยไปที่ chrome://flags ในแถบที่อยู่ แล้วเปิด #experimental-web-platform-features จากนั้นคุณควรจะเห็นตัวอย่าง Codepen ในโพสต์นี้ หรือจะดูคอลเล็กชัน Codepen นี้เพื่อดูทั้งหมดในที่เดียวก็ได้

ใช้แบบฟอร์มนี้เพื่อแสดงความคิดเห็นเกี่ยวกับฟีเจอร์ โดยใช้เวลาเพียง 3 นาที

มาเจาะลึกฟีเจอร์ของ Select API ที่กําหนดเองได้ ซึ่งสร้างขึ้นจากแท็ก HTML Select ที่มีอยู่

เลือกใช้ <select> เวอร์ชันใหม่

หากต้องการเลือกใช้ลักษณะการทำงานใหม่ ให้ใช้พร็อพเพอร์ตี้ appearance ของ CSS ทั้งในปุ่มเลือกในหน้าเว็บและเครื่องมือเลือก หากต้องการเลือกใช้ ให้ตั้งค่า appearance: base-select บนองค์ประกอบ <select> และ ::picker(select)

::picker(select) เป็นองค์ประกอบจำลองใหม่ที่ User Agent ระบุ ซึ่งมีผลกับองค์ประกอบ <select> ที่ได้รับการเลือกให้ใช้ลักษณะการทำงานใหม่โดยใช้ appearance: base-select เท่านั้น องค์ประกอบจำลองเครื่องมือเลือกนี้คือป๊อปอัปที่ปุ่มเลือกพื้นฐานเรียกให้แสดง คุณเลือกรับทั้ง 2 รายการได้ดังที่แสดงในโค้ดต่อไปนี้

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

คุณเลือกเลือกใช้เฉพาะปุ่มในหน้าได้ แต่เลือกเลือกใช้เฉพาะป๊อปอัปเครื่องมือเลือกโดยไม่เลือกใช้ปุ่มในหน้าไม่ได้ ระบบจะสร้าง ::picker(select) เพียงครั้งเดียวเมื่อมีการใช้ appearance: base-select กับ <select>

ตอนนี้คุณก็พร้อมปรับแต่งองค์ประกอบที่เลือกแล้ว ตัวเลือกแบบใหม่ที่กำหนดค่าได้มาพร้อมกับสไตล์เริ่มต้นบางสไตล์ที่ดูเหมือนกันในเบราว์เซอร์และระบบปฏิบัติการต่างๆ ตัวเลือกที่ปรับแต่งเริ่มต้นจะมีลักษณะดังนี้เมื่อเทียบกับตัวเลือกที่มีอยู่ใน Chrome บน macOS

รูปแบบ User Agent เริ่มต้นสำหรับรายการที่ปรับแต่งได้ที่ด้านขวา ข้อมูลนี้อาจมีการเปลี่ยนแปลงและเรายินดีรับฟังความคิดเห็นของคุณ
การสาธิตการเลือกพื้นฐานเทียบกับการเลือกที่ปรับแต่งได้

รายละเอียดของส่วนต่างๆ

แผนภาพแสดงบางส่วนของรายการที่เลือก

เมื่ออยู่ในโหมดเลือกแบบปรับแต่งใหม่ องค์ประกอบใหม่ที่คุณมีสิทธิ์เข้าถึงมีดังนี้ - 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) ระบบจะยกตัวเลือกและองค์ประกอบอื่นๆ ภายใน select โดยตรงไปยัง ::picker(select) หรือคุณจะนํา Wrapper ของคุณเองมาเพื่อจัดสไตล์ก็ได้ ไวลด์การ์ดนี้จะวางไว้ภายในองค์ประกอบจำลอง ::picker(select) ด้วย

<select>
  <button>
    <selectedoption></selectedoption>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

<select> ที่ปรับแต่งได้แบบใหม่ใช้ฟังก์ชันการทำงานจากป๊อปอัปและตำแหน่งของจุดยึด ซึ่งสร้างขึ้นด้วยเทคโนโลยีพื้นฐาน 2 อย่างนี้ ซึ่งหมายความว่ารายการตัวเลือกแบบเลื่อนลงภายในรายการแบบเลือกจะทําหน้าที่เป็นป๊อปอัปที่ยึดกับปุ่มทริกเกอร์ที่เปิดรายการแบบเลือก

คุณสามารถใช้การวางตำแหน่งแอตทริบิวต์ "แองเคอร์" เพื่อจัดสไตล์ป๊อปอัป ::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>
ภาพหน้าจอเครื่องมือเลือกสกุลเงิน

จัดสไตล์ตัวเลือกที่เลือก

คุณอาจต้องการให้ตัวเลือกที่เลือกแสดงในสถานะที่เลือกแตกต่างจากในเมนูแบบเลื่อนลง ตัวอย่างของ UI นี้คือ UI ของ 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> เท่านั้น
  • ปุ่มแยกกำลังอยู่ในขั้นทดลองขณะที่เราหาวิธีเข้าถึงได้

ในอนาคต เราคาดว่ารูปแบบเนื้อหาจะขยายการให้บริการให้มีความยืดหยุ่นมากขึ้นเมื่อเราพัฒนาประสบการณ์การใช้งานเหล่านี้ให้เข้าถึงได้ง่ายขึ้น

บทสรุป

เรายินดีที่จะได้เห็นความคืบหน้าของฟีเจอร์นี้ผ่านกลุ่มทำงานและหน่วยงานมาตรฐาน และแชร์ความคืบหน้าขณะที่เราสร้างต้นแบบและประเมินรูปร่างของฟีเจอร์นี้ หากพบปัญหาใดๆ ที่ไม่ทำงานตามที่คาดไว้ โปรดแจ้งให้เราทราบ

และในขณะที่ฟีเจอร์นี้ยังอยู่ระหว่างการพัฒนา เรายินดีรับฟังความคิดเห็นของคุณผ่านแบบฟอร์มความคิดเห็นสั้นๆ นี้

ขอขอบคุณที่ช่วยให้มั่นใจว่าเราดำเนินการนี้อย่างถูกต้องและช่วยให้สร้างตัวควบคุมแบบฟอร์มที่เข้าถึงได้และปรับแต่งได้บนเว็บได้ง่ายขึ้น