CSS Container Queries (@container): CSS nhận biết thành phần vào năm 2026

Trong gần một thập kỷ, thiết kế web đáp ứng (responsive web design) chỉ dựa vào Media Queries (@media). Mặc dù mang tính cách mạng vào thời điểm đó, media queries có một lỗ hổng cơ bản trong kỷ nguyên kiến trúc dựa trên component (React, Vue, Web Components): chúng chỉ biết về viewport.

Khi bạn xây dựng một component <Card> có thể tái sử dụng, bạn muốn nó trông đẹp mắt dù được đặt trong một khu vực nội dung chính rộng hay bị ép vào một thanh bên hẹp. Sử dụng media queries, thẻ chỉ có thể phản ứng với kích thước của cửa sổ trình duyệt, chứ không phải kích thước của container cha thực tế của nó. Điều này buộc các nhà phát triển phải viết các kiến trúc CSS phức tạp (như BEM modifiers: .card--sidebar) để điều chỉnh kiểu dáng thủ công dựa trên vị trí.

Giờ đây có CSS Container Queries (@container). Vào năm 2026, với sự hỗ trợ trình duyệt phổ biến trên tất cả các công cụ kết xuất hiện đại, Container Queries cho phép các component truy vấn trực tiếp kích thước của container cha của chúng và tự điều chỉnh cho phù hợp.

Demo Trực tiếp Tương tác: Thẻ Tự Điều Chỉnh

Hãy thử kéo thanh trượt Container Width bên dưới. Hãy chú ý cách thẻ tự động chuyển đổi từ bố cục dọc xếp chồng sang bố cục phương tiện ngang ngay khi container cha của nó vượt qua 420px — hoàn toàn độc lập với màn hình hoặc chiều rộng trình duyệt thực tế của bạn!

Cách hoạt động của Container Queries

Việc triển khai bao gồm hai bước đơn giản:

1. Xác định một phần tử là container thông qua container-type.
2. Cho phép các phần tử con truy vấn container đó thông qua @container.

1. Xác định ngữ cảnh Container

Để thiết lập một ranh giới chứa, áp dụng thuộc tính container-type cho phần tử bao bọc:

.card-grid {
  /* This element is now a queryable container */
  container-type: inline-size;
  container-name: card-wrapper; /* Optional name identifier */
}

• inline-size: Truy vấn chiều rộng dọc theo trục chế độ viết (phổ biến nhất).
• size: Truy vấn cả chiều rộng và chiều cao.
• normal: Trạng thái mặc định (không phải là container).

Bạn cũng có thể sử dụng cú pháp viết tắt: container: card-wrapper / inline-size;

Đơn vị Container Query (cqi, cqw, cqh)

Giống như các đơn vị viewport đã cho chúng ta vw và vh, Container Queries giới thiệu các đơn vị tương đối gắn trực tiếp với kích thước hộp được tính toán của container:

• cqi: 1% kích thước nội tuyến của container truy vấn (thường là chiều rộng).
• cqb: 1% kích thước khối của container truy vấn (thường là chiều cao).
• cqmin / cqmax: Giá trị nhỏ hơn hoặc lớn hơn của cqi so với cqb.

Các đơn vị này mở khóa kiểu chữ và khoảng cách linh hoạt tự động điều chỉnh mượt mà bên trong bất kỳ thanh bên hoặc widget nào.

Demo Kiểu chữ Linh hoạt Trực tiếp:

Ví dụ thực tế: Một Component Đăng ký nhận bản tin phổ quát

Hãy tưởng tượng một widget đăng ký nhận bản tin mà bạn muốn đặt vào ba vị trí khác nhau:

1. Bên trong một thanh bên blog hẹp (chiều rộng ~280px)
2. Nằm trong nội dung bài đăng blog (chiều rộng ~500px)
3. Trải dài toàn bộ chân trang web (chiều rộng ~900px)

Với media queries, bạn sẽ cần các lớp riêng biệt như .newsletter--sidebar và .newsletter--footer. Với container queries, component tự xử lý các chuyển đổi bố cục bên trong:

Bạn cũng có thể thích

• Tailwind CSS v4: Có gì mới và cách nâng cấp
• Hoạt ảnh CSS hiện đại: Chuyển đổi GPU hiệu suất cao
• CSS Grid vs Flexbox: Hướng dẫn quyết định trực quan tương tác (2026)
• Dịch vụ kiểm thử hồi quy trực quan tự động vào năm 2026

Câu hỏi thường gặp

Kết luận

Container Queries đại diện cho sự thay đổi mô hình lớn nhất trong CSS kể từ Flexbox và CSS Grid. Bằng cách chuyển logic đáp ứng từ viewport toàn cầu sang các ranh giới component cục bộ, bạn xây dựng các hệ thống thiết kế UI thực sự mô-đun, cắm và chạy.