Chrome 142 เบต้า

Rachel Andrew

เผยแพร่: 1 ตุลาคม 2025

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

CSS และ UI

:target-before และ:target-after คลาสเสมือน

Pseudo-class เหล่านี้จะตรงกับเครื่องหมายการเลื่อนที่อยู่ก่อนหรือหลังเครื่องหมายที่ใช้งานอยู่ (ตรงกับ :target-current) ภายในกลุ่มเครื่องหมายการเลื่อนเดียวกัน ตามที่กำหนดโดยลำดับของโครงสร้างแบบราบ

• :target-before: ตรงกับเครื่องหมายการเลื่อนทั้งหมดที่อยู่ก่อนเครื่องหมายที่ใช้งานอยู่ในลำดับของโครงสร้างแบบแบนภายในกลุ่ม
• :target-after: ตรงกับเครื่องหมายการเลื่อนทั้งหมดที่อยู่หลังเครื่องหมายที่ใช้งานอยู่ในลำดับของโครงสร้างแบบแบนภายในกลุ่ม

การวางตำแหน่งแบบสัมบูรณ์สำหรับองค์ประกอบ ::view-transition

การเปลี่ยนภาพจะใช้โครงสร้างย่อยเสมือนขององค์ประกอบ โดยมี ::view-transition เป็นรูทของการเปลี่ยนภาพนั้น ก่อนหน้านี้มีการระบุว่าองค์ประกอบ ::view-transition ต้องมี position: fixed CSS Working Group ได้ตัดสินใจที่จะทำให้position: absoluteนี้เป็นเช่นนั้น และตอนนี้ Chrome ก็ได้สะท้อนการเปลี่ยนแปลงดังกล่าวแล้ว

การเปลี่ยนแปลงนี้ไม่ควรสังเกตเห็นได้เนื่องจากบล็อกที่มีองค์ประกอบนี้ยังคงเป็นบล็อกที่มีสแนปชอตในกรณีที่ใช้ตำแหน่งแบบสัมบูรณ์หรือแบบคงที่ ความแตกต่างที่เห็นได้ชัดเพียงอย่างเดียวคือใน getComputedStyle

พร็อพเพอร์ตี้ activeViewTransition ในเอกสาร

View Transitions API ช่วยให้นักพัฒนาซอฟต์แวร์เริ่มการเปลี่ยนภาพระหว่างสถานะต่างๆ ได้ จุดแรกเข้าของ SPA หลักคือ startViewTransition() ซึ่งจะแสดงผลออบเจ็กต์การเปลี่ยน ออบเจ็กต์นี้มี Promise และฟังก์ชันการทำงานหลายอย่างเพื่อติดตามความคืบหน้าของการเปลี่ยนฉาก และช่วยให้คุณจัดการการเปลี่ยนฉากได้ เช่น ข้ามการเปลี่ยนฉากหรือแก้ไขประเภทของการเปลี่ยนฉาก

ตั้งแต่ Chrome 142 เป็นต้นไป นักพัฒนาแอปไม่จำเป็นต้องจัดเก็บออบเจ็กต์นี้อีกต่อไป พร็อพเพอร์ตี้ document.activeViewTransition แสดงออบเจ็กต์นี้ หรือ null หากไม่มีการเปลี่ยนผ่าน

ซึ่งรวมถึงการเปลี่ยนไปใช้ MPA ด้วย โดยออบเจ็กต์จะใช้ได้ผ่านเหตุการณ์ pageswap และ pagereveal เท่านั้น ในการอัปเดตนี้ เราจะตั้งค่า document.activeViewTransition เป็นออบเจ็กต์นี้ในช่วงระยะเวลาการเปลี่ยนผ่าน

ไวยากรณ์ช่วงสำหรับการค้นหาคอนเทนเนอร์ของสไตล์และ if()

Chrome ปรับปรุงการค้นหาสไตล์ CSS และฟังก์ชัน if() โดยเพิ่มการรองรับไวยากรณ์ช่วง

