เผยแพร่: 29 ตุลาคม 2025
ตั้งแต่ Chrome 143 เป็นต้นไป คุณสามารถใช้การค้นหาคอนเทนเนอร์ที่ยึดไว้เพื่อระบุเมื่อองค์ประกอบที่ยึดไว้ใช้การจัดตำแหน่งจุดยึดสำรอง โพสต์นี้อธิบายปัญหาที่ฟีเจอร์นี้ช่วยแก้ไข
API การจัดตำแหน่งจุดยึด CSS เป็นวิธีที่มีประสิทธิภาพในการเชื่อมโยงองค์ประกอบ (เช่น ป๊อปโอเวอร์) กับอีกองค์ประกอบหนึ่ง (จุดยึด) และกำหนดชุดการสำรองตำแหน่งที่ใช้หากองค์ประกอบไม่มีที่ว่าง เช่น หากองค์ประกอบที่ยึดไว้ได้รับการจัดรูปแบบในตอนแรกให้อยู่ด้านบน แต่เมื่อคุณเลื่อนและองค์ประกอบดังกล่าวไปถึงขอบของหน้าจอ เบราว์เซอร์จะจัดการ "การพลิก" เพื่อให้อยู่ในวิวพอร์ตได้
อย่างไรก็ตาม ระดับที่ 1 ของข้อกำหนดการวางตำแหน่ง Anchor ยังมีช่องว่างที่สำคัญอยู่ นั่นคือแม้ว่า CSS จะย้ายองค์ประกอบไปยังตำแหน่งสำรองได้ แต่ก็ไม่มีทางทราบว่าระบบเลือกตำแหน่งสำรองใด ซึ่งหมายความว่าคุณไม่สามารถใช้สไตล์ที่แตกต่างกันตามตำแหน่งสุดท้ายนั้นได้ หากทูลทิปพลิกจากด้านล่างขึ้นด้านบน ลูกศรของทูลทิปจะยังคงชี้ไปในทิศทางที่ไม่ถูกต้อง เว้นแต่คุณจะแก้ไขด้วย JavaScript
การค้นหาคอนเทนเนอร์ที่ยึด (กำหนดไว้ในข้อกำหนดระดับ 2 ของตำแหน่งยึด CSS) จะช่วยแก้ปัญหานี้ได้ โดยทำให้การวางตำแหน่งยึด CSS มีความตระหนักตามบริบทที่ขาดหายไป
วิธีการทำงาน: การสำรองข้อมูลการค้นหา
การค้นหาคอนเทนเนอร์ที่ยึดช่วยให้คุณใช้สไตล์ตามวิธีที่เบราว์เซอร์แก้ไขการวางตำแหน่งขององค์ประกอบยึดได้
โดยตั้งค่าด้วยฟีเจอร์ CSS ใหม่ 2 รายการดังนี้
container-type: anchored: ใช้กับองค์ประกอบที่วางตำแหน่ง (เช่น เคล็ดลับเครื่องมือ) ซึ่งจะเปลี่ยนให้เป็นคอนเทนเนอร์คำค้นหาที่ "รับรู้" สถานะการวางตำแหน่งของจุดยึด@container anchored(fallback: ...): ไวยากรณ์กฎ @ ใหม่นี้ช่วยให้คุณค้นหาได้ว่าในท้ายที่สุดแล้วระบบใช้ตัวเลือก position-try-fallbacks ใด
สมมติว่าคุณมีเคล็ดลับเครื่องมือที่ต้องการวางไว้ที่ด้านล่าง แต่มีตำแหน่งด้านบนเป็นตำแหน่งสำรอง โค้ดต่อไปนี้
- พยายามวางตำแหน่ง
.tooltipที่ด้านล่างของโฆษณา Anchor (--my-anchor) ในตอนแรก - หากไม่พอดี ระบบจะย้ายโฆษณาสำรองไปไว้ที่ด้านบน
@containerคำค้นหาจะตรวจหาการกระทำนี้ เมื่อใช้การสำรองข้อมูลสูงสุด การค้นหาanchored(fallback: top)จะกลายเป็นจริง- ซึ่งจะช่วยให้คุณเปลี่ยนเนื้อหาขององค์ประกอบเสมือน ::before จากลูกศร "ขึ้น" (▲) เป็นลูกศร "ลง" (▼) และปรับตำแหน่งได้
/* The element our tooltip is anchored to */
.anchor {
anchor-name: --my-anchor;
}
/* The positioned element (tooltip) */
.tooltip {
/* Use anchor positioning to set fallbacks */
position: absolute;
margin-top: 1rem;
position-anchor: --my-anchor;
position-area: bottom;
position-try-fallbacks: flip-block; /* Reposition in the block direction */
/* Make it an anchored query container */
container-type: anchored;
/* Add a default "up" arrow */
&::before {
content: '▲';
position: absolute;
bottom: 100%; /* Sits on top of the tooltip, pointing up */
}
}
/* Use the anchored query to check the fallback */
@container anchored(fallback: flip-block) {
.tooltip::before {
/* The 'top' fallback was used, so flip the arrow */
content: '▼';
bottom: auto;
top: 100%; /* Move the arrow below the tooltip */
}
}
ทั้งหมดนี้ทำได้ใน CSS โดยไม่ต้องใช้ JavaScript, Observer หรือคลาสเพิ่มเติม หมายเหตุ: หากใช้ Popover API คุณไม่จำเป็นต้องตั้งชื่อแองเคอร์อย่างชัดเจน เนื่องจากระบบจะสร้างความสัมพันธ์ของแองเคอร์โดยนัย
ดูการสาธิตต่อไปนี้ซึ่งใช้แฮ็กเส้นขอบเพื่อสร้างสามเหลี่ยม CSS และจัดตำแหน่งสามเหลี่ยมใหม่ด้วยการค้นหาที่ยึดตาม
บทสรุป
การค้นหาที่ยึดตามตำแหน่งจะทำให้ CSS ทราบตำแหน่งปัจจุบันขององค์ประกอบที่วางตำแหน่งในเบราว์เซอร์ ซึ่งหมายความว่าคุณสามารถสร้างคอมโพเนนต์ที่ยืดหยุ่นและรับรู้บริบทได้มากขึ้น ลูกศรเคล็ดลับเป็นเพียงตัวอย่างหนึ่ง คุณยังทำสิ่งต่อไปนี้ได้ด้วย
- เปลี่ยนสีพื้นหลังของเมนูเมื่อพลิก
- ย้ายรูปแบบเส้นขอบไปยังขอบที่ใกล้กับจุดยึดมากที่สุด
- ปรับ border-radius ในป๊อปโอเวอร์เพื่อให้มุมที่ "แนบ" เป็นสี่เหลี่ยมจัตุรัส
- สร้างภาพเคลื่อนไหวขององค์ประกอบแตกต่างกันไปตามตำแหน่งสำรองที่องค์ประกอบนั้นสแนป
ซึ่งเป็นประโยชน์อย่างมากต่อการวางตำแหน่ง Anchor และไลบรารีคอมโพเนนต์โดยทั่วไป ทำให้องค์ประกอบ UI มีความแข็งแกร่งและมีอยู่ในตัวเองมากขึ้นโดยใช้โค้ดน้อยลง