Cách CSS Container Queries giúp component "tự nhận thức" và thoát cảnh lạm dụng Media Queries

Đã bao giờ bạn gặp cái cảnh trớ trêu này chưa: Bạn dày công code một chiếc Card siêu đẹp, chạy cực mượt trên Mobile lẫn Desktop nhờ Media Queries. Nhưng rồi đùng một cái, Designer yêu cầu nhét cái Card đó vào một cái Sidebar hẹp hoặc một cái Bento Grid với đủ loại kích thước khác nhau. Kết quả là giao diện nát bét vì Media Queries chỉ biết nghe lời "chiều rộng màn hình" chứ chẳng thèm quan tâm cái khung chứa (container) nó đang ở đâu.

Đó chính là lúc CSS Container Queries xuất hiện như một vị cứu tinh, giúp chúng ta xây dựng những component "thông minh" đúng nghĩa. Thay vì hỏi "Màn hình rộng bao nhiêu?", giờ đây component sẽ tự hỏi "Cái khung đang chứa mình rộng bao nhiêu?" để tự điều chỉnh cho phù hợp. Đây là một bước tiến khổng lồ giúp việc code Frontend trở nên linh hoạt và nhàn hạ hơn rất nhiều so với cách làm truyền thống.

Tại sao Media Queries không còn là "vương đạo"?

Media Queries đã thống trị thế giới web hơn một thập kỷ, nhưng nó có một nhược điểm chí mạng: nó mang tính toàn cục (global). Khi bạn viết @media (min-width: 768px), bạn đang ép mọi thứ phải thay đổi dựa trên viewport. Điều này cực kỳ bất tiện khi chúng ta làm việc với các hệ thống Design System hiện đại, nơi một component cần phải hiển thị đẹp ở bất cứ đâu bạn thả nó vào.

Hãy tưởng tượng bạn có một component danh sách tin tức. Ở trang chủ, nó chiếm toàn bộ chiều ngang. Nhưng ở trang chi tiết, nó lại nằm gọn trong một cột nhỏ bên phải. Nếu dùng Media Queries, bạn sẽ phải viết hàng tá class phụ (modifier) kiểu .card--small hay .card--sidebar để ép nó co lại. Càng nhiều component, đống code này sẽ càng phình to và trở thành một cơn ác mộng bảo trì thực sự.

Container Queries giải quyết triệt để vấn đề này bằng cách cho phép component tự quyết định định dạng dựa trên không gian thực tế mà nó nhận được. Bạn chỉ cần định nghĩa một lần, và nó sẽ tự thích ứng dù nằm trong Sidebar, Modal hay giữa trang. Vậy làm thế nào để kích hoạt sức mạnh này?

Cách triển khai Container Queries cực đơn giản

Để một component có thể "nhìn" thấy kích thước của khung chứa, bước đầu tiên bạn cần làm là khai báo cho trình duyệt biết cái khung đó là một "container". Chúng ta sử dụng thuộc tính container-type cho phần tử cha. Thông thường, chúng ta sẽ dùng giá trị inline-size để theo dõi chiều rộng của nó.

/* 1. Khai báo khung chứa */
.card-container {
  container-type: inline-size;
  container-name: sidebar-card;
}

/* 2. Viết style dựa trên chiều rộng của khung chứa */
@container (min-width: 400px) {
  .card-content {
    display: flex;
    gap: 20px;
  }
  .card-image {
    width: 150px;
  }
}

Trong đoạn code trên, chỉ khi .card-container rộng từ 400px trở lên, các style bên trong block @container mới được áp dụng. Điều tuyệt vời là con số 400px này hoàn toàn độc lập với kích thước màn hình điện thoại hay máy tính của người dùng. Bạn có thể tìm hiểu thêm tài liệu chi tiết tại MDN Web Docs để nắm vững các thông số nâng cao hơn.

Việc kết hợp tư duy này với các kỹ năng bố cục sẽ giúp bạn xử lý những giao diện phức tạp một cách cực kỳ gọn gàng. Bạn sẽ thấy mình ít phải dùng đến những giải pháp "chắp vá" bằng JavaScript chỉ để đo đạc kích thước phần tử. Nhưng khoan đã, liệu trình duyệt đã hỗ trợ tốt tính năng này chưa?

Ứng dụng thực tế và khả năng hỗ trợ

Tin vui là hiện tại, hầu hết các trình duyệt hiện đại (Chrome, Firefox, Safari, Edge) đều đã hỗ trợ tốt Container Queries. Đây không còn là một tính năng thí nghiệm nữa mà đã sẵn sàng để bạn đưa vào các dự án thực tế tại uxui.edu.vn hoặc các sản phẩm cho khách hàng. Nó đặc biệt hiệu quả khi làm các layout dạng lưới, danh sách sản phẩm hoặc các dashboard phức tạp.

Một mẹo nhỏ là bạn hãy bắt đầu áp dụng cho những component nhỏ nhất trước. Ví dụ như một cái Button có icon: khi khung chứa hẹp thì chỉ hiện icon, khi khung chứa rộng thì hiện thêm chữ. Dần dần, bạn sẽ xây dựng được một thư viện component cực kỳ linh hoạt, giúp tiết kiệm hàng giờ đồng hồ ngồi căn chỉnh CSS cho từng màn hình cụ thể.

Chúng ta đang tiến dần đến một kỷ nguyên mà giao diện không còn bị gò bó bởi các điểm ngắt (breakpoints) cố định. Việc làm chủ Container Queries không chỉ là học một cú pháp mới, mà là thay đổi tư duy làm web từ "thiết kế trang" sang "thiết kế hệ thống component". Liệu bạn đã sẵn sàng để bỏ lại những dòng code Media Queries dài dằng dặc phía sau và bắt đầu với cách làm thông minh hơn chưa?