API การกำหนดตำแหน่ง Anchor ของ CSS เป็นตัวเปลี่ยนเกมในการพัฒนาเว็บเนื่องจากช่วยให้คุณจัดตำแหน่งองค์ประกอบให้สัมพันธ์กับองค์ประกอบอื่นๆ ที่เรียกว่า Anchor ได้ตั้งแต่แรก API นี้ช่วยลดความซับซ้อนของข้อกำหนดด้านเลย์เอาต์ที่ซับซ้อนสำหรับฟีเจอร์หลายรายการของอินเทอร์เฟซ เช่น เมนูและเมนูย่อย เคล็ดลับเครื่องมือ การเลือก ป้ายกำกับ การ์ด กล่องโต้ตอบการตั้งค่า และอื่นๆ อีกมากมาย ด้วยการวางตำแหน่ง Anchor ที่ติดตั้งมาในเบราว์เซอร์ คุณจะสามารถสร้างอินเทอร์เฟซผู้ใช้แบบเลเยอร์ได้โดยไม่ต้องอาศัยไลบรารีของบุคคลที่สาม ซึ่งเป็นการเปิดโลกแห่งโอกาสในการสร้างสรรค์
การกำหนดตำแหน่งจุดยึดมีให้ใช้งานใน Chrome 125
แนวคิดหลัก: จุดยึดและองค์ประกอบที่กำหนดตำแหน่ง
หัวใจสำคัญของ API นี้คือความสัมพันธ์ระหว่างแท็ก Anchor และองค์ประกอบที่มีตำแหน่ง แท็ก Anchor คือองค์ประกอบที่กำหนดให้เป็นจุดอ้างอิงโดยใช้คุณสมบัติ anchor-name องค์ประกอบที่มีตำแหน่งคือองค์ประกอบที่วางไว้ที่สัมพันธ์กับ Anchor โดยใช้คุณสมบัติ position-anchor หรือใช้ anchor-name อย่างชัดเจนในตรรกะการวางตำแหน่ง
การตั้งค่า Anchor
การสร้าง Anchor นั้นทำได้ง่าย ใช้พร็อพเพอร์ตี้ Anchor-name กับองค์ประกอบที่เลือก และกำหนดตัวระบุที่ไม่ซ้ำกัน ตัวระบุที่ไม่ซ้ำกันนี้จะต้องเพิ่มเครื่องหมายขีดกลาง 2 ขีดไว้หน้า เช่นเดียวกับตัวแปร CSS
.anchor-button {
anchor-name: --anchor-el;
}
เมื่อกำหนดชื่อ Anchor แล้ว .anchor-button จะทำหน้าที่เป็นโฆษณา Anchor ที่พร้อมช่วยแนะนำตำแหน่งขององค์ประกอบอื่นๆ คุณสามารถเชื่อมต่อแท็ก Anchor นี้กับองค์ประกอบอื่นๆ ด้วยวิธีใดวิธีหนึ่งจาก 2 วิธีต่อไปนี้
Anchor แบบไม่เจาะจงปลายทาง
วิธีแรกในการเชื่อมต่อ Anchor กับองค์ประกอบอื่นคือการใช้ Implicit Anchor ตามตัวอย่างโค้ดต่อไปนี้ ระบบจะเพิ่มพร็อพเพอร์ตี้ position-anchor ลงในองค์ประกอบที่คุณต้องการเชื่อมต่อกับแท็ก Anchor และมีชื่อของแท็ก Anchor (ในกรณีนี้คือ --anchor-el) เป็นค่า
.positioned-notice {
position-anchor: --anchor-el;
}
เมื่อใช้ความสัมพันธ์แบบ Anchor โดยนัย คุณจะจัดตำแหน่งองค์ประกอบได้โดยใช้ฟังก์ชัน anchor() โดยไม่ต้องระบุชื่อ Anchor อย่างชัดแจ้งในอาร์กิวเมนต์แรก
.positioned-notice {
position-anchor: --anchor-el;
top: anchor(bottom);
}
โฆษณา Anchor ที่ชัดแจ้ง
คุณสามารถใช้ชื่อแท็ก Anchor โดยตรงในฟังก์ชันแท็ก (เช่น top: anchor(--anchor-el bottom) วิธีนี้เรียกว่าแท็ก Anchor แบบโจ่งแจ้ง และมีประโยชน์หากต้องการยึดแท็ก Anchor กับองค์ประกอบหลายรายการ (อ่านตัวอย่าง)
.positioned-notice {
top: anchor(--anchor-el bottom);
}
จัดตำแหน่งองค์ประกอบให้สัมพันธ์กับแท็ก Anchor
การวางตำแหน่งจุดยึดสร้างขึ้นจากการจัดตำแหน่งแบบสัมบูรณ์ของ CSS หากต้องการใช้ค่าการกำหนดตำแหน่ง คุณต้องเพิ่ม position: absolute ลงในองค์ประกอบที่กำหนดตำแหน่ง จากนั้นใช้ฟังก์ชัน anchor() เพื่อใช้ค่าการกำหนดตำแหน่ง ตัวอย่างเช่น หากต้องการจัดตำแหน่งองค์ประกอบที่ตรึงไว้ที่ด้านซ้ายบนขององค์ประกอบการตรึง ให้ใช้ตำแหน่งต่อไปนี้
.positioned-notice {
position-anchor: --anchor-el;
/* absolutely position the positioned element */
position: absolute;
/* position the right of the positioned element at the right edge of the anchor */
right: anchor(right);
/* position the bottom of the positioned element at the top edge of the anchor */
bottom: anchor(top);
}
ตอนนี้คุณจะมีองค์ประกอบหนึ่งที่ตรึงอยู่กับอีกองค์ประกอบหนึ่ง เช่น
หากต้องการใช้การจัดตำแหน่งเชิงตรรกะสำหรับค่าเหล่านี้ ค่าที่เทียบเท่ามีดังนี้:
top=inset-block-startleft=inset-inline-startbottom=inset-block-endright=inset-inline-end
จัดตำแหน่งให้องค์ประกอบที่มีตำแหน่งอยู่กึ่งกลางด้วย anchor-center
มีค่าใหม่ที่เรียกว่า anchor-center ซึ่งสามารถใช้กับพร็อพเพอร์ตี้ justify-self, align-self, justify-items และ align-items เพื่อให้จัดองค์ประกอบที่มีตำแหน่งแท็ก Anchor ไว้ตรงกลางได้ง่ายขึ้น
ตัวอย่างนี้จะแก้ไของค์ประกอบก่อนหน้าโดยใช้ justify-self: anchor-center เพื่อจัดตำแหน่งองค์ประกอบที่อยู่ด้านบนของจุดยึด
.positioned-notice {
position: absolute;
/* Anchor reference */
position-anchor: --anchor-el;
/* Position bottom of positioned elem at top of anchor */
bottom: anchor(top);
/* Center justification to the anchor */
justify-self: anchor-center;
}
justify-center
โฆษณา Anchor หลายรายการ
องค์ประกอบสามารถปล่อยสัญญาณไปยัง Anchor ได้มากกว่า 1 รายการ ซึ่งหมายความว่าคุณอาจต้องกำหนดค่าตำแหน่งที่สัมพันธ์กับจุดยึดมากกว่า 1 รายการ โดยใช้ฟังก์ชัน anchor() และระบุ Anchor ที่คุณกำลังอ้างอิงในอาร์กิวเมนต์แรกให้ชัดเจน ในตัวอย่างต่อไปนี้ ด้านบนซ้ายขององค์ประกอบที่วางตำแหน่งจะตรึงอยู่ที่ด้านล่างขวาของจุดยึด 1 จุด และมุมขวาล่างขององค์ประกอบที่วางตำแหน่งจะตรึงอยู่ที่ด้านซ้ายบนของจุดยึดที่ 2
.anchored {
position: absolute;
top: anchor(--one bottom);
left: anchor(--one right);
right: anchor(--two left);
bottom: anchor(--two top);
}
ตำแหน่งที่มี inset-area
นอกจากการวางตำแหน่งทิศทางเริ่มต้นจากการจัดตำแหน่งแบบสัมบูรณ์แล้ว ยังมีกลไกเลย์เอาต์ใหม่รวมอยู่ใน API การตรึงที่เรียกว่าพื้นที่แทรกอีกด้วย
พื้นที่โดยรอบช่วยให้วางองค์ประกอบที่ยึดตำแหน่งไว้โดยเทียบกับจุดยึดที่เกี่ยวข้องได้โดยง่าย และทำงานบนตารางกริดที่มี 9 เซลล์โดยมีองค์ประกอบจุดยึดอยู่ตรงกลาง
ตัวเลือกการกำหนดตำแหน่งพื้นที่แทรกที่เป็นไปได้ต่างๆ ซึ่งแสดงในตารางกริด 9 เซลล์
หากต้องการใช้พื้นที่แทรกแทนการจัดตำแหน่งแบบสัมบูรณ์ ให้ใช้พร็อพเพอร์ตี้ inset-area ที่มีค่าทางกายภาพหรือทางตรรกะ เช่น
- กึ่งกลางด้านบน:
inset-area: topหรือinset-area: block-start - กึ่งกลางด้านซ้าย:
inset-area: leftหรือinset-area: inline-start - กึ่งกลางด้านล่าง:
inset-area: bottomหรือinset-area: block-end - กึ่งกลางด้านขวา:
inset-area: rightหรือinset-area: inline-end
หากต้องการสำรวจตำแหน่งเหล่านี้เพิ่มเติม ให้ดูเครื่องมือต่อไปนี้
องค์ประกอบขนาดที่มี anchor-size()
ฟังก์ชัน anchor-size() ซึ่งเป็นส่วนหนึ่งของ API การกำหนดตำแหน่ง Anchor สามารถใช้เพื่อปรับขนาดหรือจัดตำแหน่งองค์ประกอบที่มีตำแหน่ง Anchor โดยอิงตามขนาดแท็ก Anchor (ความกว้าง ความสูง หรือขนาดแบบอินไลน์และแบบบล็อก)
CSS ต่อไปนี้แสดงตัวอย่างของการใช้สิ่งนี้สำหรับความสูง โดยใช้ anchor-size(height) ภายในฟังก์ชัน calc() เพื่อตั้งค่าความสูงสูงสุดของเคล็ดลับเครื่องมือเป็น 2 เท่าของความสูงของ Anchor
.positioned-notice {
position-anchor: --question-mark;
/* set max height of the tooltip to 2x height of the anchor */
max-height: calc(anchor-size(height) * 2);
}
anchor-size
ใช้แท็ก Anchor กับองค์ประกอบเลเยอร์ด้านบน เช่น ป็อปโอเวอร์และกล่องโต้ตอบ
การวางตำแหน่งจุดยึดทำงานได้เป็นอย่างดีกับองค์ประกอบในเลเยอร์ด้านบนอย่าง popover และ <dialog> แม้ว่าองค์ประกอบเหล่านี้จะวางอยู่ในเลเยอร์ที่แยกต่างหากจากต้นไม้ย่อยอื่นๆ ที่เหลือของ DOM แต่การวางตำแหน่ง Anchor จะช่วยให้คุณปล่อยองค์ประกอบเหล่านี้กลับไปยังและเลื่อนตามองค์ประกอบที่ไม่ได้อยู่ในเลเยอร์บนสุดได้ นี่เป็นความสำเร็จครั้งใหญ่ของอินเทอร์เฟซแบบเลเยอร์
ในตัวอย่างต่อไปนี้ ชุดป๊อปอัปเคล็ดลับเครื่องมือจะทำงานให้เปิดโดยใช้ปุ่ม ปุ่มจะเป็นจุดยึด ส่วนเคล็ดลับเครื่องมือจะเป็นองค์ประกอบที่มีตําแหน่ง คุณจัดรูปแบบองค์ประกอบที่จัดวางได้ในลักษณะเดียวกับองค์ประกอบที่ตรึงตำแหน่งอื่นๆ สำหรับตัวอย่างนี้ anchor-name และ position-anchor เป็นรูปแบบแทรกในบรรทัดบนปุ่มและเคล็ดลับเครื่องมือ เนื่องจาก Anchor แต่ละรายการต้องมีชื่อ Anchor ที่ไม่ซ้ำกัน เมื่อสร้างเนื้อหาแบบไดนามิก การอินไลน์จึงเป็นวิธีที่ง่ายที่สุด
popover
ปรับตำแหน่งยึดด้วย @position-try
เมื่อคุณมีตำแหน่งยึดเริ่มต้นแล้ว คุณอาจต้องการปรับตำแหน่งหากการเชื่อมโยงถึงขอบของบล็อกที่มีอยู่ หากต้องการสร้างตำแหน่งแท็ก Anchor อื่น คุณใช้คำสั่ง @position-try ควบคู่กับพร็อพเพอร์ตี้ position-try-options ได้
ในตัวอย่างต่อไปนี้ เมนูย่อยจะปรากฏทางด้านขวาของเมนู เมนูและเมนูย่อยเป็นการใช้ API กำหนดตำแหน่งจุดยึดร่วมกับแอตทริบิวต์ป๊อปอัปได้เป็นอย่างดี เนื่องจากเมนูเหล่านี้มักจะตรึงอยู่กับปุ่มทริกเกอร์
สำหรับเมนูย่อยนี้ หากมีพื้นที่ไม่เพียงพอในแนวนอน คุณสามารถย้ายไปไว้ใต้เมนูแทนได้ โดยให้ตั้งตำแหน่งเริ่มต้นดังนี้
#submenu {
position: absolute;
position-anchor: --submenu;
/* initial position */
margin-left: var(--padding);
inset-area: right span-bottom;
}
จากนั้นตั้งค่าตำแหน่ง Anchor สำรองโดยใช้ @position-try ดังนี้
/* alternate position */
@position-try --bottom {
margin: var(--padding) 0 0 var(--padding);
inset-area: bottom;
}
สุดท้าย ให้เชื่อมต่ออุปกรณ์ทั้ง 2 เครื่องกับ position-try-options เมื่อรวมกันแล้วจะมีลักษณะดังนี้
#submenu {
position: absolute;
position-anchor: --submenu;
/* initial position */
margin-left: var(--padding);
inset-area: right span-bottom;
*/ connect with position-try options */
position-try-options: --bottom;
}
/* alternate position */
@position-try --bottom {
margin: var(--padding) 0 0 var(--padding);
inset-area: bottom;
}
popoverคีย์เวิร์ดที่เปลี่ยนตำแหน่งโดยอัตโนมัติให้เป็นตำแหน่งยึด
หากคุณมีการปรับเปลี่ยนพื้นฐาน เช่น พลิกจากบนลงล่างหรือซ้ายไปขวา (หรือทั้ง 2 อย่าง) คุณยังสามารถข้ามขั้นตอนการสร้างการประกาศ @position-try ที่กำหนดเอง และใช้คีย์เวิร์ดแบบพลิกที่มีเบราว์เซอร์รองรับ เช่น flip-block และ flip-inline ได้ด้วย รายการเหล่านี้ใช้เป็นสแตนอินสำหรับการประกาศ @position-try ที่กำหนดเอง และใช้ร่วมกับการประกาศอื่นได้
position-try-options: flip-block, flip-inline, flip-block flip-inline;
คีย์เวิร์ดแบบพลิกสามารถทำให้โค้ด Anchor ง่ายขึ้นได้มาก คุณสามารถสร้างโฆษณา Anchor ที่ทํางานอย่างเต็มรูปแบบโดยมีตําแหน่งอื่นได้เพียงไม่กี่บรรทัด ดังนี้
#my-tooltip {
position-anchor: --question-mark;
inset-area: top;
position-try-options: flip-block;
}
position-try-options: flip-blockposition-visibility สำหรับ Anchor ในการเลื่อนย่อย
ในบางกรณีคุณอาจต้องการตรึงองค์ประกอบภายในการเลื่อนย่อยของหน้าเว็บ ในกรณีเหล่านี้ คุณจะควบคุมการแสดง Anchor โดยใช้ position-visibility ได้ แท็ก Anchor จะปรากฏอยู่ในมุมมองเมื่อใด มันหายไปเมื่อไหร่ คุณจะควบคุมตัวเลือกเหล่านี้ได้ด้วยฟีเจอร์นี้ คุณใช้ position-visibility: anchors-visible เมื่อต้องการให้องค์ประกอบที่ระบุตำแหน่งปรากฏในมุมมองจนกว่าแท็ก Anchor จะหายไป
#tooltip {
position: fixed;
position-anchor: --anchor-top-anchor;
position-visibility: anchors-visible;
bottom: anchor(top);
}
position-visibility: anchors-visible การสาธิตหรือใช้ position-visibility: no-overflow เพื่อป้องกันไม่ให้ Anchor ล้นคอนเทนเนอร์
#tooltip {
position: absolute;
position-anchor: --anchor-top-anchor;
position-visibility: no-overflow;
bottom: anchor(top);
}
position-visibility: no-overflow การสาธิตการตรวจหาฟีเจอร์และการเติมข้อมูลด้วย Polyfill
เนื่องจากในขณะนี้เรารองรับเบราว์เซอร์ได้อย่างจำกัด คุณอาจต้องการใช้ API นี้โดยมีข้อควรระวังบางประการ ก่อนอื่น คุณจะตรวจสอบการสนับสนุนใน CSS ได้โดยตรงโดยใช้การค้นหาฟีเจอร์ @supports วิธีการคือรวมรูปแบบ Anchor ไว้ดังนี้
@supports (anchor-name: --myanchor) {
/* Anchor styles here */
}
นอกจากนี้ คุณสามารถทำให้ฟีเจอร์ระบุตำแหน่ง Anchor เป็นโพลีฟิลล์ด้วย polyfill การกำหนดตำแหน่ง Anchor ของ CSS โดย Oddbird ซึ่งใช้งานได้จาก Firefox 54, Chrome 51, Edge 79 และ Safari 10 Polyfill นี้รองรับฟีเจอร์ตำแหน่งจุดยึดพื้นฐานส่วนใหญ่ แม้ว่าการใช้งานในปัจจุบันจะไม่สมบูรณ์และมีไวยากรณ์ที่ล้าสมัยก็ตาม คุณสามารถใช้ลิงก์ unpkg หรือนำเข้าในตัวจัดการแพ็กเกจโดยตรงได้
หมายเหตุเกี่ยวกับการช่วยเหลือพิเศษ
แม้ว่า API การจัดตำแหน่งแบบ Anchor จะช่วยให้กำหนดตำแหน่งองค์ประกอบหนึ่งๆ ได้โดยสัมพัทธ์กับองค์ประกอบอื่นๆ แต่ก็ไม่ได้สร้างความสัมพันธ์เชิงความหมายที่มีความหมายระหว่างองค์ประกอบเหล่านั้นโดยพื้นฐาน ถ้ามีความสัมพันธ์เชิงความหมายระหว่างองค์ประกอบ Anchor และองค์ประกอบที่มีตำแหน่ง (ตัวอย่างเช่น องค์ประกอบที่ระบุตำแหน่งเป็นความคิดเห็นที่แถบด้านข้างเกี่ยวกับ Anchor Text) วิธีหนึ่งที่ทำได้คือการใช้ aria-details เพื่อชี้จากองค์ประกอบ Anchor ไปยังองค์ประกอบที่กำหนดตำแหน่ง ซอฟต์แวร์โปรแกรมอ่านหน้าจอยังเรียนรู้วิธีจัดการกับรายละเอียด ARIA แต่การสนับสนุนกำลังปรับปรุงให้ดีขึ้น
<div class="anchor" aria-details="sidebar-comment">Main content</div>
<div class="positioned" id="sidebar-comment">Sidebar content</div>
.anchor {
anchor-name: --anchor;
}
.positioned {
position: fixed;
position-anchor: --anchor;
}
หากกำลังใช้การวางตำแหน่ง Anchor กับแอตทริบิวต์ popover หรือกับองค์ประกอบ <dialog> เบราว์เซอร์จะจัดการการแก้ไขการนำทางที่โฟกัสเพื่อการช่วยเหลือพิเศษที่เหมาะสม คุณจึงไม่จำเป็นต้องแสดงป๊อปอัปหรือกล่องโต้ตอบตามลำดับ DOM อ่านเพิ่มเติมในหมายเหตุเกี่ยวกับการช่วยเหลือพิเศษในข้อมูลจำเพาะ
บทสรุป
นี่เป็นฟีเจอร์ใหม่และตื่นเต้นที่จะได้เห็นสิ่งที่คุณสร้างด้วยฟีเจอร์นี้ จนถึงตอนนี้ เราได้เห็นกรณีการใช้งานที่ดูดีมากๆ จากชุมชน เช่น ป้ายกำกับแบบไดนามิกในแผนภูมิ เส้นเชื่อมต่อ เชิงอรรถ และการอ้างอิงแบบภาพ ในระหว่างที่คุณทดสอบการวางตำแหน่ง Anchor เราอยากทราบความคิดเห็นของคุณและหากคุณพบข้อบกพร่อง โปรดแจ้งให้เราทราบ