AI

Css Container Queries Guide

📅 2026-02-09 | โดย อ.บอม กิตติทัศน์ เจริญพนาสิทธิ์ — SiamCafe.net Since 1997

CSS Container Queries Guide คืออะไร / ทำไมถึงสำคัญ

น้องๆ เคยเจอปัญหาไหม เวลาทำเว็บแล้ว Responsive Design มันไม่สะใจ คืออยากจะปรับแต่ง component บางตัวให้มันฉลาดขึ้นตามขนาดของ container ที่มันอยู่ ไม่ใช่แค่ตามขนาดของ viewport ทั้งหน้าจออย่างเดียว?

Container Queries นี่แหละคือคำตอบ! สมัยผมทำร้านเน็ต SiamCafe นะ (ย้อนไปเมื่อนานมาแล้ว ฮ่าๆ) ตอนนั้น responsive design ยังไม่บูมขนาดนี้ แต่ถ้ามี Container Queries ตั้งแต่ตอนนั้นนะ เว็บ SiamCafe Blog คงจะสวยล้ำกว่านี้เยอะเลย (แอบโปรโมท SiamCafe Blog ซะหน่อย)

ง่ายๆ เลย Container Queries คือการที่เราสามารถเขียน CSS ให้ element เปลี่ยนแปลงรูปร่างหน้าตาตามขนาดของ container ที่มันอยู่ได้ เหมือนเราสั่งให้มัน "เฮ้ย! ถ้า container แกกว้างเกิน 500px นะ เปลี่ยน layout เป็นแบบนี้" อะไรประมาณนั้น

ทำไมมันถึงสำคัญน่ะเหรอ? ก็เพราะมันทำให้ component ของเรามันฉลาดขึ้นไง! ไม่ว่ามันจะไปอยู่ใน layout แบบไหน มันก็ปรับตัวให้เข้ากับสถานการณ์ได้หมด ทำให้เราไม่ต้องเขียน CSS เยอะแยะมากมายเพื่อรองรับทุกขนาดหน้าจออีกต่อไป

พื้นฐานที่ต้องรู้

Viewport คืออะไร?

Viewport ก็คือพื้นที่แสดงผลของเบราว์เซอร์ที่เรามองเห็นนั่นแหละครับ น้องๆ ลองนึกภาพหน้าต่างของเบราว์เซอร์ที่เราใช้กันอยู่ทุกวัน นั่นแหละคือ viewport เวลาเราเขียน CSS โดยปกติ เรามักจะอ้างอิงขนาดของ viewport เป็นหลัก เช่น @media (max-width: 768px) { ... } หมายถึง ถ้า viewport กว้างไม่เกิน 768px ให้ใช้ CSS ชุดนี้

Container คืออะไร?

Container ในที่นี้หมายถึง element HTML ตัวไหนก็ได้ที่เรากำหนดให้มันเป็น "container" สำหรับ Container Queries พูดง่ายๆ คือ เราบอกว่า "เฮ้ย element ตัวนี้นะ เป็นตัวควบคุมขนาดของ element ลูกๆ ที่อยู่ข้างใน" จากนั้นเราก็เขียน CSS โดยอ้างอิงขนาดของ container ตัวนี้ได้เลย

container-type Property

หัวใจสำคัญของการใช้ Container Queries ก็คือการกำหนด container-type ให้กับ element ที่เราต้องการให้เป็น container นี่แหละครับ Property ตัวนี้มีค่าให้เลือก 2 แบบหลักๆ คือ

• size: หมายถึง container จะสนใจทั้งความกว้างและความสูงในการกำหนดเงื่อนไข
• inline-size: หมายถึง container จะสนใจแค่ความกว้าง (inline dimension) ในการกำหนดเงื่อนไข

ส่วนใหญ่เราจะใช้ inline-size เพราะเว็บส่วนใหญ่มักจะปรับ layout ตามความกว้างเป็นหลักครับ

วิธีใช้งาน / เริ่มต้นยังไง

เอาล่ะ! มาถึงส่วนที่สำคัญที่สุดแล้ว นั่นคือการใช้งาน Container Queries จริงๆ ผมจะเล่าจากประสบการณ์ตรงที่เคยเจอมา สมัยก่อนตอนทำ SiamCafe.net (อีกแล้ว ฮ่าๆ) ถ้ามี Container Queries ชีวิตคงง่ายขึ้นเยอะ

เริ่มจาก HTML ก่อนเลย สมมติว่าเรามี component ที่ชื่อว่า card ซึ่งเราอยากให้มันปรับ layout ตามขนาดของ container ที่มันอยู่

<div >
  <div >
    <img src="image.jpg" alt="Card Image">
    <h3>Card Title</h3>
    <p>Card Description</p>
  </div>