ซึ่งจะขยายการค้นหาสไตล์ให้ครอบคลุมมากกว่าการจับคู่ค่าที่ตรงกันทุกประการ (เช่น style(--theme: dark)) นักพัฒนาซอฟต์แวร์สามารถใช้ตัวดำเนินการเปรียบเทียบ (เช่น > และ <) เพื่อเปรียบเทียบพร็อพเพอร์ตี้ที่กำหนดเอง ค่าตามตัวอักษร (เช่น 10px หรือ 25%) และค่าจากฟังก์ชันการแทนที่ เช่น attr() และ env() ทั้ง 2 ฝั่งต้องแปลงเป็นประเภทข้อมูลเดียวกันเพื่อให้การเปรียบเทียบถูกต้อง โดยจำกัดเฉพาะประเภทตัวเลขต่อไปนี้ <length>, <number>, <percentage>, <angle>, <time>, <frequency> และ <resolution>

ตัวอย่าง

เปรียบเทียบพร็อพเพอร์ตี้ที่กำหนดเองกับความยาวตามตัวอักษร

@container style(--inner-padding > 1em) {
  .card {
    border: 2px solid;
  }
}

เปรียบเทียบค่าตัวอักษร 2 ค่า

@container style(1em < 20px) {
  /* ... */
}

การใช้ช่วงรูปแบบใน if()

.item-grid {
  background-color: if(style(attr(data-columns, type<number>) > 2): lightblue; else: white);
}

ผู้กระตุ้นความสนใจ (แอตทริบิวต์ interestfor)

Chrome จะเพิ่มแอตทริบิวต์ interestfor ลงในองค์ประกอบ <button> และ <a> แอตทริบิวต์นี้จะเพิ่มลักษณะการทำงาน "ความสนใจ" ให้กับองค์ประกอบ เมื่อผู้ใช้ "แสดงความสนใจ" ในองค์ประกอบ ระบบจะทริกเกอร์การดำเนินการในองค์ประกอบเป้าหมาย เช่น แสดงป๊อปโอเวอร์ User Agent จะตรวจหาเมื่อผู้ใช้ "แสดงความสนใจ" ในองค์ประกอบผ่านวิธีการต่างๆ เช่น การวางเคอร์เซอร์เหนือองค์ประกอบ การกดปุ่มลัดพิเศษบนแป้นพิมพ์ หรือการกดองค์ประกอบบนหน้าจอสัมผัสค้างไว้ เมื่อแสดงหรือสูญเสียความสนใจ InterestEvent จะทำงานในเป้าหมาย ซึ่งมีการดำเนินการเริ่มต้นสำหรับป๊อปโอเวอร์ เช่น การแสดงและซ่อนป๊อปโอเวอร์

พร็อพเพอร์ตี้ font-language-override

Chrome เพิ่มการรองรับพร็อพเพอร์ตี้ font-language-override CSS พร็อพเพอร์ตี้นี้ช่วยให้นักพัฒนาซอฟต์แวร์ลบล้างภาษาของระบบที่ใช้สำหรับการแทนที่กลีฟ OpenType ได้โดยการระบุแท็กภาษา 4 อักขระใน CSS โดยตรง

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

แอตทริบิวต์ download ในองค์ประกอบ SVG <a>

Chrome เพิ่มการรองรับแอตทริบิวต์ download ในอินเทอร์เฟซ SVGAElement ให้สอดคล้องกับข้อกําหนด SVG 2 แอตทริบิวต์ download ช่วยให้ผู้เขียนระบุได้ว่าจะดาวน์โหลดเป้าหมายของไฮเปอร์ลิงก์ SVG แทนที่จะไปยังเป้าหมายนั้น ซึ่งจะเหมือนกับลักษณะการทำงานที่รองรับใน HTMLAnchorElement อยู่แล้ว ซึ่งจะส่งเสริมการทำงานร่วมกันในเบราว์เซอร์หลักๆ และรับประกันลักษณะการทำงานที่สอดคล้องกันระหว่างองค์ประกอบ HTML และ SVG <a> รวมถึงปรับปรุงประสบการณ์ของนักพัฒนาซอฟต์แวร์และความคาดหวังของผู้ใช้

