สิ่งที่จำเป็นต้องทราบมีดังนี้
- การยึดองค์ประกอบต่างๆ ทำได้ง่ายกว่าที่เคยด้วยการกำหนดตำแหน่ง Anchor ของ CSS
- Compute Pressure API จะช่วยเพิ่มประสิทธิภาพของคอมพิวเตอร์ที่มีอยู่
- เพิ่ม Storage Access API เพื่อเพิ่มพื้นที่เก็บข้อมูลคุกกี้
- นอกจากนี้ยังมีอื่นๆ อีกมากมาย
ฉันชื่อ Adriana Jara มาเจาะลึกกันเลยและดูว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 125
การกำหนดตำแหน่ง Anchor ของ CSS
การแสดงองค์ประกอบที่ยึดอยู่กับองค์ประกอบอื่นจะช่วยให้คุณสร้างรูปแบบ UI เช่น ใช้ป๊อปอัปเป็นเคล็ดลับเครื่องมือ และนำไปแนบกับองค์ประกอบที่เรียกใช้ได้
การจัดตำแหน่งแท็ก Anchor ของ CSS ช่วยให้คุณปล่อยองค์ประกอบที่มีตำแหน่งแน่นอนกับองค์ประกอบอย่างน้อย 1 รายการในหน้าเว็บในแบบประกาศได้ ไม่ต้องใช้ JavaScript และทำงานได้อย่างมีประสิทธิภาพเมื่อ Anchor สามารถเลื่อนได้
ฟีเจอร์การกำหนดตำแหน่ง Anchor ประกอบด้วยพร็อพเพอร์ตี้ CSS จำนวนมาก คุณสมบัติหลักบางส่วนมีดังนี้
anchor-name: ตั้งค่าองค์ประกอบให้เป็น Anchor สำหรับองค์ประกอบอื่นๆposition-anchor: อธิบาย 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 โค้ดต่อไปนี้แสดงตัวอย่างการส่งคำขอเข้าถึงการจัดทำดัชนีฐานข้อมูล
// 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 และ API การระบุกลุ่มของวิวพอร์ต API เหล่านี้ออกแบบมาเพื่อช่วยนักพัฒนาแอปกำหนดเป้าหมายอุปกรณ์แบบพับได้
มีการเพิ่มฟังก์ชันค่าขั้นบันไดของ CSS
round(),mod()และrem()ทำให้ฟีเจอร์เหล่านี้พร้อมให้บริการเป็นครั้งแรกตอนนี้ Shared Storage API รองรับการเรียกใช้ Worklet ข้ามต้นทางโดยไม่ต้องสร้าง iframe แล้ว
อ่านเพิ่มเติม
ซึ่งจะกล่าวถึงไฮไลต์ที่สำคัญบางส่วนเท่านั้น ไปที่ลิงก์ต่อไปนี้เพื่อดูการเปลี่ยนแปลงเพิ่มเติมใน Chrome 125
- มีอะไรใหม่ใน Chrome DevTools (125)
- การอัปเดต ChromeStatus.com สำหรับ Chrome 125
- รายการเปลี่ยนแปลงที่เก็บของแหล่งที่มา Chromium
- ปฏิทินการเผยแพร่ Chrome
สมัครใช้บริการ
โปรดติดตามช่อง YouTube สำหรับนักพัฒนาซอฟต์แวร์ Chrome และคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่
ขอขอบคุณ คุณ Adriana Jara และทันทีที่มีการเปิดตัว Chrome 126 เราจะแจ้งให้คุณทราบเกี่ยวกับสิ่งใหม่ๆ ใน Chrome