ใหม่ใน Chrome 131

Mariko Kosaka
X

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

และ Marik Kosaka จะเป็นผู้ดูแลคุณในวันนี้ มาดูกันว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน 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 ได้

ในตัวอย่าง Accordion แบบพิเศษนี้ซึ่งประกอบด้วยองค์ประกอบ 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 เปิดตัว