ความเท่าเทียมกันของอุปกรณ์เคลื่อนที่และเดสก์ท็อปสำหรับโหมดการแสดงผลองค์ประกอบบางอย่าง

การใช้แอตทริบิวต์ size และ multiple จะทําให้แสดงผลองค์ประกอบ <select> เป็นกล่องรายการในหน้าหรือปุ่มที่มีป๊อปอัปได้ อย่างไรก็ตาม โหมดเหล่านี้อาจไม่พร้อมใช้งานใน Chrome บนอุปกรณ์เคลื่อนที่และเดสก์ท็อป การแสดงผลช่องรายการในหน้าเว็บจะใช้ไม่ได้บนอุปกรณ์เคลื่อนที่ และปุ่มที่มีป๊อปอัปจะใช้ไม่ได้บนเดสก์ท็อปเมื่อมีแอตทริบิวต์ multiple

การอัปเดตนี้จะเพิ่มกล่องรายการลงในอุปกรณ์เคลื่อนที่และป๊อปอัปแบบเลือกหลายรายการลงในเดสก์ท็อป รวมถึงช่วยให้มั่นใจว่าการเลือกใช้ที่มีแอตทริบิวต์ size และ multiple จะส่งผลให้โหมดการแสดงผลเหมือนกันในอุปกรณ์เคลื่อนที่และเดสก์ท็อป สรุปการเปลี่ยนแปลงมีดังนี้

• เมื่อแอตทริบิวต์ size มีค่ามากกว่า 1 ระบบจะใช้การแสดงผลในหน้าเสมอ ก่อนหน้านี้อุปกรณ์เคลื่อนที่จะไม่สนใจพารามิเตอร์นี้
• เมื่อตั้งค่าแอตทริบิวต์ multiple โดยไม่มีแอตทริบิวต์ size ระบบจะใช้การแสดงผลในหน้า ก่อนหน้านี้อุปกรณ์เคลื่อนที่จะใช้ป๊อปอัปแทนกล่องรายการในหน้า
• เมื่อตั้งค่าแอตทริบิวต์ multiple ด้วย size=1 ระบบจะใช้ป๊อปอัป ก่อนหน้านี้อุปกรณ์เดสก์ท็อปใช้กล่องรายการในหน้า

การเปิดใช้งานผู้ใช้แบบถาวรในการนําทางที่เริ่มต้นโดยโปรแกรมแสดงผลที่มีแหล่งกําเนิดเดียวกัน

Chrome จะรักษาสถานะการเปิดใช้งานของผู้ใช้แบบติดหนึบหลังจากที่หน้าเว็บไปยังหน้าเว็บอื่นที่มีต้นทางเดียวกัน การที่ไม่มีการเปิดใช้งานผู้ใช้ในหน้าหลังการไปยังส่วนต่างๆ ทำให้ใช้กรณีการใช้งานบางอย่างไม่ได้ เช่น การแสดงแป้นพิมพ์เสมือนในการโฟกัสอัตโนมัติ ซึ่งเป็นการบล็อกนักพัฒนาแอปที่ต้องการสร้าง MPA ผ่าน SPA

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

Web API

WebGPU: ฟีเจอร์ primitive_index

WebGPU เพิ่มความสามารถใหม่ที่ไม่บังคับซึ่งแสดงฟังก์ชัน Shader WGSL ใหม่ในตัว primitive_index โดยจะให้ดัชนีต่อรูปทรงเรขาคณิตแก่ Fragment Shader ในฮาร์ดแวร์ที่รองรับ ซึ่งคล้ายกับฟังก์ชันในตัว vertex_index และ instance_index ดัชนีดั้งเดิมมีประโยชน์สำหรับเทคนิคกราฟิกขั้นสูง เช่น เรขาคณิตเสมือน

