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

Adriana Jara

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

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

จุดยืนของ CSS Anchor

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

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

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

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

// 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 เปิดตัว