1. Vấn đề với Media Queries truyền thống

Media Queries chỉ phản ứng theo kích thước viewport. Điều này hoạt động tốt với layout toàn cục, nhưng trở nên bất tiện khi xây dựng component có thể tái sử dụng trong nhiều ngữ cảnh khác nhau.

Ví dụ: Một card hiển thị tốt ở độ rộng 400px khi nằm trong layout chính, nhưng sẽ vỡ layout nếu nhúng vào sidebar nhỏ hơn 300px.

2. Container Queries là gì?

Container Queries cho phép bạn áp dụng CSS dựa trên kích thước của *container cha* thay vì *viewport*. Tức là, một component có thể thay đổi giao diện dựa theo nơi nó được đặt.

/* Bật container cho phần tử cha */
.container {
  container-type: inline-size;
  container-name: card-container;
}

/* Áp dụng style khi phần tử cha có width >= 500px */
@container card-container (min-width: 500px) {
  .card {
    flex-direction: row;
  }
}

3. Khi nào nên dùng Container Queries?

• Component nhúng trong nhiều layout (sidebar, nội dung chính…)
• Giao diện module trong editor hoặc builder
• Thiết kế reusable UI không phụ thuộc viewport

4. Một ví dụ thực tế

Giả sử bạn có một thẻ .profile trong các layout khác nhau. Với Container Queries, bạn có thể thay đổi layout của nó tùy theo kích thước phần tử cha:

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

@container (min-width: 600px) {
  .profile {
    display: flex;
    flex-direction: row;
    gap: 16px;
  }
}

@container (max-width: 599px) {
  .profile {
    display: block;
  }
}

5. Trình duyệt nào đã hỗ trợ?

Theo tính đến năm 2024–2025, hầu hết các trình duyệt hiện đại như Chrome, Edge, Safari, Firefox đều đã hỗ trợ Container Queries, ngoại trừ một vài trình duyệt cũ hoặc di động quá cũ.

6. Những lưu ý khi triển khai

• Chỉ hoạt động với phần tử có container-type được khai báo
• Không thay thế hoàn toàn media queries, mà bổ sung để component thông minh hơn
• Không áp dụng cho kích thước chiều cao (height) ở hầu hết trình duyệt hiện tại

Kết luận

Container Queries mang lại khả năng tái sử dụng component thực sự, linh hoạt theo ngữ cảnh – điều mà Media Queries không thể làm được. Nếu bạn đang xây dựng giao diện theo hướng modular hoặc component-based (như với React, Vue, hoặc cả giao diện thuần HTML), thì đây là công cụ cực kỳ đáng học và ứng dụng.