หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Una Kravets

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

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

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

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

หมายเหตุ: สำหรับความคิดเห็นรอบแรกนี้ เราเข้าใจดีว่าการใช้งานการช่วยเหลือพิเศษใน Chrome Canary ยังไม่เสร็จสมบูรณ์ (แต่ยังมีการติดตั้งใช้งานเบื้องต้นให้คุณลองใช้แล้ว) ทีมที่ประกอบด้วยผู้เขียน ผู้ติดตั้งใช้งานเบราว์เซอร์ และผู้เชี่ยวชาญด้านเทคโนโลยีความช่วยเหลือพิเศษกำลังทํางานอย่างหนักเพื่อให้รูปแบบผู้เขียนที่ถูกต้องเข้าถึงได้ เราอยากทราบความคิดเห็นของคุณเกี่ยวกับการติดตั้งใช้งานครั้งแรก

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

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

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

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

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

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

บทสรุป

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

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

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