เครื่องมือสร้าง CSS Container Query
เครื่องมือสร้าง container query ออนไลน์ฟรี สร้าง @container และ container-type rules พร้อมพรีวิวสด รองรับ named container, min/max width query, inline-size และ size type คัดลอก CSS ได้ทันที
Loading tool...
เครื่องมือสร้าง CSS Container Query คืออะไร?
CSS Container Query Generator เป็นเครื่องมือสร้าง @container rules และ container-type declaration แบบเห็นภาพ container query ช่วยให้ component ตอบสนองตามขนาดของ container แม่แทน viewport ทำให้ออกแบบ responsive แบบโมดูลาร์ที่ใช้ซ้ำได้อย่างแท้จริง กำหนด container type (inline-size, size, normal), ตั้งชื่อ container, กำหนดเงื่อนไข min/max width query, พรีวิวพฤติกรรมสด และคัดลอก CSS ได้ทันที
ประโยชน์หลัก
- Responsive design แบบ component-driven
- ไม่ต้องใช้ media query ที่ขึ้นกับ viewport
- Container ที่มีชื่อสำหรับการกำหนดสไตล์เฉพาะเจาะจง
- พรีวิวสดของการทำงานของ query
- คัดลอก CSS ได้ทันที
กรณีการใช้งาน
- •Card component ใน layout ที่ยืดหยุ่น
- •พื้นที่ sidebar และเนื้อหาหลัก
- •Component ของ design system ที่ใช้ซ้ำได้
- •Modal และ panel ที่ซ้อนกัน
วิธีใช้เครื่องมือสร้าง CSS Container Query
- เลือก container type: เลือก inline-size (query ตาม width), size (ทั้งสองแกน) หรือ normal (ไม่มี containment)
- ตั้งชื่อ container: กำหนด container-name เช่น "card" เพื่อให้ element ที่ซ้อนอยู่เรียกใช้เฉพาะตัวได้
- กำหนดเงื่อนไข @container: ใส่ค่า min-width และ max-width สำหรับ query (เช่น min-width: 400px)
- พรีวิวและคัดลอก: ลาก slider พรีวิวเพื่อดู query ทำงาน แล้วคัดลอก CSS ที่สร้างขึ้น
คุณสมบัติหลัก
- Container type: inline-size, size และ normal
- Named container (container-name) สำหรับ query เฉพาะเจาะจง
- เงื่อนไข @container query แบบ min และ max width
- พรีวิวสดที่แสดงเมื่อ query ตรงเงื่อนไข
- คัดลอก container declaration และ query CSS ได้ทันที
- ทำงาน 100% ฝั่ง client ไม่ส่งข้อมูลไปเซิร์ฟเวอร์