สิ่งที่จำเป็นต้องทราบมีดังนี้
- การยึดองค์ประกอบได้ง่ายกว่าที่เคยด้วยการวางตำแหน่ง Anchor ของ CSS
- Compute Pressure API ช่วยเพิ่มประสิทธิภาพพลังงานของคอมพิวเตอร์ที่มีอยู่
- Storage Access API ขยายให้มากกว่าพื้นที่เก็บข้อมูลคุกกี้
- นอกจากนี้ยังมีอีกมากมาย
ฉันชื่อ 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
- มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (125)
- การอัปเดต ChromeStatus.com สำหรับ Chrome 125
- รายการเปลี่ยนแปลงที่เก็บแหล่งที่มาของ Chromium
- ปฏิทินการเผยแพร่ของ Chrome
สมัครใช้บริการ
หากต้องการติดตามข้อมูลล่าสุด โปรดสมัครรับข้อมูล ช่อง YouTube สำหรับนักพัฒนาซอฟต์แวร์ Chrome และคุณจะได้รับการแจ้งเตือนทางอีเมลเมื่อเราเปิดตัววิดีโอใหม่
ขอโทษครับ Adriana Jara นะ ทันทีที่ Chrome 126 เปิดตัว ผมจะมาบอกว่ามีอะไรใหม่ใน Chrome