มีอะไรใหม่ใน Chrome 137

Rachel Andrew

เผยแพร่: 27 พฤษภาคม 2025

เรากำลังเปิดตัว Chrome 137 อยู่ และโพสต์นี้จะแชร์ฟีเจอร์หลักๆ จากรุ่นนี้ อ่านบันทึกประจำรุ่นของ Chrome 137 ฉบับเต็ม

ไฮไลต์จากรุ่นนี้

ใช้ reading-flow และ reading-order เพื่อให้แน่ใจว่าแท็บมีลําดับที่สมเหตุสมผลในเลย์เอาต์ที่ซับซ้อน ฟังก์ชัน if() ของ CSS เป็นวิธีที่กระชับในการแสดงค่าแบบมีเงื่อนไข การผสานรวมสัญญา JavaScript (JSPI) ช่วยให้แอปพลิเคชัน WebAssembly ผสานรวมกับสัญญา JavaScript ได้

CSS reading-flow และ reading-order

พร็อพเพอร์ตี้ reading-flow CSS จะควบคุมลําดับที่องค์ประกอบในเลย์เอาต์ Flex, ตารางกริด หรือบล็อกจะแสดงต่อเครื่องมือการช่วยเหลือพิเศษ และวิธีโฟกัสองค์ประกอบโดยใช้วิธีการไปยังส่วนต่างๆ ตามลําดับ ซึ่งช่วยแก้ปัญหาที่แก้ไม่ตกมานานเกี่ยวกับเลย์เอาต์ตารางกริดและ Flex ซึ่งลำดับแท็บอาจไม่ตรงกับลำดับการจัดวางรายการ

โดยจะใช้ค่าคีย์เวิร์ด 1 ค่า โดยมีค่าเริ่มต้นเป็น normal ซึ่งจะคงลักษณะการเรียงลําดับองค์ประกอบตามลําดับ DOM หากต้องการใช้ภายในคอนเทนเนอร์ Flex ให้ตั้งค่าเป็น flex-visual หรือ flex-flow หากต้องการใช้ภายในคอนเทนเนอร์ตารางกริด ให้ตั้งค่าเป็น grid-rows, grid-columns หรือ grid-order

พร็อพเพอร์ตี้ CSS reading-order ช่วยให้คุณลบล้างลําดับของรายการในคอนเทนเนอร์การอ่านด้วยตนเองได้ หากต้องการใช้พร็อพเพอร์ตี้นี้ภายในคอนเทนเนอร์ตารางกริด คอนเทนเนอร์ Flex หรือคอนเทนเนอร์บล็อก ให้ตั้งค่า reading-flow ในคอนเทนเนอร์เป็น source-order และตั้งค่า reading-order ของแต่ละรายการเป็นค่าจำนวนเต็ม

ดูข้อมูลเพิ่มเติมได้ที่ใช้ CSS reading-flow เพื่อการนําทางแบบโฟกัสตามลําดับเชิงตรรกะ

ฟังก์ชัน if() ของ CSS

ฟังก์ชัน if() ของ CSS เป็นวิธีที่กระชับในการแสดงค่าแบบมีเงื่อนไข โดยจะรับชุดคู่เงื่อนไข-ค่าที่คั่นด้วยเครื่องหมายอัฒภาค ฟังก์ชันจะประเมินแต่ละเงื่อนไขตามลําดับและแสดงค่าที่เชื่อมโยงกับเงื่อนไขแรกที่เป็นจริง หากไม่มีเงื่อนไขใดที่ประเมินเป็น "จริง" ฟังก์ชันจะแสดงผลสตรีมโทเค็นว่าง

div {
  color: var(--color);
  background-color: if(style(--color: white): black; else: white);
}

.dark {
  --color: black;
}

.light {
  --color: white;
}

<div class="dark">dark</div>
<div class="light">light</div>

การผสานรวม Promise ของ JavaScript ใน WebAssembly (JSPI)

การผสานรวมสัญญา JavaScript (JSPI) คือ API ที่ช่วยให้การผสานรวมแอปพลิเคชัน WebAssembly กับสัญญา JavaScript

ซึ่งช่วยให้โปรแกรม WebAssembly ทำหน้าที่เป็นเครื่องมือสร้าง Promise และช่วยให้โปรแกรม WebAssembly โต้ตอบกับ API ที่มี Promise ได้

โดยเฉพาะอย่างยิ่ง เมื่อแอปพลิเคชันใช้ JSPI เพื่อเรียก API (JavaScript) ที่มี Promise ระบบจะระงับโค้ด WebAssembly และให้ผู้เรียกเดิมของโปรแกรม WebAssembly ได้รับ Promise ที่จะสำเร็จเมื่อโปรแกรม WebAssembly เสร็จสมบูรณ์

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

แน่นอนว่ายังมีอีกมากมาย

  • Chrome ได้เริ่มใช้การแบ่งพาร์ติชันการเข้าถึง URL ของ BLOB ตามคีย์พื้นที่เก็บข้อมูลเพื่อสานต่อจากเรื่องการแบ่งพาร์ติชันพื้นที่เก็บข้อมูล
  • ขณะนี้มีการใช้รูปแบบพิกเซลทศนิยมของ Canvas แล้ว
  • ระบบรองรับ offset-path: shape() เพื่อให้คุณใช้รูปทรงที่ปรับเปลี่ยนตามพื้นที่โฆษณาเพื่อกำหนดเส้นทางของภาพเคลื่อนไหวได้

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

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

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

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

ทันทีที่ Chrome 138 เปิดตัว เราจะมาแจ้งให้คุณทราบถึงฟีเจอร์ใหม่ๆ ใน Chrome