Cách Container Queries giúp bạn "chia tay" Media Queries rườm rà

Cứ mỗi lần làm giao diện tương thích (responsive) là anh em lại phải hì hục viết đống @media (max-width: 768px) đúng không? Nhưng đời không như là mơ, một cái thẻ (component) khi nằm ở cột bên (sidebar) thì cần hiển thị dọc, nhưng khi vứt ra giữa trang lại cần nằm ngang. Nếu chỉ dùng Media Queries dựa trên kích thước màn hình, bạn sẽ sớm rơi vào cái bẫy "rối não" vì phải quản lý hàng tá lớp CSS đè lên nhau.

Đây chính là lúc Container Queries xuất hiện như một vị cứu tinh. Thay vì nhìn vào độ rộng của toàn bộ trình duyệt, nó cho phép component tự nhìn vào cái "hộp" đang chứa nó để quyết định xem nên hiển thị thế nào cho đẹp. Cách tiếp cận này giúp bạn thực sự làm chủ được layout mà không cần quan tâm người dùng đang dùng iPhone hay màn hình 4K.

Tại sao Media Queries đôi khi làm bạn "phát cáu"?

Vấn đề lớn nhất của Media Queries là nó quá phụ thuộc vào thiết bị. Hãy tưởng tượng bạn có một chiếc thẻ bài viết (Card component) cực kỳ ưng ý. Bạn muốn nó hiển thị dạng lưới (grid) 3 cột trên desktop. Nhưng nếu cái Card đó lại nằm trong một cái container nhỏ xíu ở góc màn hình thì sao? Nó sẽ bị bóp nghẹt vì nó vẫn đang cố hiển thị theo kiểu "desktop".

Việc kết hợp Cách CSS Grid giúp bạn "cân" mọi layout phức tạp với Media Queries truyền thống thường khiến bạn phải viết thêm rất nhiều class phụ trợ. Điều này không chỉ làm file CSS phình to mà còn khiến việc bảo trì code sau này trở thành một cực hình. Container Queries sinh ra để giải quyết triệt để sự lằng nhằng này bằng cách trao quyền tự quyết cho chính component đó.

Container Queries - Khi component tự "biết thân biết phận"

Để bắt đầu, bạn chỉ cần khai báo cho trình duyệt biết cái hộp nào là "vùng chứa" bằng thuộc tính container-type. Sau đó, thay vì dùng @media, bạn chuyển sang dùng @container. Lúc này, component của bạn sẽ trở nên cực kỳ linh hoạt: cứ hễ cái hộp chứa nó rộng ra là nó tự đổi kiểu, hẹp lại là nó tự thu gọn, bất kể màn hình đang to hay nhỏ.

Bạn có thể tham khảo thêm tài liệu chuẩn tại MDN Web Docs để hiểu sâu hơn về các giá trị như inline-size hay size. Khi đã nắm vững, bạn sẽ thấy việc code giao diện trở nên "nhẹ gánh" hơn hẳn vì component giờ đây đã có khả năng tự thích nghi ở mọi vị trí.

Code thử phát xem có "xịn" thật không?

Dưới đây là cách bạn biến một cái Card đơn giản trở nên thông minh chỉ với vài dòng CSS:

/* 1. Khai báo vùng chứa */
.parent-container {
  container-type: inline-size;
  width: 100%;
}

/* 2. Style mặc định cho Card (dạng dọc) */
.card {
  display: flex;
  flex-direction: column;
}

/* 3. Tự động đổi sang dạng ngang khi vùng chứa rộng hơn 400px */
@container (min-width: 400px) {
  .card {
    flex-direction: row;
    gap: 20px;
  }
}

Đoạn code trên đảm bảo rằng dù bạn vứt cái Card này vào bất cứ đâu, nó cũng sẽ hiển thị chuẩn chỉnh. Đừng quên dùng Cách Chrome DevTools giúp bạn "soi" UI để kiểm tra vùng chứa (container) một cách trực quan nhất nhé.

Bước đệm để làm Design System chuyên nghiệp

Nếu bạn đang ấp ủ dự định xây dựng một Design System cho riêng mình hoặc cho công ty, Container Queries là kiến thức bắt buộc. Nó giúp bạn tạo ra những component thực sự độc lập và có khả năng tái sử dụng (reusability) cực cao. Bạn không còn phải lo lắng việc component bị "vỡ layout" khi đồng nghiệp bê nó sang một trang mới có cấu trúc khác.

Tại DIA DEMY, chúng mình luôn khuyến khích học viên tư duy theo kiểu component-first. Điều này không chỉ giúp code sạch hơn mà còn giúp quy trình làm việc giữa Designer và Developer trở nên mượt mà hơn bao giờ hết. Khi Designer hiểu về Container Queries, họ sẽ thiết kế các trạng thái của component dựa trên không gian có sẵn, thay vì chỉ dựa trên kích thước màn hình điện thoại hay laptop.

Bạn đã sẵn sàng để dọn dẹp đống Media Queries cũ kỹ và nâng cấp kỹ năng CSS của mình lên một tầm cao mới chưa? Hãy thử áp dụng ngay vào dự án tiếp theo và cảm nhận sự khác biệt nhé!