CSS Container Query Generator: สร้าง CSS ที่ปรับตาม Component แบบ Real-time

สิบกว่าปีที่ผ่านมา "responsive design" แปลว่าอย่างเดียวคือ media query — เขียน @media (min-width: 768px) แล้วภาวนาให้ component ของเราไปอยู่ในที่ที่ควรจะเป็น แต่ความจริงคือ component ไม่ได้อยู่โดด ๆ ในหน้าเปล่า card ตัวเดิมอาจถูกวางไว้ใน sidebar แคบ ๆ ในคอลัมน์กลางที่กว้าง หรือใน grid cell — ทั้งหมดนี้อยู่ในหน้าเดียวกัน ที่ viewport width เดียวกัน media query แบบเก่ามองไม่เห็นสิ่งเหล่านี้เลย

Container query แก้ปัญหานี้ตรงจุด แทนที่จะถามว่า "หน้าต่าง browser กว้างเท่าไหร่?" มันถามว่า "กล่องที่ฉันอยู่ข้างในกว้างเท่าไหร่?" แล้วจัด style ให้ component ตามนั้น หลังจากขึ้น Baseline เมื่อปี 2023 ด้วย browser support ราว 96% มันกลายเป็นหนึ่งในฟีเจอร์ CSS ที่ใช้งานได้จริงที่สุดในยุคนี้

แต่การเขียน syntax เองก็ยังเหนื่อยอยู่ — ต้องจัด container-type อาจต้องมี container-name แล้วก็ตัว @container rule เอง แถมนึกภาพยากถ้าไม่ได้เห็น component ปรับตัวจริง ๆ CSS Container Query Generator ถูกสร้างมาเพื่อจุดนี้เป๊ะ ๆ — ตั้งค่า container และ query ผ่าน control ที่เข้าใจง่าย ดู live preview ปรับตัวตอนลาก resize แล้วก็อป CSS ที่พร้อมใช้งานได้เลย ทำงาน client-side 100% ไม่มีอะไรออกจากเครื่องคุณ

ทำไมต้องใช้ CSS Container Query Generator?

• Responsive แบบ component-driven — จัด style ตามความกว้างของ container ไม่ใช่ viewport card ตัวเดียวแสดงผลถูกต้องทั้งใน sidebar 300px และคอลัมน์หลัก 900px โดยไม่ต้องเขียน JavaScript วัดความกว้างเองเลย
• Live preview พร้อม preset จริง — สลับดู container ขนาด Mobile (360px), Tablet (768px), Desktop (1200px) หรือจะ resize อิสระก็ได้ แล้วดู component render ใหม่แบบ real-time ไม่ต้องไปยุ่งกับ browser dev tools
• รองรับ named container — สร้าง container-name: card แล้วเรียกจงใจ ๆ ด้วย @container card (min-width: 480px) ซึ่งจำเป็นมากทันทีที่ layout มี container มากกว่าหนึ่งตัว
• Output ทั้ง shorthand และ longhand — ได้ทั้งแบบกระชับ container: 480px / inline-size หรือแบบระบุชัด container-type + container-name เลือกตาม style guide ของทีม
• หน่วยยืดหยุ่น ไม่ได้มีแค่ pixel — ตั้ง min/max width เป็น px, rem, em, vw หรือ % และรวมเงื่อนไข min-width กับ max-width ด้วย and สำหรับ range query ได้
• Copy ได้เลย และเป็นส่วนตัว — คลิกเดียว copy CSS ขึ้น clipboard ทุกอย่างทำงานในเครื่องคุณ style ของคุณไม่เคยถูกส่งออกไปไหน

ฟีเจอร์เด่น

ขอเจาะลึกสองจุดนี้. Query builder สะท้อนวิธีทำงานจริงของ design system — ทีมส่วนใหญ่กำหนด breakpoint ที่ระดับ component (variant sm, md, lg ของ card) การรวม (min-width: 480px) and (max-width: 800px) ให้ rule แบบ "medium เท่านั้น" ที่สะอาดกว่าการ stack media-query ซ้อนกัน

ส่วน live preview คือฟีเจอร์ที่คนใช้แล้วติดที่สุด container query วาดภาพในหัวยากเพราะ trigger ของมันมองไม่เห็น — คุณลากหน้าต่าง browser ได้ แต่ลาก "ความกว้างของ container" ตรง ๆ ไม่ได้ preview ทำให้ abstraction นี้จับต้องได้ — ลาก handle แล้วดู card พลิกจากแนวตั้งเป็นแนวนอนตรง threshold ที่คุณเลือกไว้เป๊ะ ๆ

