เครื่องมือสร้าง
CSS Container Query
เครื่องมือสร้าง CSS @container query แบบเห็นภาพผ่าน GUI ตั้งค่า container-type/name, breakpoints, 6 รูปแบบที่ตั้งไว้ล่วงหน้า และแสดงตัวอย่างแบบเรียลไทม์ แปลง media query เป็น container query ได้อย่างง่ายดาย
การตั้งค่า Container
รูปแบบที่ตั้งไว้ล่วงหน้า
จุดตัด (Breakpoints)
แสดงตัวอย่างสด
โค้ด CSS ที่สร้าง
🔄 แปลง Media Query → Container Query
เกี่ยวกับเครื่องมือสร้าง CSS Container Query
เครื่องมือสร้าง CSS Container Query เป็นเครื่องมือสำหรับนักพัฒนาที่ช่วยสร้างโค้ด "@container" ซึ่งเป็นมาตรฐานใหม่ในการออกแบบเว็บแบบตอบสนอง (Responsive) ผ่านอินเทอร์เฟซแบบ GUI แทนที่จะพึ่งพาขนาดของหน้าต่างเบราว์เซอร์ (viewport) เหมือนกับ Media Query แบบเก่า แต่ Container Query จะพึ่งพาขนาดขององค์ประกอบที่ครอบมันอยู่ (container) ทำให้สามารถสลับการแสดงผลของคอมโพเนนต์ต่างๆ ได้อย่างยืดหยุ่นไม่ว่าจะวางไว้ที่ใดก็ตาม
เครื่องมือนี้ช่วยให้คุณสามารถปรับเปลี่ยนพารามิเตอร์ต่างๆ เช่น container-type, container-name และจุดตัด (breakpoint) ได้อย่างอิสระ พร้อมการแสดงตัวอย่างสดแบบเรียลไทม์ นอกจากนี้ยังมีฟังก์ชันแปลง Media Query ช่วยให้คุณอัปเกรดโค้ด @media เดิมให้เป็น @container ได้ในคลิกเดียว โดยข้อมูลทั้งหมดจะทำงานอย่างปลอดภัยอยู่บนเบราว์เซอร์ของคุณ
วิธีใช้งาน
ตั้งค่า Container และ Breakpoint
ป้อนคลาสหรือ ID ของ container และเลือก container-type (แนะนำให้เลือก inline-size) ถัดไปให้คลิก "เพิ่ม Breakpoint" แล้วป้อน CSS เพื่อปรับแต่งเมื่อพื้นที่ของคอนเทนเนอร์มีขนาดตามที่กำหนด หรือจะเริ่มจากรูปแบบที่ตั้งไว้ล่วงหน้าก็ได้
ทดสอบด้วยการแสดงตัวอย่างสด
เลื่อนลงมาที่ส่วนแสดงตัวอย่าง คลิกค้างที่ขอบด้านขวาและลากเพื่อยืดหดขนาดคอนเทนเนอร์ เพื่อดูว่าอินเทอร์เฟซปรับแต่งตามที่คุณต้องการหรือไม่ คุณสามารถวางโค้ด HTML จากโปรเจ็กต์ของคุณเข้าไปเพื่อตรวจสอบความเข้ากันได้
รับโค้ดและแปลง
เมื่อโค้ดพร้อมแล้ว ให้คัดลอกไปใช้ในโปรเจ็กต์ของคุณได้ทันที และถ้าคุณต้องการใช้งานกับโปรเจกต์เดิม ก็สามารถคัดลอก CSS ที่มี @media ลงในส่วนของเครื่องมือแปลง แล้วคลิกเปลี่ยนเป็น @container ช่วยประหยัดเวลาได้อย่างมหาศาล
อภิธานศัพท์ Container Query
- Container Query (@container)
- ฟีเจอร์ของ CSS ที่ช่วยให้คอมโพเนนต์ย่อยปรับรูปแบบตามขนาดความกว้างขององค์ประกอบหลัก (container) แทนที่จะยึดตามขนาดหน้าต่างเบราว์เซอร์
- container-type
- คุณสมบัติที่กำหนดให้องค์ประกอบเป็นเป้าหมายของการทำงาน โดย
inline-sizeจะตรวจสอบเฉพาะความกว้าง ขณะที่sizeจะตรวจสอบทั้งความกว้างและความสูง - container-name
- การระบุชื่อเฉพาะให้คอนเทนเนอร์ มีประโยชน์เมื่อมีคอนเทนเนอร์ซ้อนกันหลายชั้นและต้องการอ้างอิงถึงคอนเทนเนอร์ที่เฉพาะเจาะจงเท่านั้น
- Containment (การกักเก็บ)
- แนวคิดที่ทำให้การทำงานของ container query สามารถเป็นไปได้ โดยจะคัดแยกการคำนวณเค้าโครงของคอนเทนเนอร์เพื่อไม่ให้กระเทือนส่วนอื่นของหน้าเว็บ เพิ่มความเร็วและความเสถียร
- Inline-axis
- แกนการวางแนวของข้อความ สำหรับภาษาทั่วไปที่เขียนแนวนอนจากซ้ายไปขวา แกนนี้จะหมายถึงความกว้าง (Width)
- Media Query (@media)
- คุณสมบัติของ CSS แบบดั้งเดิมที่ใช้รูปแบบต่างๆ โดยพิจารณาจากขนาดของหน้าจอโดยรวม (viewport)
- cqw / cqh / cqi / cqb
- หน่วยวัดความยาวสัมพัทธ์ของ container query (คล้ายกับ vw, vh) โดย 1cqw จะมีค่าเท่ากับ 1% ของความกว้างคอนเทนเนอร์นั้นๆ
คำถามที่พบบ่อย (FAQ)
- Q.ข้อมูลที่ฉันป้อนจะถูกส่งไปที่ไหนหรือไม่?
- ไม่เลย เครื่องมือนี้ประมวลผลทั้งหมดที่ฝั่งไคลเอนต์ (บนเบราว์เซอร์ของคุณ) โค้ด HTML/CSS จะไม่มีทางถูกบันทึกหรือส่งไปยังเซิร์ฟเวอร์ใดๆ ทั้งสิ้น
- Q.เมื่อไหร่ที่ควรใช้ Media Query และเมื่อไหร่ที่ควรใช้ Container Query?
- ควรใช้ media query สำหรับโครงร่างโดยรวมของหน้า (เช่น ส่วนหัว, แถบด้านข้าง) และใช้ container query สำหรับองค์ประกอบ UI ย่อย (เช่น การ์ด, ปุ่ม, วิดเจ็ต) เพื่อให้มันปรับขนาดตามคอนเทนเนอร์ที่ครอบมันไว้โดยอัตโนมัติ
- Q.เบราว์เซอร์ไหนบ้างที่รองรับ?
- ตั้งแต่กลางปี 2023 เบราว์เซอร์สมัยใหม่ทั้งหมด (Chrome 105+, Safari 16+, Firefox 110+) รองรับอย่างเต็มรูปแบบ หากใช้กับรุ่นเก่า คุณอาจต้องมีระบบการทำงานแบบ fallback
- Q.มีข้อควรระวังอะไรไหมเวลาใช้ container-type: size?
- เมื่อใช้ size เบราว์เซอร์จะนำ containment ไปใช้กับความสูงด้วย หากคุณไม่ได้กำหนดความสูงไว้ องค์ประกอบจะยุบลงเหลือ 0 แนะนำให้ใช้ inline-size เป็นหลักเว้นแต่คุณจะจำเป็นต้องใช้จริง ๆ
- Q.การแสดงตัวอย่าง HTML แบบกำหนดเองแยกออกจากกันอย่างไรเพื่อป้องกันไม่ให้โค้ดพัง?
- เราใช้เทคนิค Shadow DOM เพื่อแยกพื้นที่แสดงตัวอย่างออกโดยสมบูรณ์ ทำให้มั่นใจได้ว่า CSS ของเว็บไซต์หลักจะไม่รบกวนหรือทำให้หน้าต่างแสดงตัวอย่างพัง
กรณีการใช้งานจริง
คอมโพเนนต์การ์ดที่นำมาใช้ซ้ำได้
เหมาะอย่างยิ่งสำหรับการออกแบบการ์ด UI ที่เป็นอิสระ สามารถปรับรูปแบบได้อย่างราบรื่นไม่ว่าจะอยู่ในพื้นที่หลักแบบ 3 คอลัมน์ หรือในแถบด้านข้างแบบ 1 คอลัมน์
การผสานรวม CMS และวิดเจ็ต
สร้างบล็อกแบบกำหนดเองสำหรับแพลตฟอร์มอย่าง WordPress ที่สามารถปรับเค้าโครงได้อัตโนมัติโดยไม่ต้องคำนึงว่าวิดเจ็ตจะอยู่ในพื้นที่กว้างหรือแคบ
UI แดชบอร์ดที่ซับซ้อน
สมบูรณ์แบบมากในการจัดวางแผนภูมิและสถิติให้เหมาะสมและยืดหยุ่นภายในแดชบอร์ดที่สามารถปรับขนาดได้
การปรับปรุงโค้ดแบบเก่า
ใช้ตัวแปลงเพื่อเปลี่ยน media query เดิมที่มีความซับซ้อนให้เป็น container query ที่สะอาด อ่านง่าย และบำรุงรักษาได้ง่ายในระดับคอมโพเนนต์
เอกสารทางเทคนิค CSS Container Query
CSS Container Queries เป็นการใช้คำสั่ง @container ควบคู่กับคุณสมบัติ container-type ซึ่งถือเป็นการก้าวกระโดดจาก Media Query แบบเดิมไปสู่อีกระดับ
ความแตกต่างระหว่าง @container และ @media
Media query (@media) จะเปลี่ยนสไตล์เฉพาะเมื่อหน้าจอรวม (viewport) เปลี่ยนขนาด Container query (@container) จะมีความยืดหยุ่นมากกว่า เพราะขึ้นอยู่กับขนาดของคอนเทนเนอร์ที่ครอบอยู่ (parent container) เท่านั้น ดังนั้นเมื่อคุณออกแบบการ์ดสักใบ ไม่ว่าจะอยู่บนส่วนเนื้อหาหลัก หรือซุกใน Sidebar เล็กๆ รูปแบบจะถูกปรับให้เข้ากันเสมอ ไม่ต้องแยกเขียน CSS 2 รูปแบบเหมือนอดีตอีกต่อไป
ค่าต่างๆ ของ container-type
inline-size คือตัวเลือกยอดนิยม เน้นปรับให้เข้ากับขนาดแนวนอน (ความกว้าง) ส่วน size จะจัดการทั้งแนวตั้งและแนวนอน แต่ต้องตั้งความสูงของคอนเทนเนอร์อย่างชัดเจนด้วย ส่วน normal (ค่าเริ่มต้น) หมายความว่าองค์ประกอบนั้นจะไม่เป็นคอนเทนเนอร์
ความเข้ากันได้ของเบราว์เซอร์
รองรับได้ราบรื่นบน Chrome 105+, Safari 16+, Firefox 110+, และ Edge 105+ กล่าวคือ หากผู้ใช้ใช้อุปกรณ์รุ่นตั้งแต่ปี 2023 เป็นต้นมาก็ไม่ต้องกังวล ส่วนเบราว์เซอร์รุ่นเก่าที่ยังไม่รองรับ มันจะทำการเพิกเฉยคำสั่ง @container แต่จะไม่ทำให้เว็บไซต์พังแต่อย่างใด (การพัฒนาแบบก้าวหน้า)
ส่งความคิดเห็น
โปรดแจ้งให้เราทราบความคิดเห็นของคุณเพื่อช่วยปรับปรุงเครื่องมือ
การส่งความคิดเห็นถูกระงับชั่วคราว
เซิร์ฟเวอร์ไม่ว่างหรือระบบป้องกันสแปมทำงานอยู่ โปรดลองอีกครั้งในภายหลัง