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

Stephen Chenney

เผยแพร่เมื่อวันที่ 8 ตุลาคม 2024

ตั้งแต่ Chrome 131 เป็นต้นไป การสืบทอดไฮไลต์ CSS สำหรับคลาสจำลอง ::selection และ ::target-text จะเปลี่ยนแปลง นี่คือการสร้างรูปแบบที่ใช้งานง่ายขึ้นสำหรับ การรับช่วงค่าและสอดคล้องกับ ::highlight ::spelling-error ที่เพิ่งเพิ่ม และ Pseudo-class ::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

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

พร็อพเพอร์ตี้ 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

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

ในที่นี้ ทุกองค์ประกอบจะรับค่าบางอย่างสำหรับพร็อพเพอร์ตี้ --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 (และหลังจากนั้น):

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

การสืบทอดการไฮไลต์ 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