วิธีใช้งาน

1. เปิด CSS Container Query Generator — ไม่ต้องสมัคร ไม่ต้องติดตั้งอะไร
2. เลือก container type (inline-size เป็นค่าเริ่มต้นที่ถูกต้องสำหรับ query แบบ width) และเปิดใช้ container name เช่น card ถ้าต้องการ
3. ตั้ง sizing constraints — min หรือ max width พร้อมหน่วยที่ต้องการ — เพื่อสร้าง declaration container ฝั่ง parent
4. สร้าง @container query: ตั้ง (min-width: …) เพิ่ม (max-width: …) ถ้าต้องการ range แล้วกดสลับ preset Mobile / Tablet / Desktop ดู preview ตอบสนอง
5. กด Copy CSS แล้วนำ rule ไปวางใน stylesheet — ทั้ง declaration ฝั่ง parent และบล็อก @container ออกมาพร้อมกัน พร้อม ship ทันที

เข้าใจ Container Queries

Media query แบบ viewport vs. container query

Media query ฟัง viewport ส่วน container query ฟัง ancestor element ที่ถูกกำหนดไว้ — หรือเรียกว่า containment context ความต่างเพียงจุดเดียวนี้เปลี่ยนทุกอย่างสำหรับ component ที่ต้อง reuse ได้:

/* โลกเก่า: ขึ้นกับว่าหน้าถูกเปิดที่ไหน */
@media (min-width: 768px) {
  .card {
    display: grid;
    grid-template-columns: 2;
  }
}

/* โลกใหม่: ขึ้นกับพื้นที่ที่ card มีจริง ๆ */
.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 480px) {
  .card {
    display: grid;
    grid-template-columns: 2;
  }
}

Card เดียวกัน เลข breakpoint เดียวกัน — แต่เวอร์ชันที่สองถูกต้องในทุกช่องทุกหน้า เพราะมันตอบสนองต่อความกว้างที่มีจริง

inline-size, size และ normal

container-type: inline-size สร้าง containment context บนแกน inline (คือความกว้าง ใน writing mode แนวนอน) เป็นตัวที่คุณต้องการ 95% ของเวลา และปลอดภัย — element ยังคงขยายตามปกติบนแกน block ส่วน container-type: size ครอบทั้งสองแกน ทรงพลังสำหรับ component ที่ล็อก aspect ratio แต่เข้มงวดกว่า เพราะ element จะไม่หาความสูงจาก content อีกต่อไป ส่วน normal ปิดการ query ได้ ใช้กรณีที่อยากให้ element ตัวไหนไม่เข้าร่วม

ชื่อ container และ shorthand container

เมื่อ layout มีหลาย container การตั้งชื่อช่วยแยกแยะได้ชัดเจน:

.sidebar {
  container: sidebar / inline-size;
}
@container sidebar (min-width: 400px) {
  /* … */
}

Shorthand container รวมชื่อ ความยาว และ type ไว้ใน declaration เดียว — container: card / inline-size — และ generator จะ output ตามรูปแบบที่คุณตั้งค่าไว้ กฎง่าย ๆ คือ: ใน design system ให้ตั้งชื่อ container ทุกตัว เพราะ "container ที่ใกล้ที่สุด" จะกลายเป็นเรื่องกำกวมทันทีที่ layout เริ่มซับซ้อน

Browser support

Container query เป็น Baseline 2023 รองรับราว 96% ของ browser ทั่วโลก — Chrome 105+, Safari 16+, Firefox 110+, Edge 105+ โดยส่วนใหญ่ใช้ตรง ๆ ได้เลย ส่วน tail ที่เหลือ ให้ห่อ layout สำคัญด้วย @supports (container-type: inline-size) พร้อม fallback เป็น media query

ตัวอย่างการใช้งานจริง

Card ใน design system

เคสคลาสสิก — product card หน้าตาเริตอนเต็มความกว้าง แต่แน่นเอี๊ยดที่ 280px ด้วย container query บน wrapper ของ card component เดียว ship ได้สาม variant — แนวตั้ง สองคอลัมน์ และแบบ feature — design system จะไม่ต้อง clone "sidebar-card-v2" อีกต่อไป

