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

Adriana Jara

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

  • การวางองค์ประกอบเป็นจุดยึดทำได้ง่ายกว่าที่เคยด้วยการกำหนดตำแหน่งจุดยึด CSS
  • Compute Pressure API ช่วยเพิ่มประสิทธิภาพพลังงานคอมพิวเตอร์ที่มีอยู่
  • Storage Access API ขยายการให้บริการไปมากกว่าพื้นที่เก็บข้อมูลคุกกี้
  • และยังมีอีกมากมาย

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

การวางตำแหน่ง Anchor ของ CSS

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

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

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

  • anchor-name: ตั้งค่าองค์ประกอบให้เป็นตัวยึดขององค์ประกอบอื่นๆ
  • position-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 นอกเหนือจากคุกกี้ เมื่อใช้ส่วนขยายนี้ คุณจะเข้าถึงคุกกี้ที่ไม่ได้แบ่งพาร์ติชันและพื้นที่เก็บข้อมูลที่ไม่ใช้คุกกี้ในบริบทของบุคคลที่สามได้ เช่น สําหรับ indexedDB และ localstorage โค้ดต่อไปนี้แสดงตัวอย่างคำขอสิทธิ์เข้าถึง indexedDB

// 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 Segments Enumeration API API เหล่านี้ออกแบบมาเพื่อช่วยนักพัฒนาแอปกำหนดเป้าหมายไปยังอุปกรณ์แบบพับได้

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

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

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

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

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

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

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

ฉันชื่อ Adriana Jara และพร้อมที่จะแจ้งให้คุณทราบเกี่ยวกับสิ่งใหม่ๆ ใน Chrome ทันทีที่ Chrome 126 เปิดตัว