ใหม่ใน Chrome 131

Mariko Kosaka
X

สิ่งที่จำเป็นต้องทราบมีดังนี้

ผมชื่อมาริค โคซากะ เรามาเจาะลึกและดูว่ามีอะไรใหม่ใน Chrome 131 กันบ้าง

การรับค่าการไฮไลต์ CSS

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

ลองนึกถึงข้อมูลโค้ดนี้พร้อมกับข้อความที่เน้น

p {
  color: deeppink;
}

.blue::selection {
  color: blue;
}

<p class="blue">
    This is
    <em>emphasized</em>
    text.
</p>

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

ข้อความที่ไฮไลต์เป็นสีชมพู

เนื่องจากมีการนําไปใช้โดยใช้โมเดลการสืบทอดองค์ประกอบต้นทาง ดังนั้นในกรณีนี้ พсевโดคลาส ::selection จะจับคู่กับองค์ประกอบที่มีคลาสสีน้ำเงินเท่านั้น ซึ่งองค์ประกอบภายในย่อหน้านี้ไม่มี

เมื่อใช้การเปลี่ยนแปลงการสืบทอดไฮไลต์ เมื่อเลือกข้อความเดียวกันใน Chrome 131 ข้อความจะเปลี่ยนเป็นสีน้ำเงิน

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

ยังมีการเปลี่ยนแปลงอีก 2-3 อย่างที่เกี่ยวข้องกับเรื่องนี้ โปรดดูการเปลี่ยนแปลงการสืบทอดสำหรับการจัดสไตล์การเลือก CSS ซึ่งเขียนโดย Stephen Chenney จาก Igalia ผู้พัฒนาฟีเจอร์นี้

การปรับปรุงการจัดรูปแบบของ <details> และ <summary>

ตอนนี้คุณมีตัวเลือกเพิ่มเติมในการจัดรูปแบบโครงสร้างขององค์ประกอบ <details> และ <summary> เพื่อสร้างวิดเจ็ตการเปิดเผยหรือวิดเจ็ตแบบแอคคอร์เดียน

การเปลี่ยนแปลงที่นำมาใช้ในรุ่นนี้ช่วยให้ใช้พร็อพเพอร์ตี้ display ได้ และเพิ่มองค์ประกอบจำลอง ::details-content เพื่อจัดสไตล์ส่วนที่ขยายและยุบ

ก่อนหน้านี้ คุณจะเปลี่ยนประเภทการแสดงผลขององค์ประกอบ details ไม่ได้ ตอนนี้เราได้ผ่อนปรนข้อจำกัดนี้แล้ว ซึ่งจะช่วยให้คุณใช้สิ่งต่างๆ เช่น เลย์เอาต์ตารางกริดหรือ Flex ได้

ในตัวอย่างหีบเพลงสุดพิเศษนี้ ซึ่งสร้างขึ้นจากองค์ประกอบ details หลายรายการ เมื่อองค์ประกอบ details อันใดอันหนึ่งขยายออก เนื้อหาจะแสดงอยู่ข้าง summary

วิดเจ็ต Accordion ที่มีเลย์เอาต์ Flex

ซึ่งทำได้โดยใช้เลย์เอาต์ Flex ในองค์ประกอบ details คุณยังสามารถลองใช้รูปแบบการจัดวางเพิ่มเติมด้วยค่าการแสดงผลอื่นๆ เช่น grid

อ่านบทความตัวเลือกเพิ่มเติมสำหรับการจัดสไตล์ <details> ของ Bramus เพื่อดูคำอธิบายเชิงลึกเพิ่มเติม

@page กล่องระยะขอบ

เพิ่มการรองรับกล่องระยะขอบหน้าเว็บเมื่อพิมพ์เอกสารบนเว็บหรือส่งออกเป็น PDF

ช่องระยะขอบของหน้าช่วยให้คุณกำหนดเนื้อหาในพื้นที่ระยะขอบของหน้าได้ คุณจึงระบุส่วนหัวและส่วนท้ายที่กำหนดเองได้แทนที่จะใช้ส่วนหัวและส่วนท้ายในตัวซึ่งเบราว์เซอร์สร้างขึ้น

กำหนดระยะขอบของหน้าเว็บโดยใช้กฎ @page ใน CSS

@page :right {
  @bottom-left {
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

ลักษณะและเนื้อหาของกล่องระยะขอบจะระบุด้วยพร็อพเพอร์ตี้ CSS ภายใน at-rule ที่แสดงถึงกล่องระยะขอบ 16 กล่องโดยใช้เนื้อหาที่สร้างขึ้น

สำหรับหมายเลขหน้า ระบบจะรองรับตัวนับด้วย page สำหรับหมายเลขหน้าปัจจุบัน และ pages สำหรับจำนวนหน้าทั้งหมด

อ่านบทความของ Rachel เรื่องเพิ่มเนื้อหาในขอบของหน้าเว็บเมื่อพิมพ์โดยใช้ CSS เพื่อดูคำอธิบายเชิงลึกเพิ่มเติม

และอีกมากมาย

และยังมีอีกมากมาย

  • การรองรับทรัพยากร SVG ภายนอกสําหรับ "clip-path", "fill", "stroke" และ "marker"
  • WebHID จะเปิดใช้ในบริบทของเวิร์กเกอร์เฉพาะ
  • ควบคุมลักษณะการทํางานของอีโมจิด้วยพร็อพเพอร์ตี้ CSS font-variant-emoji

อ่านเพิ่มเติม

ข้อมูลนี้เป็นเพียงไฮไลต์สำคัญบางส่วนเท่านั้น ดูการเปลี่ยนแปลงเพิ่มเติมใน Chrome 131 ได้ที่ลิงก์ต่อไปนี้

สมัครใช้บริการ

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

ฉันชื่อ Mariko Kosaka และเราจะคอยแจ้งให้คุณทราบเกี่ยวกับสิ่งใหม่ๆ ใน Chrome ทันทีที่ Chrome 132 เปิดตัว