.product-card {
  container-type: inline-size;
}

@container (min-width: 480px) {
  .product-card__inner {
    display: grid;
    grid-template-columns: 120px 1fr;
  }
}

Layout แบบ sidebar / main

Widget ตัวเดียวที่ถูกหย่อนลงใน sidebar 320px และพื้นที่หลัก 720px ต้องการการจัดการที่ต่างกัน ที่ viewport width เดียวกัน — ซึ่ง media query โครงสร้างของมันไม่สามารถ express ได้เลย container query ทำได้ตามธรรมชาติ และนี่คือเหตุผลที่มันเข้าคู่กับ CSS Grid Generator สำหรับ layout ชั้นนอกแน่นอน

Content ใน CMS และ page builder

คนเขียน content ฝัง component ลงในช่องไหนก็ได้ — คอลัมน์ hero, accordion, footer คุณไม่มีทางรู้ viewport context แต่ component รู้จัก container ของตัวเองได้ container query ทำให้ embed เดียวกันปรับตัวสวยงามทุกที่ — ชนะด้าน maintainability จริงจังสำหรับ platform ที่คนเขียน content เป็นคนคุม layout ไม่ใช่ developer

Product grid ร้านค้าออนไลน์

ยิ่ง grid มีหลายคอลัมน์ track ยิ่งแคบ ความกว้างที่ card ได้รับจึงขึ้นกับขนาดจอ บวก จำนวนคอลัมน์ บวก gutter — การ query grid cell (ซึ่งเป็น container) แทนที่จะ query หน้าเว็บ ทำให้ card อ่านง่ายในทุก combination — ปุ่ม "ใส่ตะกร้า" ไม่โดนบีบ แปลงดีขึ้นตาม

Best Practices

• เริ่มด้วย inline-size เสมอ — ค่อยหยิบ size เมื่อจำเป็นจริง ๆ กับแกน block และอย่าลืมว่า size ทำให้ element ไม่ขยายตาม content
• ตั้งชื่อ container ทุกตัวใน design system — @container card (…) อยู่รอดจากการ refactor layout ได้ดีกว่า anonymous nearest-container query มาก
• เลือก breakpoint จาก content ไม่ใช่จาก device — ลาก live preview จนกว่า component จะพังจริง ๆ ตรงนั้นแหละคือ breakpoint ของคุณ ไม่ใช่ 768px ตามความเคยชิน
• ใช้ rem/em ในเงื่อนไข — เคารพ font-size ที่ user ตั้ง ทำให้ layout เข้าถึงได้ดีขึ้น ใช้คู่กับ CSS Clamp Generator สำหรับ typography แบบ fluid ได้ลงตัว
• วาง container บน wrapper ไม่ใช่ root ของ component — wrapper เป็นคนสร้าง context ส่วน component ข้างในยังพกไปวางที่ไหนก็ได้
• มี media-query fallback ระหว่างเปลี่ยนผ่าน — @supports (container-type: inline-size) เป็นเกราะป้องกัน 4% ของ browser ที่ยังไม่รองรับ

เริ่มเขียน CSS แบบ Component-First กันเถอะ

Container query ปิดช่องว่างระหว่างวิธีที่เรา design component (มีตัวตนในตัวเอง ไม่ผูกกับช่องวาง) กับวิธีที่เราเคย style มัน (ผูกกับ viewport ผูกกับหน้าเว็บ) syntax มีไม่กี่บรรทัด support มาถึงแล้ว และผลลัพธ์ — component ที่หน้าตาถูกต้องทุกที่ที่ถูกวาง — เห็นได้ทันที

เปิด CSS Container Query Generator ลาก preview ซ้ายขวาสักรอบ แล้วก็อป @container rule แรกของคุณภายในหนึ่งนาที ไม่ต้องมี account ไม่ต้อง upload ไม่มีค่าใช้จ่าย

เครื่องมือที่เกี่ยวข้อง

• CSS Media Query Generator — สำหรับ breakpoint ระดับหน้าเว็บที่ container แทนที่ไม่ได้
• CSS Clamp Generator — ค่า fluid โดยไม่ต้องมี breakpoint เลย
• CSS Grid Generator — ระบบ layout ที่เข้าคู่กับ container โดยธรรมชาติ

ขอให้สนุกกับการเขียน CSS!