WebGPU: ระดับ 1 และระดับ 2 ของรูปแบบพื้นผิว

ขยายการรองรับรูปแบบพื้นผิว GPU ด้วยความสามารถต่างๆ เช่น render attachment, blending, multisampling, resolve และ storage_binding

พร็อพเพอร์ตี้ DataTransfer สำหรับเหตุการณ์อินพุต insertFromPaste, insertFromDrop และ insertReplacementText

ป้อนข้อมูลพร็อพเพอร์ตี้ dataTransfer ในเหตุการณ์อินพุตด้วยค่า inputType ของ insertFromPaste, insertFromDrop และ insertReplacementText เพื่อให้สิทธิ์เข้าถึงคลิปบอร์ดและข้อมูลการลากและวางในระหว่างการดำเนินการแก้ไขในองค์ประกอบ contenteditable

ออบเจ็กต์ dataTransfer มีข้อมูลเดียวกันกับที่มีในระหว่างเหตุการณ์ beforeinput

ฟีเจอร์นี้ใช้ได้กับองค์ประกอบที่แก้ไขได้เท่านั้น สำหรับตัวควบคุมแบบฟอร์ม (textarea, input) ระบบจะดำเนินการแบบเดียวกัน

พร็อพเพอร์ตี้นี้ทำให้ Chrome ทำงานร่วมกับ Safari และ Firefox ได้

เซสชันสื่อ: เพิ่มเหตุผลในenterpictureinpictureรายละเอียดการดำเนินการ

เพิ่ม enterPictureInPictureReason ลงใน MediaSessionActionDetails ที่ส่งไปยังการดำเนินการ enterpictureinpicture ใน Media Session API ซึ่งจะช่วยให้นักพัฒนาแอปแยกความแตกต่างระหว่างenterpictureinpictureการดำเนินการที่ผู้ใช้ทริกเกอร์อย่างชัดเจน (เช่น จากปุ่มใน User Agent) กับenterpictureinpictureการดำเนินการที่ User Agent ทริกเกอร์โดยอัตโนมัติเนื่องจากเนื้อหาถูกบดบัง

การปรับบริบทของ Web Speech API

การอัปเดตนี้ช่วยให้เว็บไซต์รองรับการเอนเอียงตามบริบทสำหรับการจดจำเสียงพูดได้โดยการเพิ่มรายการวลีที่จดจำลงใน Web Speech API

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

*+jsonการตรวจสอบโทเค็น MIME ที่เข้มงวดมากขึ้นสำหรับโมดูล JSON

ปฏิเสธการตอบกลับสคริปต์โมดูล JSON ที่มีประเภทหรือประเภทย่อยของ MIME ที่มีจุดรหัสโทเค็นที่ไม่ใช่ HTTP (เช่น ช่องว่าง) เมื่อตรงกับ *+json ซึ่งสอดคล้องกับข้อกำหนดการดมกลิ่น MIME และเครื่องมืออื่นๆ ซึ่งเป็นส่วนหนึ่งของพื้นที่โฟกัสของโมดูล Interop2025

FedCM - รองรับการแสดงต้นทาง iframe ของบุคคลที่สามใน UI

ก่อน Chrome 142 นั้น FedCM จะแสดงเว็บไซต์ระดับบนสุดใน UI เสมอ

วิธีนี้ใช้ได้ดีเมื่อ iframe เป็นของบุคคลที่หนึ่งในเชิงแนวคิด (เช่น foo.com อาจมี iframe foostatic.com ซึ่งไม่มีความหมายต่อผู้ใช้)

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

การแยกกระบวนการที่ผูกกับต้นทาง

เปลี่ยนนโยบายการแยกกระบวนการจากการล็อกกระบวนการไปยังเว็บไซต์ (เช่น example.com) เป็นการล็อกกระบวนการไปยังต้นทางที่เฉพาะเจาะจง (เช่น foo.example.com)

