เครื่องสร้าง CSS Anchor Positioning
สร้างกฎ CSS Anchor Positioning (anchor-name, position-area, position-try fallbacks) สำหรับ popover และ tooltip พร้อมพรีวิวการวางแบบสด ฟรี
Loading tool...
เครื่องสร้าง CSS Anchor Positioning คืออะไร?
เครื่องสร้าง CSS Anchor Positioning เขียน CSS สมัยใหม่ที่ตรึง popover, tooltip และเมนูไว้กับองค์ประกอบทริกเกอร์ - anchor-name, position-anchor, position-area และ fallback พลิกอัตโนมัติ - พร้อมพรีวิวการวางแบบสด
ประโยชน์หลัก
- ให้เบราว์เซอร์วางตำแหน่งเอง แทนการวัดขนาดด้วย JavaScript
- พลิกอัตโนมัติใกล้ขอบจอด้วย position-try-fallbacks
- เป็นมาตรฐานและเข้าถึงได้ เมื่อใช้คู่กับ attribute popover
- พรีวิวสดตัดการเดาออกจากค่าตำแหน่ง
- ผลลัพธ์คัดลอกวางได้ ใช้กับสไตล์ชีตใดก็ได้
กรณีการใช้งาน
- •สร้างเมนู dropdown ที่ตรึงกับปุ่มของมัน
- •ผูก tooltip ที่ไม่มีวันล้นจอ
- •วางข้อความตรวจสอบฟอร์มข้างช่องกรอก
- •เรียนรู้ anchor positioning API ใหม่ด้วยโค้ดจริง
วิธีใช้เครื่องสร้าง CSS Anchor Positioning
- ใส่ selector ทั้งสอง: พิมพ์ selector ของทริกเกอร์และของ popover หรือ tooltip
- เลือกตำแหน่ง: เลือก position-area เช่น top, bottom span-left หรือ center right
- เพิ่ม fallback กันพลาด: เปิด flip-block หรือ flip-inline เพื่อให้เบราว์เซอร์พลิก popover เมื่อใกล้ขอบจอ
- คัดลอก CSS: วางกฎที่สร้างได้ลงสไตล์ชีตแล้วผูก popover ด้วย attribute popover หรือการสลับใดๆ
คุณสมบัติหลัก
- เขียนกฎ anchor-name และ position-anchor สำหรับ selector ของคุณ
- position-area สิบสองแบบ รวมแบบ span และกึ่งกลาง
- เพิ่ม position-try-fallbacks ให้ popover พลิกแทนการล้นจอ
- ปรับช่องว่างระหว่างทริกเกอร์กับ popover ผ่าน margin
- พรีวิวแบบไดอะแกรมแสดงจุดที่ popover จะปรากฏ
- คัดลอก CSS ตามมาตรฐานได้ในคลิกเดียว