Chrome 137 เบต้า

Rachel Andrew

เผยแพร่เมื่อ: 1 พฤษภาคม 2025

การเปลี่ยนแปลงต่อไปนี้จะมีผลกับ Chrome เวอร์ชันเบต้าล่าสุดสำหรับ Android, ChromeOS, Linux, macOS และ Windows เว้นแต่จะระบุไว้เป็นอย่างอื่น ดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์ที่ระบุไว้ที่นี่ผ่านลิงก์ที่ให้ไว้หรือจากรายการใน ChromeStatus.com Chrome 130 เป็นเวอร์ชันเบต้า ณ วันที่ 30 เมษายน 2025 คุณสามารถดาวน์โหลดเวอร์ชันล่าสุดได้ที่ Google.com สำหรับเดสก์ท็อปหรือในGoogle Play Store บน Android

CSS และ UI

เวอร์ชันนี้เพิ่มฟีเจอร์ CSS และ UI ใหม่ 7 รายการ

ฟังก์ชัน if()

ฟังก์ชัน 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>

พร็อพเพอร์ตี้ reading-flow และ reading-order

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

• normal
• flex-visual
• flex-flow
• grid-rows
• grid-columns
• grid-order
• source-order

พร็อพเพอร์ตี้ CSS reading-order ช่วยให้คุณลบล้างลำดับภายในคอนเทนเนอร์โฟลว์การอ่านด้วยตนเองได้ โดยจะเป็นจำนวนเต็มที่มีค่าเริ่มต้นเป็น 0

ดูข้อมูลเพิ่มเติมได้ที่ใช้โฟลว์การอ่าน CSS สำหรับการนำทางด้วยโฟกัสตามลำดับเชิงตรรกะและลองใช้ตัวอย่างโฟลว์การอ่าน

offset-path: shape()

ฟังก์ชัน shape() ได้รับการรองรับใน clip-path อยู่แล้ว และอนุญาตให้มีการตัดแบบปรับเปลี่ยนตามอุปกรณ์ การเปิดใช้ฟังก์ชันนี้สำหรับ offset-path จะช่วยเติมเต็มช่องว่างเล็กๆ ที่สามารถใช้รูปร่างแบบเดียวกันกับพร็อพเพอร์ตี้นั้นได้

รองรับแอตทริบิวต์ `transform` ใน SVGSVGElement

ฟีเจอร์นี้ช่วยให้สามารถใช้พร็อพเพอร์ตี้การแปลง เช่น การปรับขนาด การหมุน การเลื่อน และการเอียง กับองค์ประกอบรูท <svg>ได้โดยตรง โดยใช้แอตทริบิวต์ transform การปรับปรุงนี้ช่วยให้คุณจัดการระบบพิกัด SVG ทั้งหมดหรือเนื้อหาทั้งหมดได้ ซึ่งจะช่วยเพิ่มความยืดหยุ่นในการสร้างกราฟิกแบบเวกเตอร์แบบไดนามิก แบบปรับเปลี่ยนตามอุปกรณ์ และแบบอินเทอร์แอกทีฟ การรองรับแอตทริบิวต์นี้ช่วยให้สามารถแปลงองค์ประกอบ SVG ได้โดยไม่ต้องใช้องค์ประกอบ Wrapper เพิ่มเติมหรือวิธีแก้ปัญหา CSS ที่ซับซ้อน ซึ่งจะช่วยลดความซับซ้อนของกระบวนการสร้างกราฟิกเว็บแบบปรับขนาดได้และแบบเคลื่อนไหว

อนุญาตให้ <use> อ้างอิงองค์ประกอบรูทของเอกสารภายนอกโดยละเว้นส่วนย่อย

ในฟีเจอร์นี้ เรากำลังปรับปรุงองค์ประกอบ SVG <use> ให้มีประสิทธิภาพมากขึ้นโดยลด ข้อกำหนดในการอ้างอิง ปัจจุบันคุณต้องอ้างอิงส่วนย่อยภายในเอกสาร SVG อย่างชัดเจน หากไม่มีการระบุรหัสส่วนย่อย <use> จะไม่สามารถ แก้ปัญหาเป้าหมายและจะไม่มีการแสดงผลหรืออ้างอิงสิ่งใด

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

ขยายสีเฉพาะจุดของระบบสำหรับพร็อพเพอร์ตี้ accent-color ไปยัง Windows และ ChromeOS

