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

Rachel Andrew

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

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

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

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

CSS reading-flow และ reading-order

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

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

พร็อพเพอร์ตี้ reading-order CSS ช่วยให้คุณลบล้างลำดับของรายการภายในคอนเทนเนอร์โฟลว์การอ่านได้ด้วยตนเอง หากต้องการใช้พร็อพเพอร์ตี้นี้ภายในกริด 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 Promise (JSPI) คือ API ที่ช่วยให้แอปพลิเคชัน WebAssembly ผสานรวมกับ JavaScript Promise ได้

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

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

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

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

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

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

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

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

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

ทันทีที่ Chrome 138 เปิดตัว เราจะมาบอกคุณว่ามีอะไรใหม่ใน Chrome