</div>

จากนั้นเราก็ต้องกำหนด container-type ให้กับ .container

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

ขั้นตอนปฏิบัติจริง

กำหนด Container

อย่างที่บอกไปแล้ว ขั้นตอนแรกคือการกำหนด container-type ให้กับ element ที่เราต้องการให้เป็น container

.container {
  container-type: inline-size; /* หรือ size ก็ได้ ถ้าต้องการ */
}

เขียน Container Query

ทีนี้เราก็มาเขียน Container Query กันเลย วิธีการเขียนจะคล้ายๆ กับ Media Queries แต่เราจะใช้ @container แทน @media

@container (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }

  .card img {
    width: 50%;
  }

  .card h3, .card p {
    width: 50%;
  }
}

Code นี้หมายความว่า ถ้า .container มีความกว้างอย่างน้อย 400px ให้ .card เปลี่ยนเป็น display: flex และจัด layout เป็นแนวนอน

ตั้งชื่อ Container (Optional)

ถ้าเรามี container หลายตัว และต้องการระบุ container ที่เราต้องการอ้างอิงให้ชัดเจน เราสามารถตั้งชื่อให้กับ container ได้ด้วย container-name

.container {
  container-type: inline-size;
  container-name: my-container;
}

@container my-container (min-width: 400px) {
  /* CSS rules */
}

การตั้งชื่อ container จะมีประโยชน์มากในกรณีที่เรามี nested container หรือ container ซ้อนกันหลายชั้น

เปรียบเทียบกับทางเลือกอื่น

แน่นอนว่า Container Queries ไม่ใช่ทางออกเดียวในการทำ Responsive Design แต่ผมว่ามันเป็นทางเลือกที่ดีมากๆ ทางเลือกหนึ่ง ลองมาดูตารางเปรียบเทียบกับทางเลือกอื่นๆ กัน

Feature	Media Queries	Container Queries
อ้างอิงขนาด	Viewport	Container
ความยืดหยุ่น	จำกัด	สูง
ความซับซ้อน	น้อย	ปานกลาง
Browser Support	ดีมาก	ดี (แต่ต้องเช็คก่อนใช้)
เหมาะกับ	Layout ทั้งหน้า	Component ที่ต้องการปรับตัว

สรุปคือ Media Queries เหมาะกับการปรับ layout ทั้งหน้าจอ แต่ Container Queries เหมาะกับการปรับ component ให้เข้ากับ container ที่มันอยู่

อีกทางเลือกหนึ่งที่น่าสนใจคือ CSS Custom Properties (หรือ CSS Variables) ซึ่งเราสามารถใช้ร่วมกับ Media Queries เพื่อสร้างความยืดหยุ่นให้กับ CSS ของเราได้มากขึ้น แต่ Container Queries จะช่วยให้เราเขียน CSS ได้สะอาดและเข้าใจง่ายกว่า

สุดท้ายนี้ อยากจะฝากถึงน้องๆ ที่สนใจเรื่อง Web Development ว่าอย่าหยุดเรียนรู้เทคโนโลยีใหม่ๆ นะครับ โลกมันเปลี่ยนไปเร็วมาก สมัยผมทำร้านเน็ต SiamCafe (SiamCafe Blog อีกรอบ ฮ่าๆ) เทคโนโลยีมันไม่ได้ก้าวกระโดดขนาดนี้ แต่ตอนนี้ทุกอย่างมันเร็วมากจริงๆ

Best Practices / เคล็ดลับจากประสบการณ์

เอาล่ะน้องๆ หลังจากที่เรารู้จัก Container Queries (CQ) กันไปพอสมควรแล้ว คราวนี้มาถึงช่วงที่พี่จะแชร์ประสบการณ์จริงที่เจ็บจริง สมัยก่อนทำร้านเน็ต SiamCafe นี่แหละ เรื่อง CSS นี่สำคัญนะ เพราะหน้าเว็บร้านต้องโหลดไว สวยด้วย!

จำไว้เลยว่า CQ ไม่ใช่ยาวิเศษที่จะแก้ปัญหา responsiveness ทั้งหมด การเลือกใช้ CQ หรือ Media Queries (MQ) ขึ้นอยู่กับสถานการณ์จริงๆ

MQ: เหมาะกับ Layout ที่เปลี่ยนไปตามขนาดหน้าจอภาพรวม (เช่น เปลี่ยนจาก 3 คอลัมน์เป็น 1 คอลัมน์บนมือถือ)

CQ: เหมาะกับ Component ที่ต้องการปรับตัวตามขนาดของ Container ที่มันอยู่ (เช่น Card ที่อยู่ใน Sidebar vs. Card ที่อยู่ใน Content หลัก)