ฟีเจอร์นี้ช่วยให้คุณใช้สีเฉพาะจุดของระบบปฏิบัติการกับองค์ประกอบแบบฟอร์มได้ การใช้พร็อพเพอร์ตี้ CSS accent-color จะช่วยให้องค์ประกอบแบบฟอร์ม เช่น ช่องทำเครื่องหมาย ปุ่มตัวเลือก และแถบความคืบหน้าใช้สีเฉพาะจุดที่กำหนดโดยระบบปฏิบัติการของผู้ใช้โดยอัตโนมัติ ฟีเจอร์นี้ได้รับการรองรับใน macOS ตั้งแต่ปี 2021 และตอนนี้ได้รับการรองรับใน Windows และ ChromeOS แล้ว

view-transition-name: match-element

ค่า match-element สำหรับพร็อพเพอร์ตี้ view-transition จะสร้างรหัสที่ไม่ซ้ำกันตามข้อมูลประจำตัวขององค์ประกอบและจะยังคงเหมือนเดิมสำหรับองค์ประกอบนี้ โดยจะใช้ในกรณีของแอปหน้าเดียวที่องค์ประกอบมีการย้ายไปมาและคุณต้องการใส่ภาพเคลื่อนไหวให้กับองค์ประกอบนั้นด้วยการเปลี่ยนมุมมอง

Web API

จัดประเภทข้อผิดพลาดที่แสดงขึ้นสำหรับการสร้างข้อมูลเข้าสู่ระบบ WebAuthn ประเภท 'การชำระเงิน'

แก้ไขประเภทข้อผิดพลาดที่แสดงขึ้นระหว่างการสร้างข้อมูลเข้าสู่ระบบ WebAuthn สำหรับข้อมูลเข้าสู่ระบบประเภท payment เนื่องจากข้อกำหนดไม่ตรงกันในอดีต การสร้างข้อมูลเข้าสู่ระบบ payment ใน iframe แบบข้ามต้นทางโดยไม่มีการเปิดใช้งานของผู้ใช้จะส่ง SecurityError แทน NotAllowedError ซึ่งเป็นข้อผิดพลาดที่ส่งขึ้นสำหรับข้อมูลเข้าสู่ระบบที่ไม่ใช่ข้อมูลเข้าสู่ระบบประเภทการชำระเงิน การเปลี่ยนแปลงนี้เป็นการเปลี่ยนแปลงที่ทำให้เกิดปัญหา โค้ดที่ตรวจพบประเภทข้อผิดพลาดที่แสดงขึ้นก่อนหน้านี้ (เช่น e instanceof SecurityError) จะได้รับผลกระทบ โค้ดที่จัดการข้อผิดพลาดโดยทั่วไประหว่างการสร้างข้อมูลเข้าสู่ระบบ (เช่น catch (e)) จะยังคงทำงานได้อย่างถูกต้อง

การแบ่งพาร์ติชัน URL ของ BLOB: การดึงข้อมูล/การนำทาง

การดำเนินการนี้เป็นการดำเนินการต่อเนื่องจากการแบ่งพาร์ติชันพื้นที่เก็บข้อมูล โดยจะใช้การแบ่งพาร์ติชันการเข้าถึง URL ของ BLOB ตามคีย์พื้นที่เก็บข้อมูล (เว็บไซต์ระดับบนสุด ต้นทางของเฟรม และบูลีน has-cross-site-ancestor) ยกเว้นการนำทางระดับบนสุดที่จะยังคงแบ่งพาร์ติชันตามต้นทางของเฟรมเท่านั้น

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

สแต็กการเรียกใช้ในรายงานข้อขัดข้องจากหน้าเว็บที่ไม่ตอบสนอง

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

ประเภทสีจุดลอยตัวของ Canvas

แนะนำความสามารถในการใช้รูปแบบพิกเซลจุดลอยตัว (เทียบกับจุดคงที่ 8 บิต) กับ CanvasRenderingContext2D, OffscreenCanvasRenderingContext2D, และ ImageData ซึ่งจำเป็นสำหรับแอปพลิเคชันที่มีความแม่นยำสูง (เช่น การแสดงภาพทางการแพทย์) เนื้อหาที่มีช่วงไดนามิกสูง และพื้นที่สีเชิงเส้น

ไม่อนุญาตการแสดงผลล่วงหน้า HTTP แบบข้อความธรรมดาที่ไม่น่าเชื่อถือ

ปัจจุบันระบบอนุญาตการแสดงผลล่วงหน้าผ่าน HTTP และ HTTPS ขณะที่การดึงข้อมูลล่วงหน้าจะทำงานผ่าน HTTPS เท่านั้น จำกัดการแสดงผลล่วงหน้าให้สอดคล้องกับการดึงข้อมูลล่วงหน้า

Document-Isolation-Policy

