Bạn đã bao giờ thiết kế một component card, test trên desktop thì đẹp nhưng nhét vào sidebar hẹp lại vỡ tung? Bạn phải viết media query cho từng vị trí xuất hiện, rồi component trở thành mớ code khó quản lý. Đó chính là vấn đề mà CSS Container Queries giải quyết.
CSS Container Queries Là Gì?
CSS Container Queries là tính năng CSS cho phép viết style dựa trên kích thước của phần tử chứa (container) thay vì kích thước toàn bộ cửa sổ trình duyệt. Điều này khác với media query truyền thống vốn chỉ biết nhìn viewport.
Nói dễ hiểu hơn: trước đây, component chỉ biết “màn hình đang rộng bao nhiêu” rồi quyết định hiển thị. Giờ nó biết “ô chứa mình rộng bao nhiêu” và tự điều chỉnh cho phù hợp, bất kể viewport lớn hay nhỏ.
Đây là bước tiến lớn nhất của CSS kể từ khi Flexbox ra đời, vì nó giải quyết bài toán thiết kế component modular — viết một lần, dùng ở đâu cũng tự phù nghi.
Tại Sao Container Queries Quan Trọng?
Hãy tưởng tượng bạn viết một component hiển thị thông tin sản phẩm. Component này xuất hiện ở ba nơi: trang danh sách (rộng 800px), sidebar (rộng 300px), và modal popup (rộng 500px).
Với media query truyền thống, bạn chỉ biết viewport. Nếu màn hình desktop rộng 1440px, cả ba vị trí đều nhận cùng style — dù sidebar chỉ có 300px. Kết quả: component sidebar bị ép, chữ tràn, hình méo.
Mỗi giải pháp tạm thời lại sinh ra nợ kỹ thuật mới. Nhúng component vào context khác phải viết thêm CSS override. Component không thực sự độc lập.
Container Queries thay đổi luật chơi. Component tự nhận biết không gian của mình và render phù hợp. Sidebar hẹp thì chuyển sang layout dọc. Trang danh sách rộng thì dùng layout ngang. Tất cả tự động, không cần override.
Cách Dùng Container Queries Như Thế Nào?
Bước 1: Khai báo phần tử cha là container bằng thuộc tính container-type:
.card-wrapper {
container-type: inline-size;
}inline-size theo dõi chiều rộng. Có thêm size theo dõi cả rộng lẫn cao nếu cần.
Bước 2: Viết style cho component con dựa trên kích thước container bằng cú pháp @container:
.product-card {
display: flex;
flex-direction: column;
}
@container (min-width: 500px) {
.product-card {
flex-direction: row;
}
}Đoạn code trên nói: nếu container rộng tối thiểu 500px, hiển thị card theo hàng ngang. Nhỏ hơn thì hiển thị dọc. Đơn giản, trực tiếp, không phụ thuộc viewport.
Bạn cũng có thể đặt tên cho container để quản lý dễ hơn khi có nhiều lớp lồng nhau:
.sidebar {
container-type: inline-size;
container-name: sidebar;
}
@container sidebar (min-width: 300px) {
.widget { padding: 20px; }
}Container Query Units Là Gì?
Cùng với Container Queries, CSS cung cấp các đơn vị đo mới dựa trên kích thước container thay vì viewport:
cqw (container query width): 1% chiều rộng container.
cqh (container query height): 1% chiều cao container.
cqi (container query inline): 1% inline-size.
cqb (container query block): 1% block-size.
cqmin: giá trị nhỏ hơn giữa cqi và cqb.
cqmax: giá trị lớn hơn giữa cqi và cqb.
Ví dụ thực tế: muốn font size tự co giãn theo container thay vì viewport:
.card-title {
font-size: clamp(1rem, 5cqi, 2rem);
}Font tối thiểu 1rem, tối đa 2rem, ở giữa thì scale theo 5% chiều rộng container. Component để ở đâu cũng tự điều chỉnh chữ phù hợp.
Phân Biệt Container Queries Và Media Queries
Media query trả lời câu hỏi: “Thiết bị đang dùng kích thước nào?” Container query trả lời: “Không gian hiển thị của component này rộng bao nhiêu?”
Media query phù hợp cho quyết định ở cấp layout: chuyển từ layout 3 cột sang 1 cột, ẩn hiện menu mobile, thay đổi font-size toàn trang.
Container query phù hợp cho quyết định ở cấp component: card nằm ngang hay dọc, hiện hay ẩn ảnh thumbnail, điều chỉnh padding nội bộ.
Trong thực tế, hai loại dùng song song. Media query lo macro layout, container query lo micro layout. Bảng dưới tóm tắt nhanh:
Phạm vi: Media query nhìn viewport, container query nhìn element cha.
Use case: Media query cho layout trang, container query cho component.
Độc lập: Container query giúp component tái sử dụng hoàn toàn, media query thì không.
Browser support: Cả hai đều hỗ trợ đầy đủ từ 2023.
Browser Support Năm 2026
Container Queries được hỗ trợ đầy đủ trên Chrome 105+, Firefox 110+, Safari 16+. Tức là từ đầu 2023, mọi trình duyệt chính đều đã hỗ trợ. Năm 2026, bạn có thể dùng tự tin mà không cần polyfill.
Các framework phổ biến đều đã tích hợp sẵn. Tailwind CSS có modifier @container. Bootstrap 5.3 thêm container query support. Material UI và Chakra UI cũng hỗ trợ native.
Container Style Queries Là Gì?
Một bước tiến mới hơn là container style queries — cho phép viết style dựa trên giá trị CSS của container, không chỉ kích thước:
@container style(--theme: dark) {
.card { background: #1a1a1a; color: #fff; }
}Thay vì chỉ nhìn width/height, container có thể phản ứng với custom property, background color, hay bất kỳ giá trị CSS nào của cha. Tính năng này đang dần được hỗ trợ trên Chrome 111+ và Safari 17.4+, Firefox vẫn đang implement.
Ứng dụng thực tế: design system với nhiều theme, component tự đổi màu theo theme của container mà không cần JavaScript. Dark mode chỉ cần set biến --theme ở wrapper, toàn bộ component con tự thích nghi.
Khi Nào Nên Dùng Container Queries?
Dùng khi bạn xây dựng design system hoặc component library cần tái sử dụng ở nhiều vị trí khác nhau. Card, widget, navigation, hero section — bất kỳ component nào xuất hiện ở nhiều nơi với chiều rộng khác nhau đều hưởng lợi lớn.
Không nên dùng cho layout cấp trang như chia lưới cột, ẩn hiện sidebar toàn trang. Đó vẫn là nhiệm vụ của media query. Nguyên tắc: macro dùng media query, micro dùng container query.
Nếu component chỉ xuất hiện ở một nơi duy nhất với kích thước cố định, container query không mang lại giá trị thêm. Media query truyền thống đã đủ.
Kết Luận
CSS Container Queries thay đổi cách tiếp cận thiết kế component web. Thay vì viết CSS dựa trên kích thước màn hình rồi phải override cho từng context, bạn viết một lần và component tự điều chỉnh theo không gian hiển thị thực tế.
Kết hợp với container query units, style queries, và framework support sẵn có, đây là công cụ mà mọi frontend developer năm 2026 cần nằm trong tay. Nếu bạn vẫn đang viết media query để xử lý layout component, đã đến lúc nâng cấp.
