การเปลี่ยนแปลงการรับช่วงค่าสำหรับการจัดรูปแบบการเลือก CSS

Stephen Chenney

เผยแพร่: 8 ตุลาคม 2024

ตั้งแต่ Chrome 131 เป็นต้นไป การสืบทอดไฮไลต์ CSS สำหรับคลาสจำลอง ::selection และ ::target-text จะเปลี่ยนแปลง การดำเนินการนี้เพื่อสร้างรูปแบบที่เข้าใจง่ายขึ้นสำหรับการรับช่วงและสอดคล้องกับคลาสจำลอง ::highlight, ::spelling-error และ ::grammar-error ที่เพิ่งเพิ่มเข้ามา โพสต์นี้จะอธิบายการเปลี่ยนแปลงนี้ ซึ่งไม่ควรทำให้เกิดผลกระทบที่เห็นได้ชัดเจนสำหรับเว็บไซต์ส่วนใหญ่

การจัดรูปแบบรายการที่เลือก

การจัดรูปแบบลักษณะที่ปรากฏของข้อความที่เลือกสามารถสื่อความหมายให้ผู้ใช้ทราบได้ เช่น วัตถุประสงค์ของเนื้อหาที่เลือก หรือไม่สามารถเลือกข้อความได้เลย ตัวอย่างเช่น GitHub จะเปลี่ยนสีโค้ดที่เลือกให้แตกต่างจากโครงสร้างไดเรกทอรีที่เลือก

CSS รองรับการจัดรูปแบบการเลือกด้วยองค์ประกอบสมมติ ::selection ซึ่งเป็นองค์ประกอบสมมติชุดหนึ่งที่เรียกว่าองค์ประกอบสมมติไฮไลต์ องค์ประกอบจำลองเหล่านี้ควบคุมลักษณะที่ข้อความปรากฏภายใต้การดำเนินการต่างๆ ที่เกิดจากผู้ใช้ เบราว์เซอร์ หรือสคริปต์ นอกจากการเลือกแล้ว คุณยังจัดรูปแบบข้อผิดพลาดในการสะกด (::spelling-error) ข้อผิดพลาดทางไวยากรณ์ (::grammar-error) เป้าหมายข้อความที่ฝัง URL (::target-text) และไฮไลต์ที่สร้างขึ้นจากสคริปต์ (::highlight) ได้ด้วย

เช่นเดียวกับคอลเล็กชันพร็อพเพอร์ตี้ CSS อื่นๆ ลักษณะการสืบทอดเป็นข้อควรพิจารณาที่สำคัญเมื่อออกแบบเว็บไซต์ โดยทั่วไป นักพัฒนาแอปคาดหวังว่าพร็อพเพอร์ตี้ CSS จะรับค่าผ่านต้นไม้องค์ประกอบ DOM (เช่น font) หรือจะไม่รับค่าเลย (เช่น background)

การเปลี่ยนแปลงลักษณะการเลือกใน Chrome 131

ลองดูตัวอย่างเอกสารนี้

p {
  color: red;
}

.blue::selection {
  color: blue;
}

<p class="blue">Some <em>emphasized</em> text that one would expect to be blue</p>

การประกาศสไตล์ของข้อมูลโค้ดจะแก้ไขสีของข้อความที่เลือก โดยมีกฎ 1 รายการที่ตรงกับองค์ประกอบทั้งหมดและอีก 1 รายการที่ตรงกับองค์ประกอบที่มีคลาส "blue" เมื่อเลือกใน Chrome เวอร์ชัน 130 หรือเก่ากว่า ผลลัพธ์ที่ได้จะเป็นดังนี้

ข้อความที่คุณอาจคิดว่าเป็นสีน้ำเงินเป็นสีแดง

เมื่อเลือกใน Chrome 131 ผลลัพธ์จะเปลี่ยนเป็นดังนี้

ข้อความจะไฮไลต์เป็นสีน้ำเงิน

การเปลี่ยนแปลงที่เกิดขึ้น ที่ผ่านมา ลักษณะการสืบทอดของพร็อพเพอร์ตี้การเลือกมีการใช้งานผ่านการสืบทอดองค์ประกอบต้นทาง ซึ่งการเลือกจะใช้พร็อพเพอร์ตี้จาก ::selection ที่ตรงกับองค์ประกอบที่เลือก Chrome เวอร์ชัน 130 และเวอร์ชันก่อนหน้าใช้รูปแบบนี้ ซึ่งข้อความที่เน้นไม่มี ::selection ที่ตรงกัน เนื่องจาก .blue::selection จะจับคู่กับองค์ประกอบที่มีคลาส "blue" เท่านั้น ซึ่งองค์ประกอบ <em> ไม่มี

Chrome 131 เปิดใช้ลักษณะการทำงานแบบใหม่ที่องค์ประกอบจะรับลักษณะการเลือกมาจากองค์ประกอบหลัก ในตัวอย่างก่อนหน้านี้ องค์ประกอบ <em> ไม่มี ::selection ที่ตรงกันเอง จึงรับค่าสีการเลือกขององค์ประกอบ <p> การดำเนินการนี้เรียกว่าการสืบทอดไฮไลต์ CSS และคุณสามารถลองใช้กับ Chrome เวอร์ชันเก่าได้โดยเปิดใช้ฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลองในchrome://flags

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

พร็อพเพอร์ตี้ที่กำหนดเองของ CSS สำหรับการเลือกจะยังคงใช้งานได้

