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

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

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

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

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

offset-path: shape()

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

รองรับแอตทริบิวต์การเปลี่ยนรูปแบบใน SVGSVGElement

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

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

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

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

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

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

view-transition-name: match-element

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

Web API

ปรับประเภทข้อผิดพลาดที่แสดงเมื่อสร้างข้อมูลเข้าสู่ระบบ WebAuthn ประเภท "payment"

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

การแบ่งพาร์ติชัน URL ของ BLOB: การดึงข้อมูล/การไปยังส่วนต่างๆ

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

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

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

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

ประเภทสีจุดลอยตัวของแคนวาส

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

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

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

Document-Isolation-Policy

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

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

Ed25519 ในวิทยาการเข้ารหัสบนเว็บ

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

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

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

การผสานรวม Promise ของ JavaScript

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

Language Detector API

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

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

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

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

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

Selection API getComposedRanges และ direction

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

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

StaticRange "แบบคอมโพส" อนุญาตให้ข้ามขอบเขตเงาได้ ซึ่ง StaticRange ปกติจะทำไม่ได้

เช่น

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

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

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

เพิ่มช่องไฟล์ 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

WebGPU: copyBufferToBuffer overload

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

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

ใน Chrome 137 คุณจะเลือกใช้การทดลองต้นทางใหม่ต่อไปนี้ได้

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

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

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

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

Rewriter API

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

Writer API

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