การเปลี่ยนแปลงไวยากรณ์การกำหนดตำแหน่ง Anchor

Una Kravets
Mason Freed
Mason Freed
X GitHub

เปิดตัวการวางตำแหน่งแท็ก Anchor ของ CSS ใน Chrome 125 API เวอร์ชันแรกที่ให้บริการแบบสาธารณะนี้ทำให้เกิดการสนทนาเพิ่มเติมเกี่ยวกับไวยากรณ์ จากการสนทนาครั้งนั้น มีการเปลี่ยนแปลงบางอย่างเล็กน้อยตั้งแต่เปิดตัวฟีเจอร์ หากคุณเคยลองใช้การกำหนดตำแหน่งแท็ก Anchor ของ CSS แล้ว โพสต์นี้จะอธิบายการเปลี่ยนแปลงที่คุณต้องดำเนินการกับโค้ด หรือเนื้อหาเกี่ยวกับการจัดตำแหน่ง Anchor

มีการเปลี่ยนชื่อพร็อพเพอร์ตี้หลัก 2 แบบที่คุณควรทราบ ดังนี้

  1. inset-area เปลี่ยนชื่อเป็น position-area แล้ว กลุ่มทำงาน CSS ต้องการเปลี่ยนชื่อนี้เพราะวลี position- ช่วยให้คุณจำได้ว่าระบบใช้คุณสมบัตินี้กับองค์ประกอบที่อยู่ในตำแหน่ง ไม่ใช่องค์ประกอบ Anchor การเปลี่ยนแปลงนี้จะเริ่มใน Chrome 129 และระบบรองรับ inset-area จนถึง Chrome 131 เพื่อให้คุณมีเวลาอัปเดตเดโมหรือบทความที่มีอยู่
  2. 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 ได้ที่นี่