Document-Isolation-Policy ช่วยให้เอกสารเปิดใช้ crossOriginIsolation ได้ด้วยตัวเองโดยไม่ต้องติดตั้งใช้งาน COOP หรือ COEP และไม่ว่าสถานะ crossOriginIsolation ของหน้าจะเป็นอย่างไร นโยบายนี้ได้รับการสนับสนุนโดยการแยกกระบวนการ นอกจากนี้ ทรัพยากรย่อยแบบข้ามต้นทางที่ไม่ใช่ CORS ของเอกสารจะโหลดโดยไม่มีข้อมูลเข้าสู่ระบบหรือต้องมีส่วนหัว CORP

ดูข้อมูลเพิ่มเติมได้ที่ นโยบายการแยกเอกสาร: เปิดใช้ฟีเจอร์เว็บที่มีประสิทธิภาพได้อย่าง ง่ายดาย

Ed25519 ใน Web Cryptography

ฟีเจอร์นี้เพิ่มการรองรับอัลกอริทึม Curve25519 ใน Web Cryptography API ซึ่งก็คืออัลกอริทึมลายเซ็น Ed25519

การบันทึกและการรายงานที่อยู่ IP

Chrome Enterprise กำลังปรับปรุงความสามารถในการดูแลความปลอดภัยและการตอบสนองต่อเหตุการณ์โดยการรวบรวมและรายงานที่อยู่ IP ในเครื่องและระยะไกล รวมถึงส่งที่อยู่ IP เหล่านั้นไปยังบันทึกการตรวจสอบความปลอดภัย (SIT) นอกจากนี้ Chrome Enterprise จะอนุญาตให้ผู้ดูแลระบบส่งที่อยู่ IP ไปยังผู้ให้บริการ SIEM ของบุคคลที่หนึ่งและบุคคลที่สามโดยใช้เครื่องมือเชื่อมต่อการรายงานของ Chrome Enterprise ได้ด้วย ฟีเจอร์นี้จะพร้อมให้บริการสำหรับลูกค้า Chrome Enterprise Core

การผสานรวม JavaScript Promise

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

Language Detector API

The Language Detector API เป็น JavaScript API ที่ระบุภาษาของ สตริงที่ให้ไว้ API นี้ได้รับการสนับสนุนโดยโมเดลพื้นฐานที่ปรับแต่งมาเพื่อทำงานตรวจหาภาษา

เมื่อได้รับสตริง Language Detector API จะแสดงรายการภาษาที่ตรวจพบตามลำดับ พร้อมคะแนนความเชื่อมั่นสำหรับผลลัพธ์แต่ละรายการ

นักพัฒนาแอปสามารถส่งรายการภาษาอินพุตที่คาดไว้เมื่อสร้างอินสแตนซ์ Language Detector เพื่อช่วยเพิ่มประสิทธิภาพสำหรับกรณีการใช้งานที่คาดว่าจะมีการตรวจหาในบางภาษา

จำกัดแอตทริบิวต์และอาร์กิวเมนต์แบบลอยตัวใน SVGMatrix, SVGRect และ SVGPoint

เมื่อตั้งค่าแอตทริบิวต์หรืออาร์กิวเมนต์แบบลอยตัวใน SVGMatrix, SVGRect และ SVGPoint คุณจะตั้งค่าเป็น Infinity หรือ Nan ไม่ได้อีกต่อไป ระบบจะแสดงข้อยกเว้น JavaScript หากคุณพยายามตั้งค่าตามที่กำหนดไว้ในข้อกำหนด SVG

Selection API getComposedRanges และ direction

ฟีเจอร์นี้มาพร้อมกับเมธอด API ใหม่ 2 รายการสำหรับ Selection API ดังนี้

• Selection.direction ซึ่งแสดงทิศทางการเลือกเป็น "none", "forward" หรือ "backward"
• Selection.getComposedRanges() ซึ่งแสดงรายการ StaticRange ที่ "ประกอบ" แล้ว 0 หรือ 1 รายการ

StaticRange ที่ "ประกอบ" แล้วสามารถข้ามขอบเขต Shadow ได้ ซึ่งช่วงปกติทำไม่ได้

ตัวอย่าง

const range = getSelection().getComposedRanges({ shadowRoots: [root] });

หากการเลือกข้ามขอบเขต Shadow Root ที่ไม่ได้ระบุไว้ในรายการ shadowRoots จุดสิ้นสุดของ StaticRange จะได้รับการ "เปลี่ยนขอบเขต" ให้อยู่นอกทรีนั้น ซึ่งจะช่วยให้เราไม่แสดงทรี Shadow ที่ไม่รู้จัก

ส่วนขยายขอบเขตของเว็บแอป

เพิ่มฟิลด์ไฟล์ Manifest ของเว็บแอป scope_extensions ที่ช่วยให้เว็บแอปขยายขอบเขตไปยังต้นทางอื่นๆ ได้

