การกำหนดตำแหน่งจุดยึด CSS เปิดตัวใน Chrome 125 API เวอร์ชันแรกที่เผยแพร่ต่อสาธารณะนี้ทำให้เกิดการสนทนาเพิ่มเติมเกี่ยวกับไวยากรณ์ จากการพูดคุยดังกล่าว เราได้ทําการเปลี่ยนแปลงเล็กน้อยนับตั้งแต่เปิดตัวฟีเจอร์ หากคุณเคยลองใช้ตำแหน่งจุดยึด CSS โพสต์นี้จะอธิบายการเปลี่ยนแปลงที่คุณต้องทํากับโค้ดหรือเนื้อหาเกี่ยวกับตําแหน่งจุดยึด
การรีแบรนด์ที่พักหลัก 2 รายการที่คุณควรทราบมีดังนี้
- เปลี่ยนชื่อ
inset-area
เป็นposition-area
กลุ่มทํางาน CSS ต้องการการรีแบรนด์นี้เนื่องจากวลีposition-
ช่วยให้คุณจําได้ว่าพร็อพเพอร์ตี้นี้ใช้กับองค์ประกอบที่มีตําแหน่ง ไม่ใช่องค์ประกอบแอตทริบิวต์ การเปลี่ยนแปลงนี้จะเริ่มต้นใน Chrome 129 และระบบจะรองรับinset-area
จนถึง Chrome 131 เพื่อให้คุณมีเวลาอัปเดตเดโมหรือบทความที่มี - เปลี่ยนชื่อ
position-try-options
เป็นposition-try-fallbacks
การเปลี่ยนชื่อนี้ช่วยให้คุณจำได้ว่าตำแหน่งเหล่านี้เป็นเพียงตำแหน่งสำรองของตำแหน่งหลัก ซึ่งกำหนดโดยสไตล์พื้นฐาน การเปลี่ยนแปลงนี้มาพร้อมกับ Chrome 128 และposition-try-options
จะใช้ไม่ได้อีกต่อไปในเวอร์ชัน 128 เราขอแนะนำให้คุณใช้ตัวย่อ (เปลี่ยนเป็นposition-try
) ซึ่งใช้ได้ตั้งแต่ Chrome 125 และไม่เปลี่ยนแปลง
นอกจากนี้ ยังมีการเปลี่ยนแปลงด้านพฤติกรรมอีก 1 รายการ ดังนี้
- ระบบจะนำ
inset-area()
ไวยากรณ์ฟังก์ชันการทำงานออกจากposition-try
ดังนั้นให้ใช้position-try-fallbacks: top
แทนposition-try-fallbacks: inset-area(top)
การเปลี่ยนแปลงนี้จะเริ่มขึ้นใน Chrome 129 ด้วย
ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ตำแหน่งโฆษณา Anchor ได้ที่นี่