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

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

การรีแบรนด์ที่พักหลัก 2 รายการที่คุณควรทราบมีดังนี้

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