สิ่งใหม่ๆ ใน Chrome 125

Adriana Jara

สิ่งที่จำเป็นต้องทราบมีดังนี้

ฉันชื่อ Adriana Jara เรามาเจาะลึกและดูว่ามีอะไรใหม่ใน Chrome 125 สำหรับนักพัฒนาซอฟต์แวร์กัน

จุดยืนของ CSS Anchor

การแสดงองค์ประกอบที่ยึดอยู่กับองค์ประกอบอื่นช่วยให้คุณสร้างรูปแบบ UI ได้ เช่น การใช้ป๊อปอัปเป็นเคล็ดลับเครื่องมือ และแนบไว้กับองค์ประกอบที่เรียกใช้ป๊อปอัปนั้น

เมื่อใช้การวางตำแหน่งแท็ก Anchor ของ CSS คุณสามารถปล่อยองค์ประกอบที่อยู่ในตำแหน่งสัมบูรณ์ไปยังองค์ประกอบอย่างน้อย 1 รายการในหน้าเว็บได้ในลักษณะที่ประกาศ โดยไม่จำเป็นต้องใช้ JavaScript และทำงานได้อย่างมีประสิทธิภาพเมื่อเลื่อนแท็ก Anchor ได้

ฟีเจอร์การวางตำแหน่งจุดยึดประกอบด้วยพร็อพเพอร์ตี้ CSS จำนวนมาก ต ตัวอย่างคุณสมบัติหลักๆ ดังนี้

  • anchor-name: ตั้งค่าองค์ประกอบให้เป็นจุดยึดสำหรับองค์ประกอบอื่นๆ
  • position-anchor: อธิบาย "ค่าเริ่มต้น" Anchor ที่ องค์ประกอบ Anchor ควรใช้สำหรับการวางตำแหน่งจุดยึด
  • ฟังก์ชัน anchor(): หมายถึงตำแหน่งของจุดยึด ของคุณ โดยกำหนดตำแหน่ง องค์ประกอบที่ตรึงไว้
  • inset-area: ชวเลขสำหรับการวางตำแหน่งสำหรับตำแหน่งที่เกี่ยวข้องทั่วไป

Compute Pressure API

Compute Pressure API มีสถานะระดับสูงที่แสดงถึงโหลดของ CPU ในระบบ

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

Intel เป็นผู้นำในการออกแบบและปรับใช้ API นี้ ซึ่งช่วยให้แอปการประชุมทางวิดีโอสร้างสมดุลระหว่างฟีเจอร์และประสิทธิภาพได้แบบไดนามิก

ไปที่ Compute Pressure API เพื่อดูตัวอย่างและข้อมูลเพิ่มเติม

ขยาย Storage Access API (SAA) ไปยังพื้นที่เก็บข้อมูลที่ไม่ใช่คุกกี้แล้ว

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

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

// Request a new storage handle via rSA (this may prompt the user)
let handle = await document.requestStorageAccess({indexedDB : true});

// Open or create an indexedDB that is shared with the 1P context
let messageDB = handle.indexedDB.open("messages");

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

แถมยังมีอีกมากมาย

  • มีการทดลองใช้ต้นทางสําหรับ Device Posture API และ Viewport Audiences Enumeration API API เหล่านี้ออกแบบมาเพื่อช่วยนักพัฒนาแอปกำหนดเป้าหมายอุปกรณ์แบบพับได้

  • มีการเพิ่มฟังก์ชันค่าขั้นบันไดของ CSS round(), mod() และ rem() ทำให้ฟีเจอร์เหล่านี้พร้อมใช้งานแบบใหม่

  • ตอนนี้ Shared Storage API รองรับการเรียกใช้ Worklet แบบข้ามต้นทางโดยไม่ต้องสร้าง iframe

อ่านบันทึกประจำรุ่นฉบับเต็ม

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

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

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

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

ขอโทษครับ Adriana Jara นะ ทันทีที่ Chrome 126 เปิดตัว ผมจะมาบอกว่ามีอะไรใหม่ใน Chrome