เว็บไซต์หลายแห่งจำลองการสืบทอดไฮไลต์ CSS ผ่านการใช้พร็อพเพอร์ตี้ที่กำหนดเองของ CSS พร็อพเพอร์ตี้ที่กำหนดเองจะรับค่าผ่านต้นไม้องค์ประกอบ ซึ่งจะให้ผลลัพธ์ "รับค่าจากรายการหลัก" ด้วยข้อมูลโค้ดลักษณะนี้

:root {
   --selection-color: lightgreen;
}

::selection {
  color: var(--selection-color);
}

.blue {
  --selection-color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text that is blue</p>

ผลลัพธ์ที่ได้เมื่อเลือกทั้ง Chrome 130 และ 131 มีดังนี้

บรรทัดแรกเป็นสีเขียว บรรทัดที่สองเป็นสีน้ำเงิน

ที่นี่องค์ประกอบทุกรายการจะรับค่าบางอย่างสำหรับพร็อพเพอร์ตี้ --selection-color ผ่านต้นไม้องค์ประกอบ และระบบจะใช้สีนี้เมื่อเลือกข้อความ องค์ประกอบที่มีคลาส .blue และองค์ประกอบที่สืบทอดมาจะมีสีน้ำเงินเมื่อเลือก ส่วนองค์ประกอบอื่นๆ จะมีสีเขียวอ่อน เว็บไซต์หลายแห่งใช้เทคนิคนี้และเป็นวิธีที่แนะนำใน Stack Overflow

เพื่อรักษาความเข้ากันได้ รูปแบบการสืบทอดไฮไลต์ CSS จะระบุว่า ::selection (และองค์ประกอบจำลองไฮไลต์ CSS อื่นๆ) จะรับค่าคุณสมบัติที่กำหนดเองจากองค์ประกอบต้นทาง (องค์ประกอบที่ใช้ไฮไลต์) เว็บไซต์ที่ใช้วิธีการนี้จะไม่ได้รับผลกระทบจากการเปลี่ยนแปลงใน Chrome เวอร์ชัน 131

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

ตัวเลือกส่วนกลางสําหรับ ::selection ปิดใช้การรับค่าการไฮไลต์

เว็บไซต์ที่ไม่ได้ใช้พร็อพเพอร์ตี้ที่กำหนดเองของ CSS อาจใช้ตัวเลือกแบบสากลเพื่อกำหนดสีข้อความที่เลือก เช่น CSS ต่อไปนี้

::selection /* = *::selection (universal) */ {
  color: lightgreen;
}

.blue::selection {
  color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text</p>

ผลลัพธ์ที่ปรากฏเมื่อเลือกทั้ง Chrome 130 (และเวอร์ชันเก่ากว่า) และ Chrome 131 (และเวอร์ชันที่ใหม่กว่า) มีดังนี้

ข้อความบรรทัดแรกเป็นสีเขียว รายการที่ 2 เป็นสีน้ำเงิน แต่คำที่เน้นเป็นสีเขียว

การรับค่าการไฮไลต์ CSS ไม่ได้ทําให้ข้อความที่เน้นข้อความที่ 2 รับค่าสีน้ำเงินจากองค์ประกอบหลัก เนื่องจากตัวเลือกแบบสากลจับคู่กับองค์ประกอบ <em> และนําสีไฮไลต์แบบสากลมาใช้ ซึ่งก็คือสีเขียวอ่อน

หากต้องการรับประโยชน์จากการรับค่าที่ไฮไลต์ของ CSS ให้เปลี่ยนตัวเลือกแบบสากลเพื่อจับคู่เฉพาะรูท ซึ่งลูกหลานจะรับค่านั้นไป

:root::selection {
  color: lightgreen;
}

.blue::selection {
  color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text</p>

ผลลัพธ์ใน Chrome 131 จะมีลักษณะดังนี้

ข้อความบรรทัดแรกเป็นสีเขียว บรรทัดที่สองเป็นสีน้ำเงิน

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

การจัดรูปแบบ ::target-text จะเปลี่ยนไปด้วย

ลักษณะการทำงานและการเปลี่ยนแปลงทั้งหมดที่อธิบายไว้ที่นี่จะมีผลกับ::target-text องค์ประกอบจำลองเช่นเดียวกับที่ส่งผลต่อ ::selection กรณีการใช้งานการจัดรูปแบบข้อความเป้าหมายมากกว่า 1 รายการในเว็บไซต์เดียวมีจํากัด และฟีเจอร์นี้ยังค่อนข้างใหม่ ดังนั้นเว็บไซต์ของคุณจึงมีแนวโน้มที่จะไม่เปลี่ยนแปลงลักษณะการทํางานของ ::target-text

เหตุผลในการเปลี่ยนแปลงครั้งนี้

เมื่อองค์ประกอบสมมติอื่นๆ ของการไฮไลต์อยู่ระหว่างการพัฒนา กลุ่มทํางาน CSS จึงตัดสินใจใช้การรับค่ากับรูปแบบการรับค่าของการไฮไลต์ นี่เป็นวิธีการในข้อกำหนดขององค์ประกอบจำลอง ::selection อยู่แล้ว แต่เบราว์เซอร์ไม่ได้นำมาใช้ องค์ประกอบจำลองที่ไม่ใช่การเลือกจะใช้การสืบทอดไฮไลต์ ซึ่งระบบจะรับค่าองค์ประกอบจำลองมาเสมือนว่าเป็นพร็อพเพอร์ตี้ กล่าวคือ องค์ประกอบจะรับค่าจากองค์ประกอบจำลองไฮไลต์จากเอกสารหลัก

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

ลองเลย

CodePen ต่อไปนี้แสดงการเปลี่ยนแปลง ลองใช้ใน Chrome 131