Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

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

Una Kravets

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

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

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

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

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

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

การเลือกใช้ `<select>` ใหม่

หากต้องการเลือกใช้ลักษณะการทำงานใหม่ ให้ใช้พร็อพเพอร์ตี้ CSS appearance ทั้งในปุ่มเลือกในหน้าเว็บและในเครื่องมือเลือก หากต้องการเลือกใช้ ให้ตั้งค่า 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>

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

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

การสาธิตการเลือกแบบพื้นฐานเทียบกับการเลือกที่ปรับแต่งได้

การแยกส่วนต่างๆ

แผนภาพแสดงส่วนต่างๆ ขององค์ประกอบ select

เมื่ออยู่ในโหมดเลือกที่ปรับแต่งได้ใหม่แล้ว องค์ประกอบใหม่ที่คุณเข้าถึงได้มีดังนี้ - selectedoption: แสดง HTML ภายในของตัวเลือกที่เลือกอยู่ในปัจจุบัน - option::before: มีเครื่องหมายถูกเพื่อระบุตัวเลือกที่เลือกไว้ในปัจจุบันเป็นความสามารถในการเข้าถึงเริ่มต้น (อาจมีการเปลี่ยนแปลง) - ::picker(select): ป๊อปโอเวอร์ที่มีเนื้อหาทั้งหมดนอก button ภายในองค์ประกอบ select ที่ปรับแต่งได้

คุณจัดสไตล์ส่วนใดก็ได้ขององค์ประกอบ select เช่น คุณสามารถเพิ่มเนื้อหาที่ไม่ใช่แบบอินเทอร์แอกทีฟตามต้องการภายในองค์ประกอบ <option>, จัดรูปแบบปุ่มในหน้าเว็บซึ่งจะเปิดรายการแบบเลื่อนลงขององค์ประกอบ select และจัดรูปแบบรายการตัวเลือกแบบเลื่อนลง (::picker(select))

นอกจากนี้ คุณยังจัดสไตล์ button, ตัวบ่งชี้ลูกศรที่กำหนดเอง และเพิ่มเนื้อหาที่กำหนดเองภายในและรอบๆ องค์ประกอบใดก็ได้ นอกจากการเพิ่มเนื้อหาแล้ว คุณยังซ่อนองค์ประกอบใหม่และรูปแบบเริ่มต้นเหล่านี้ได้ด้วย ตัวอย่างเช่น หากไม่ต้องการให้มีเครื่องหมายถูกในองค์ประกอบเทียม ::before ของตัวเลือก ให้ใช้ CSS ต่อไปนี้

/* Remove the default checkmark from the selected option */
option::before {
 display: none;
}

แม้ว่าจะมีองค์ประกอบภายใน select ได้ไม่จำกัด แต่เบราว์เซอร์จะจัดกลุ่มทุกอย่างที่อยู่นอกองค์ประกอบ <button> ไว้ในองค์ประกอบจำลอง ::picker(select) ซึ่งทำงานเป็นป๊อปโอเวอร์ที่ยึดกับปุ่ม <button>นี้จะเปิด/ปิด::picker(select) ตัวเลือกและองค์ประกอบอื่นๆ ที่อยู่ภายใน select โดยตรงจะถูกยกขึ้นไปไว้ใน ::picker(select) หรือคุณจะนำ Wrapper ของคุณเองมาใช้เพื่อวัตถุประสงค์ในการจัดรูปแบบก็ได้ Wrapper นี้จะวางอยู่ภายในองค์ประกอบเทียม ::picker(select) ด้วย

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

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

คุณสามารถใช้การกำหนดตำแหน่ง Anchor เพื่อจัดสไตล์ป๊อปโอเวอร์ ::picker(select) นี้ (รวมถึงทำให้ป๊อปโอเวอร์ยึดกับองค์ประกอบอื่นๆ) โมเดลเนื้อหานี้ยังหมายความว่ารูปแบบภาพเคลื่อนไหวของเลเยอร์บนสุดจะทำงานร่วมกับรายการตัวเลือกเพื่อสร้างภาพเคลื่อนไหวของเอฟเฟกต์การเข้าและออก

ปรับปรุงองค์ประกอบ `<select>` ที่มีอยู่

ก่อนหน้านี้ ทีม Chrome ได้พัฒนาแนวคิดเกี่ยวกับองค์ประกอบ <selectlist> สิ่งที่อธิบายในโพสต์นี้คือฟีเจอร์ที่ออกแบบใหม่เพื่อนำองค์ประกอบ <select> ที่มีอยู่มาใช้ซ้ำแทน

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

เนื้อหาข้อความทั้งหมดภายใน `option` จะแสดงผลในองค์ประกอบ select เวอร์ชันสำรอง

การจัดรูปแบบพื้นฐาน

การเปลี่ยนแปลงอาจเป็นเรื่องง่ายๆ เช่น การจัดรูปแบบภาพขององค์ประกอบที่เลือก เช่น หากต้องการอัปเดตสไตล์ปุ่ม สไตล์การวางเมาส์และโฟกัส หรือพื้นหลังของตัวเลือกที่เลือก หลังจากเลือกใช้ appearance: base-select แล้ว ให้ใช้ CSS ที่ต้องการกับส่วนที่เลือก

การเปลี่ยนรูปแบบของส่วนต่างๆ ขององค์ประกอบ select ด้วยปุ่มเริ่มต้น

หากต้องการปรับแต่งตัวบ่งชี้ลูกศร ให้เพิ่มปุ่มและลูกศรของคุณเองภายในส่วนที่เลือก

<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 ของ 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() ใหม่จะใช้เพื่อทำให้ความกว้างของเครื่องมือเลือกเคลื่อนไหวจากการแสดงไอคอนไปเป็นการแสดงความกว้างเต็มของตัวเลือกเมื่อวางเมาส์เหนือ หรือหากการเลือกมีตัวเลือกที่มี focus-visible

/* 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> เท่านั้น
ปุ่มแยกอยู่ในขั้นทดลองขณะที่เรากำลังหาโซลูชันที่เข้าถึงได้

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

บทสรุป

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

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

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