เผยแพร่เมื่อ: 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
คลาสเทียมเหล่านี้จะจับคู่ตัวทำเครื่องหมายการเลื่อนที่อยู่ก่อนหรือหลังตัวทำเครื่องหมายที่ใช้งานอยู่ (ซึ่งตรงกับ :target-current) ภายในกลุ่มตัวทำเครื่องหมายการเลื่อนเดียวกัน ตามที่กำหนดโดยลำดับของ Flat Tree ดังนี้
:target-before: จับคู่ตัวทำเครื่องหมายการเลื่อนทั้งหมดที่อยู่ก่อนตัวทำเครื่องหมายที่ใช้งานอยู่ตามลำดับของ Flat Tree ภายในกลุ่ม:target-after: จับคู่ตัวทำเครื่องหมายการเลื่อนทั้งหมดที่อยู่หลังตัวทำเครื่องหมายที่ใช้งานอยู่ตามลำดับของ Flat Tree ภายในกลุ่ม
การจัดตำแหน่งแบบสัมบูรณ์สำหรับองค์ประกอบ ::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);
}
Interest Invokers (แอตทริบิวต์ interestfor)
Chrome เพิ่มแอตทริบิวต์ interestfor ลงในองค์ประกอบ <button> และ <a> แอตทริบิวต์นี้จะเพิ่มลักษณะการทำงาน "ความสนใจ" ให้กับองค์ประกอบ เมื่อผู้ใช้ "แสดงความสนใจ" ในองค์ประกอบ ระบบจะทริกเกอร์การดำเนินการในองค์ประกอบเป้าหมาย เช่น การแสดงป๊อปโอเวอร์ User Agent จะตรวจหาเมื่อผู้ใช้ "แสดงความสนใจ" ในองค์ประกอบผ่านวิธีการต่างๆ เช่น การวางตัวชี้เหนือองค์ประกอบ การกดปุ่มลัดพิเศษบนแป้นพิมพ์ หรือการกดค้างองค์ประกอบบนหน้าจอสัมผัส เมื่อมีการแสดงหรือสูญเสียความสนใจ ระบบจะทริกเกอร์ InterestEvent ในเป้าหมาย ซึ่งมีการดำเนินการเริ่มต้นสำหรับป๊อปโอเวอร์ เช่น การแสดงและซ่อนป๊อปโอเวอร์
พร็อพเพอร์ตี้ font-language-override
Chrome เปิดตัวการรองรับพร็อพเพอร์ตี้ CSS font-language-override พร็อพเพอร์ตี้นี้ช่วยให้นักพัฒนาแอปแทนที่ภาษาของระบบที่ใช้สำหรับการแทนที่ Glyph ของ OpenType ได้โดยการระบุแท็กภาษา 4 ตัวอักษรใน CSS โดยตรง
ซึ่งช่วยให้ควบคุมการจัดตัวพิมพ์ได้อย่างละเอียด ซึ่งมีประโยชน์อย่างยิ่งสำหรับเนื้อหาหลายภาษาหรือฟอนต์ที่มี Glyph ที่แตกต่างกันไปตามภาษา
แอตทริบิวต์ download ในองค์ประกอบ <a> ของ SVG
Chrome เปิดตัวการรองรับแอตทริบิวต์ download ในอินเทอร์เฟซ SVGAElement ซึ่งสอดคล้องกับข้อกำหนด SVG 2 แอตทริบิวต์ download ช่วยให้ผู้เขียนระบุได้ว่าจะให้ดาวน์โหลดเป้าหมายของไฮเปอร์ลิงก์ SVG แทนที่จะไปยังเป้าหมายนั้น ซึ่งจะสะท้อนลักษณะการทำงานที่รองรับอยู่แล้วใน HTMLAnchorElement แอตทริบิวต์นี้ช่วยส่งเสริมความสามารถในการทำงานร่วมกันในเบราว์เซอร์หลักๆ และรับประกันลักษณะการทำงานที่สอดคล้องกันระหว่างองค์ประกอบ <a> ของ HTML และ SVG รวมถึงปรับปรุงประสบการณ์ของนักพัฒนาแอปและความคาดหวังของผู้ใช้
ความเท่าเทียมกันระหว่างอุปกรณ์เคลื่อนที่และเดสก์ท็อปสำหรับโหมดการแสดงผลองค์ประกอบ Select
การใช้แอตทริบิวต์ size และ multiple จะทำให้แสดงผลองค์ประกอบ <select> เป็นกล่องรายการในหน้าเว็บหรือปุ่มที่มีป๊อปอัปได้ อย่างไรก็ตาม โหมดเหล่านี้ไม่มีให้บริการอย่างสอดคล้องกันใน Chrome สำหรับอุปกรณ์เคลื่อนที่และเดสก์ท็อป การแสดงผลกล่องรายการในหน้าเว็บไม่มีให้บริการในอุปกรณ์เคลื่อนที่ และปุ่มที่มีป๊อปอัปไม่มีให้บริการในเดสก์ท็อปเมื่อมีแอตทริบิวต์ multiple
การอัปเดตนี้จะเพิ่มกล่องรายการลงในอุปกรณ์เคลื่อนที่และป๊อปอัปการเลือกหลายรายการลงในเดสก์ท็อป รวมถึงตรวจสอบว่าการเลือกใช้แอตทริบิวต์ size และ multiple จะส่งผลให้เกิดโหมดการแสดงผลเดียวกันในอุปกรณ์เคลื่อนที่และเดสก์ท็อป สรุปการเปลี่ยนแปลงได้ดังนี้
- เมื่อแอตทริบิวต์
sizeมีค่ามากกว่า1ระบบจะใช้การแสดงผลในหน้าเว็บเสมอ ก่อนหน้านี้อุปกรณ์เคลื่อนที่จะไม่สนใจค่านี้ - เมื่อตั้งค่าแอตทริบิวต์
multipleโดยไม่มีแอตทริบิวต์sizeระบบจะใช้การแสดงผลในหน้าเว็บ ก่อนหน้านี้อุปกรณ์เคลื่อนที่จะใช้ป๊อปอัปแทนกล่องรายการในหน้าเว็บ - เมื่อตั้งค่าแอตทริบิวต์
multipleด้วยsize=1ระบบจะใช้ป๊อปอัป ก่อนหน้านี้อุปกรณ์เดสก์ท็อปจะใช้กล่องรายการในหน้าเว็บ
การเปิดใช้งานของผู้ใช้แบบ Sticky ในการนำทางที่เริ่มต้นโดย Renderer ในต้นทางเดียวกัน
Chrome จะรักษาสถานะการเปิดใช้งานของผู้ใช้แบบ Sticky ไว้หลังจากที่หน้าเว็บเปลี่ยนไปเป็นหน้าเว็บอื่นในต้นทางเดียวกัน การไม่มีการเปิดใช้งานของผู้ใช้ในหน้าเว็บหลังการนำทางจะป้องกันไม่ให้มีการใช้งานบางกรณี เช่น การแสดงแป้นพิมพ์เสมือนเมื่อโฟกัสอัตโนมัติ ซึ่งเป็นการบล็อกนักพัฒนาซอฟต์แวร์ที่ต้องการสร้าง MPA ผ่าน SPA
การดำเนินการนี้ไม่ครอบคลุมคำขอนำทางที่เริ่มต้นโดยเบราว์เซอร์ (โหลดซ้ำ การนำทางประวัติ URL ที่พิมพ์ในแถบที่อยู่ และอื่นๆ)
Web API
WebGPU: ฟีเจอร์ primitive_index
WebGPU เพิ่มความสามารถใหม่ที่ไม่บังคับซึ่งแสดงผล Shader ในตัวใหม่ของ WGSL, primitive_index โดยจะแสดงดัชนีต่อ Primitive ให้กับ Fragment Shader ในฮาร์ดแวร์ที่รองรับ ซึ่งคล้ายกับ Shader ในตัว vertex_index และ instance_index ดัชนี Primitive มีประโยชน์สำหรับเทคนิคกราฟิกขั้นสูง เช่น Geometry แบบเสมือน
WebGPU: รูปแบบ Texture ระดับ 1 และระดับ 2
ขยายการรองรับรูปแบบ Texture ของ GPU ด้วยความสามารถต่างๆ เช่น การแนบการแสดงผล การผสม การสุ่มตัวอย่างหลายรายการ การแก้ปัญหา และการผูกพื้นที่เก็บข้อมูล
พร็อพเพอร์ตี้ `dataTransfer` สำหรับเหตุการณ์อินพุต insertFromPaste, insertFromDrop และ insertReplacementText
ป้อนข้อมูลพร็อพเพอร์ตี้ dataTransfer ในเหตุการณ์อินพุตด้วยค่า inputType เป็น insertFromPaste, insertFromDrop และ insertReplacementText เพื่อให้เข้าถึงข้อมูลคลิปบอร์ดและการลากและวางได้ระหว่างการดำเนินการแก้ไขในองค์ประกอบ contenteditable
ออบเจ็กต์ dataTransfer มีข้อมูลเดียวกันกับที่ใช้ได้ระหว่างเหตุการณ์ beforeinput
ฟีเจอร์นี้ใช้ได้กับองค์ประกอบ contenteditable เท่านั้น สำหรับตัวควบคุมแบบฟอร์ม
(textarea, input) ลักษณะการทำงานจะยังคงเหมือนเดิม
พร็อพเพอร์ตี้นี้ทำให้ Chrome ทำงานร่วมกับ Safari และ Firefox ได้
เซสชันสื่อ: เพิ่มเหตุผลลงในรายละเอียดการดำเนินการ enterpictureinpicture
เพิ่ม enterPictureInPictureReason ลงใน MediaSessionActionDetails ที่ส่งไปยังการดำเนินการ enterpictureinpicture ใน Media Session API ซึ่งช่วยให้นักพัฒนาแอปแยกความแตกต่างระหว่างการดำเนินการ enterpictureinpicture ที่ผู้ใช้ทริกเกอร์อย่างชัดแจ้ง (เช่น จากปุ่มใน User Agent) กับการดำเนินการ enterpictureinpicture ที่ User Agent ทริกเกอร์โดยอัตโนมัติเนื่องจากเนื้อหาถูกบดบัง
การปรับแต่งตามบริบทของ Web Speech API
การอัปเดตนี้ช่วยให้เว็บไซต์รองรับการปรับแต่งตามบริบทสำหรับการจดจำเสียงพูดได้โดยการเพิ่มรายการวลีการจดจำลงใน Web Speech API
นักพัฒนาแอปสามารถระบุรายการวลีและอัปเดตวลีเหล่านั้นเพื่อปรับแต่งโมเดลการจดจำเสียงพูดให้รองรับวลีเหล่านั้น ซึ่งจะช่วยปรับปรุงความแม่นยำและความเกี่ยวข้องสำหรับการจดจำเสียงพูดเฉพาะโดเมนและการจดจำเสียงพูดที่ปรับให้เหมาะกับแต่ละบุคคล
การตรวจสอบโทเค็น MIME *+json ที่เข้มงวดมากขึ้นสำหรับโมดูล JSON
ปฏิเสธการตอบสนองของสคริปต์โมดูล JSON ที่ประเภทหรือประเภทย่อยของประเภท MIME มีจุดโค้ดโทเค็นที่ไม่ใช่ HTTP (เช่น ช่องว่าง) เมื่อจับคู่กับ *+json ซึ่งสอดคล้องกับข้อกำหนด MIME Sniffing และเครื่องมืออื่นๆ และเป็นส่วนหนึ่งของพื้นที่ที่เน้นโมดูล 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 ลงในกระบวนการ Renderer เดียว
การแยกต้นทางจะแยกต้นทางแต่ละรายการ (เช่น https://foo.example.com) ไว้ในกระบวนการ Renderer ของตัวเอง ซึ่งช่วยเสริมความแข็งแกร่งให้กับสถาปัตยกรรมความปลอดภัยของ Chrome โดยการปรับขอบเขตกระบวนการให้สอดคล้องกับโมเดลความปลอดภัยพื้นฐานของเว็บที่อิงตามต้นทาง ซึ่งให้การปกป้องที่ดียิ่งขึ้นจากช่องโหว่ที่อาจเกิดขึ้นภายในเว็บไซต์
เหตุการณ์ pointerrawupdate ที่ทำงานร่วมกันได้จะแสดงเฉพาะในบริบทที่ปลอดภัย
ข้อกำหนด PointerEvents จำกัด pointerrawupdate ไว้ที่บริบทที่ปลอดภัยในปี 2020 โดยซ่อนทั้งการทริกเกอร์เหตุการณ์และ Listener เหตุการณ์ส่วนกลางจากบริบทที่ไม่ปลอดภัย การอัปเดตนี้ทำให้ Chrome สอดคล้องกับข้อกำหนดที่อัปเดตและทำงานร่วมกับเบราว์เซอร์หลักอื่นๆ ได้
ช่วงทดลองใช้จากต้นทางที่อยู่ระหว่างดำเนินการ
ใน Chrome 142 คุณสามารถเลือกใช้ช่วงทดลองใช้จากต้นทางใหม่ต่อไปนี้ origin trials
ข้อมูลเข้าสู่ระบบเซสชันที่ผูกกับอุปกรณ์
วิธีให้เว็บไซต์ผูกเซสชันกับอุปกรณ์เครื่องเดียวอย่างปลอดภัย
ช่วยให้เซิร์ฟเวอร์ผูกเซสชันกับอุปกรณ์ได้อย่างปลอดภัย เบราว์เซอร์จะต่ออายุเซสชันเป็นระยะๆ เมื่อเซิร์ฟเวอร์ขอ โดยมีหลักฐานการครอบครองคีย์ส่วนตัว
พูลซ็อกเก็ต TCP ต่อเว็บไซต์ระดับบนสุด
การทดลองนี้จะประเมินผลกระทบของการเปลี่ยนขนาดพูลซ็อกเก็ต TCP ต่อโปรไฟล์จาก 256 (ค่าเริ่มต้น) เป็น 513 ขณะที่เพิ่มขีดจำกัดต่อเว็บไซต์ระดับบนสุดที่ 256 (เพื่อให้แน่ใจว่าไม่มี 2 แท็บที่จะใช้พูลจนหมด) เราได้ศึกษาความเป็นไปได้ในการเพิ่มขีดจำกัดต่อโปรไฟล์เป็น 512 แล้วและไม่พบผลลัพธ์เชิงลบ ขีดจำกัดต่อเว็บไซต์ระดับบนสุดที่ 256 เท่ากับขีดจำกัดต่อโปรไฟล์เริ่มต้น ดังนั้นจึงไม่ควรส่งผลเสียต่อประสิทธิภาพ ระบบจะกำหนดขีดจำกัดเหล่านี้แยกกันสำหรับพูล WebSocket และพูลซ็อกเก็ตปกติ (HTTP)
เราตั้งใจที่จะเปิดตัวการทดลองนี้โดยตรงหากไม่มีผลเสียเกิดขึ้น