ตัวอย่าง

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    {"type" : "type", "origin" : "https://example.com"}
  ]
}

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

ต้องให้ต้นทางที่ระบุยืนยันการเชื่อมโยงกับเว็บแอปโดยใช้ไฟล์การกำหนดค่า .well-known/web-app-origin-association

{
  "https://sample-app.com/": {
    "scope": "/"
  }
}

คำแนะนำเกี่ยวกับสาขา WebAssembly

ปรับปรุงประสิทธิภาพของโค้ด WebAssembly ที่คอมไพล์แล้วโดยแจ้งให้เครื่องมือทราบว่าคำสั่งสาขาหนึ่งๆ มีแนวโน้มที่จะใช้เส้นทางที่เฉพาะเจาะจง ซึ่งช่วยให้เครื่องมือตัดสินใจได้ดีขึ้นสำหรับการจัดวางโค้ด (ปรับปรุงการเข้าถึงแคชคำสั่ง) และการจัดสรรรีจิสเตอร์

WebGPU: GPUTextureView สำหรับการเชื่อมโยง externalTexture

ตอนนี้ระบบอนุญาตให้ใช้ GPUTextureView สำหรับการเชื่อมโยง externalTexture เมื่อสร้าง GPUBindGroup

การโอเวอร์โหลด copyBufferToBuffer ของ WebGPU

ตอนนี้เมธอด copyBufferToBuffer() ของ GPUCommandEncoder มีวิธีที่ง่ายกว่าในการคัดลอกบัฟเฟอร์ทั้งหมดโดยใช้การโอเวอร์โหลดใหม่ที่มีพารามิเตอร์การชดเชยและขนาดที่ไม่บังคับ

ช่วงทดลองใช้จากต้นทางใหม่

ใน Chrome 137 คุณสามารถเลือกเข้าร่วมช่วงทดลองใช้จากต้นทางใหม่ต่อไปนี้ origin trials

แอตทริบิวต์การบล็อกการแสดงผลแบบเต็มอัตราเฟรม

เพิ่มโทเค็นการบล็อกการแสดงผลแบบเต็มเฟรมเรตใหม่ลงในแอตทริบิวต์การบล็อก เมื่อ Renderer ถูกบล็อกด้วยโทเค็นแบบเต็มเฟรมเรต Renderer จะทำงานที่เฟรมเรตต่ำลงเพื่อสงวนทรัพยากรเพิ่มเติมไว้สำหรับการโหลด

หยุดเล่นสื่อชั่วคราวใน iframe ที่ไม่ได้แสดงผล

เพิ่มนโยบายสิทธิ์ "media-playback-while-not-rendered" เพื่ออนุญาตให้เว็บไซต์ที่ฝัง หยุดเล่นสื่อชั่วคราวของ iframe ที่ฝังไว้ซึ่งไม่ได้แสดงผล นั่นคือ ตั้งค่าพร็อพเพอร์ตี้ "display" เป็น "none" ซึ่งจะช่วยให้นักพัฒนาสร้างประสบการณ์การใช้งานที่เป็นมิตรต่อผู้ใช้มากขึ้น และยังปรับปรุงประสิทธิภาพด้วยการให้เบราว์เซอร์จัดการการเล่นเนื้อหาที่ผู้ใช้มองไม่เห็น

Rewriter API

Rewriter API จะแปลงและเรียบเรียงข้อความอินพุตใหม่ในรูปแบบที่ขอ โดยได้รับการสนับสนุนจากโมเดลภาษา AI ในอุปกรณ์ นักพัฒนาแอปอาจใช้ API นี้เพื่อนำคำซ้ำซ้อนภายในข้อความออกเพื่อให้พอดีกับขีดจำกัดคำ เรียบเรียงข้อความใหม่ให้เหมาะกับกลุ่มเป้าหมายที่ต้องการ หรือเพื่อให้สร้างสรรค์มากขึ้นหากพบว่าข้อความใช้ภาษาที่เป็นพิษ เรียบเรียงโพสต์หรือบทความใหม่ให้ใช้คำและแนวคิดที่ง่ายขึ้น และอื่นๆ

Writer API

Writer API สามารถใช้เขียนเนื้อหาใหม่ได้โดยใช้พรอมต์งานเขียน โดยได้รับการสนับสนุนจากโมเดลภาษา AI ในอุปกรณ์ นักพัฒนาแอปจะใช้ API นี้เพื่อสร้างคำอธิบายที่เป็นข้อความของ Structured Data สร้างโพสต์เกี่ยวกับผลิตภัณฑ์ตามความคิดเห็นหรือคำอธิบายผลิตภัณฑ์ ขยายรายการข้อดีและข้อเสียให้เป็นมุมมองแบบเต็ม และอื่นๆ