3-4 เทคนิคที่ใช้ได้จริง

1. เริ่มจาก Component ที่เล็กที่สุด

สมัยก่อนเวลาทำเว็บ พี่จะเริ่มจาก Component ที่เล็กที่สุดก่อนเสมอ เช่น ปุ่ม, Text Input, Card เล็กๆ เพราะ Component พวกนี้แหละที่เราจะเอาไปใช้ซ้ำๆ ในหลายๆ ที่ การทำ CQ กับ Component เล็กๆ จะช่วยให้เราจัดการง่ายขึ้น

.card {
  container-type: inline-size; /* กำหนดให้ .card เป็น Container */
}

.card h2 {
  font-size: 1.2rem;
}

@container (min-width: 300px) {
  .card h2 {
    font-size: 1.5rem; /* ปรับขนาด font เมื่อ Container กว้าง 300px ขึ้นไป */
  }
}

2. ใช้ Custom Properties (CSS Variables)

Custom Properties นี่แหละตัวช่วยชีวิต! มันช่วยให้เรากำหนดค่าต่างๆ ในที่เดียวแล้วเอาไปใช้ได้ทั่วเว็บ แถมยังใช้กับ CQ ได้ด้วยนะ

:root {
  --card-padding: 1rem;
}

.card {
  container-type: inline-size;
  padding: var(--card-padding);
}

@container (min-width: 400px) {
  :root {
    --card-padding: 2rem; /* เปลี่ยนค่า padding เมื่อ Container กว้าง 400px ขึ้นไป */
  }
}

3. อย่าลืมเรื่อง Specificity!

Specificity คือความสำคัญของ CSS Rule ต่างๆ CQ ก็มี Specificity ของมันเอง ดังนั้นต้องระวังเรื่องลำดับการเขียน CSS ให้ดี ไม่งั้น CQ อาจจะไม่ทำงานอย่างที่คิด

ถ้า CQ ไม่ทำงาน ลองเช็คดูว่า Rule อื่นๆ ที่มี Specificity สูงกว่ามัน Override ค่าอยู่รึเปล่า

4. DevTools คือเพื่อนที่ดีที่สุด

สมัยนี้ Browser DevTools เก่งขึ้นเยอะ! มันช่วยให้เรา Debug CQ ได้ง่ายขึ้นเยอะ ลองใช้ DevTools Inspect Element ดู แล้วเช็คดูว่า Container Query ทำงานถูกต้องไหม มี Rule อะไร Override อยู่รึเปล่า

อีกอย่างคือลองปรับขนาด Container ใน DevTools ดูเลย จะเห็นผลลัพธ์แบบ Real-time เลยล่ะ

FAQ คำถามที่พบบ่อย

Container Queries กับ Media Queries ต่างกันยังไง?

ง่ายๆ เลย MQ สนใจขนาดหน้าจอ โดยรวม แต่ CQ สนใจขนาดของ Container ที่มันอยู่

Browser ไหน Support Container Queries บ้าง?

Browser หลักๆ Support หมดแล้วน้อง Chrome, Firefox, Safari ใช้ได้หมด แต่ IE นี่ลืมไปได้เลยนะ (สมัยร้านเน็ต SiamCafe นี่ IE ครองเมืองเลยนะ)

Container Queries ทำให้เว็บโหลดช้าลงไหม?

ถ้าใช้ไม่ระวังก็มีสิทธิ์นะ แต่ถ้าเขียน CSS ดีๆ ใช้ Custom Properties ช่วย และ Optimize Code ให้ดี CQ ไม่ได้ทำให้เว็บโหลดช้าลงอย่างมีนัยสำคัญหรอก

Container Queries ใช้กับ JavaScript ได้ไหม?

ได้สิ! เราสามารถใช้ JavaScript ร่วมกับ CQ ได้ เพื่อทำอะไรที่ซับซ้อนกว่านั้น เช่น เปลี่ยน Class ของ Element ตามขนาด Container

สรุป

Container Queries คือเครื่องมือที่ทรงพลังมากๆ ในการสร้าง Responsive Web Design ที่ยืดหยุ่น แต่ก็ต้องใช้ให้ถูกที่ถูกเวลา อย่าลืมว่ามันไม่ใช่ยาวิเศษที่จะแก้ปัญหาทุกอย่างได้ และที่สำคัญที่สุดคือ ฝึกฝน บ่อยๆ แล้วน้องๆ จะเก่งขึ้นแน่นอน!

อย่าลืมแวะไปอ่านบทความอื่นๆ ได้ที่ SiamCafe Blog นะ แล้วถ้าสนใจเรื่อง Forex ลองดู iCafeForex ด้วยนะน้อง!