Una Kravets
Mason Freed
เปิดตัวการวางตำแหน่งแท็ก Anchor ของ CSS ใน Chrome 125 API เวอร์ชันแรกที่ให้บริการแบบสาธารณะนี้ทำให้เกิดการสนทนาเพิ่มเติมเกี่ยวกับไวยากรณ์ จากการสนทนาครั้งนั้น มีการเปลี่ยนแปลงบางอย่างเล็กน้อยตั้งแต่เปิดตัวฟีเจอร์ หากคุณเคยลองใช้การกำหนดตำแหน่งแท็ก Anchor ของ CSS แล้ว โพสต์นี้จะอธิบายการเปลี่ยนแปลงที่คุณต้องดำเนินการกับโค้ด หรือเนื้อหาเกี่ยวกับการจัดตำแหน่ง Anchor
มีการเปลี่ยนชื่อพร็อพเพอร์ตี้หลัก 2 แบบที่คุณควรทราบ ดังนี้
inset-areaเปลี่ยนชื่อเป็นposition-areaแล้ว กลุ่มทำงาน CSS ต้องการเปลี่ยนชื่อนี้เพราะวลีposition-ช่วยให้คุณจำได้ว่าระบบใช้คุณสมบัตินี้กับองค์ประกอบที่อยู่ในตำแหน่ง ไม่ใช่องค์ประกอบ Anchor การเปลี่ยนแปลงนี้จะเริ่มใน 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 ได้ที่นี่