Chrome กำลังเปลี่ยนไปใช้โมเดลการแยกกระบวนการที่ละเอียดยิ่งขึ้นที่เรียกว่า "การแยกต้นทาง" เพื่อเพิ่มความปลอดภัยให้ดียิ่งขึ้น Chrome ใช้ "การแยกเว็บไซต์" ซึ่งจัดกลุ่มต้นทางต่างๆ จากเว็บไซต์เดียวกัน เช่น a.example.com และ b.example.com ไว้ในกระบวนการแสดงผลเดียว

การแยกต้นทางจะแยกแต่ละต้นทาง (เช่น https://foo.example.com) ไว้ในกระบวนการแสดงผลของตัวเอง ซึ่งจะช่วยเสริมความแข็งแกร่งให้กับสถาปัตยกรรมความปลอดภัยของ Chrome โดยการปรับขอบเขตของกระบวนการให้สอดคล้องกับโมเดลความปลอดภัยพื้นฐานของเว็บที่อิงตามต้นทาง ซึ่งจะช่วยเพิ่มการปกป้องช่องโหว่ที่อาจเกิดขึ้นภายในเว็บไซต์

pointerrawupdateเหตุการณ์ที่ทำงานร่วมกันได้ซึ่งแสดงในบริบทที่ปลอดภัยเท่านั้น

ข้อกำหนด PointerEvents จำกัด pointerrawupdate ให้ใช้ได้เฉพาะในบริบทที่ปลอดภัยในปี 2020 โดยซ่อนทั้งการทริกเกอร์เหตุการณ์และ Listener เหตุการณ์ส่วนกลางจากบริบทที่ไม่ปลอดภัย การอัปเดตนี้ทำให้ Chrome เป็นไปตามข้อกำหนดที่อัปเดตแล้วและทำงานร่วมกับเบราว์เซอร์หลักอื่นๆ ได้

ช่วงทดลองใช้จากต้นทางที่อยู่ระหว่างดำเนินการ

ใน Chrome 142 คุณสามารถเลือกใช้Origin Trials ใหม่ต่อไปนี้ได้

ข้อมูลเข้าสู่ระบบเซสชันที่ผูกกับอุปกรณ์

วิธีที่เว็บไซต์จะผูกเซสชันกับอุปกรณ์เครื่องเดียวได้อย่างปลอดภัย

ซึ่งจะช่วยให้เซิร์ฟเวอร์ผูกเซสชันกับอุปกรณ์ได้อย่างปลอดภัย เบราว์เซอร์จะต่ออายุเซสชันเป็นระยะๆ เมื่อเซิร์ฟเวอร์ขอ โดยมีหลักฐานการครอบครองคีย์ส่วนตัว

กลุ่มซ็อกเก็ต TCP ต่อเว็บไซต์ระดับบนสุด

การทดลองนี้จะประเมินผลกระทบของการเปลี่ยนขนาดพูลซ็อกเก็ต TCP ต่อโปรไฟล์จาก 256 (ค่าเริ่มต้น) เป็น 513 ขณะที่เพิ่มขีดจํากัดต่อเว็บไซต์ระดับบนสุดที่ 256 (เพื่อให้แน่ใจว่าไม่มี 2 แท็บที่ใช้พูลจนหมด) เราได้ศึกษาความเป็นไปได้ในการเพิ่มขีดจำกัดต่อโปรไฟล์เป็น 512 และไม่พบผลลัพธ์เชิงลบ ขีดจํากัดต่อเว็บไซต์ระดับบนสุดที่ 256 รายการเท่ากับขีดจํากัดต่อโปรไฟล์เริ่มต้น จึงไม่ควรส่งผลเสียต่อประสิทธิภาพ ขีดจำกัดเหล่านี้จะกำหนดแยกกันสำหรับพูล WebSocket และพูลซ็อกเก็ตปกติ (HTTP)

เราตั้งใจที่จะเปิดตัวการทดสอบนี้โดยตรงหากไม่มีผลกระทบด้านลบเกิดขึ้น