Trình Tạo
CSS Container Query
Công cụ trực quan giúp bạn tạo các luật CSS @container query. Thiết lập container-type/name, khai báo breakpoint, thử nghiệm với 6 mẫu có sẵn và xem trước theo thời gian thực. Đặc biệt hỗ trợ dịch media queries sang container queries.
Cài đặt Container
Mẫu có sẵn
Breakpoints
Xem trước trực tiếp
Mã CSS Đầu Ra
🔄 Chuyển đổi Media Query → Container Query
Bạn cũng có thể thích
Về Trình Tạo CSS Container Query
Trình Tạo CSS Container Query là một công cụ giúp các nhà phát triển web nhào nặn ra các đoạn code "@container" - một siêu sao mới nổi trong giới thiết kế web responsive (đáp ứng). Thay vì dựa dẫm vào kích thước của cửa sổ trình duyệt (viewport) như Media Query ngày xưa, Container Query phụ thuộc vào độ to nhỏ của thẻ cha (container) bọc lấy phần tử. Nhờ vậy bạn có thể ném component đi muôn nơi mà không sợ vỡ khung.
Mọi tham số như container-type, container-name hay các mốc breakpoint đều có thể tinh chỉnh trực tiếp trên giao diện và ngắm kết quả ngay lập tức bằng bảng preview. Còn chần chờ gì nữa mà không lấy cục @media query cũ rích của bạn bỏ vào ô Converter để hô biến nó thành dạng @container tối tân ngay bây giờ?
Cách Sử Dụng
Cài Đặt Container & Breakpoint
Nhập class/ID của container, chọn container-type (chọn inline-size là chân ái). Tiếp theo, nhấn nút "Thêm Breakpoint" rồi gõ vài dòng CSS để áp dụng hiệu ứng khi vùng chứa vượt ngưỡng kích thước. Có thể vọc thử bằng mấy mẫu có sẵn.
Co Giãn Thử Mắt Cáo
Xuống phần Xem trước, tóm lấy cái mép bên phải và rề qua rề lại để coi cái giao diện nó có gập - mở theo đúng ý bạn chưa. Chơi sang thì dán mã HTML từ dự án của bạn vô để test xem độ ăn khớp.
Lụm Code Và Chuyển Đổi
Code ngon rồi thì copy 1 phát về xài thôi. Đặc biệt là cái hộp thoại Chuyển đổi ở góc phải: dán cục CSS đầy mùi @media cũ rích vào, nhấn nút là ra mã @container tinh tươm, tiết kiệm mồ hôi công sức di cư code.
Từ Điển Thuật Ngữ Container Query
- Container Query (@container)
- Một "phép màu" của CSS giúp một phần tử con có khả năng thay hình đổi dạng dựa trên thể tích của thằng cha (container) thay vì nhìn vào kích thước trình duyệt.
- container-type
- Thuộc tính phù phép một phần tử bình thường thành một Container để bị "hỏi thăm" (query).
inline-sizelà kiểm tra bề ngang, cònsizelà lo luôn cả bề ngang lẫn bề dọc. - container-name
- Gắn bảng tên cho Container. Chức năng này cực kì hữu hiệu khi bạn lồng các container vào nhau và chỉ muốn truy vấn một container đích danh thay vì chộp đại cái container gần nhất.
- Containment (Bao đóng)
- Khái niệm cốt lõi cho phép container query hoạt động. Nó giúp trình duyệt cô lập quá trình tính toán layout của container khỏi phần còn lại của trang, cải thiện tốc độ và sự ổn định.
- Inline-axis
- Trục dọc theo hướng chữ chảy. Thường với tiếng Việt / tiếng Anh thì nó là chiều rộng (Width).
- Media Query (@media)
- Người anh cả làng CSS, áp dụng style phụ thuộc vào chiều dài, bề rộng của khung hình thiết bị hay màn hình làm việc (viewport).
- cqw / cqh / cqi / cqb
- Binh đoàn đơn vị đo độ dài mới (tương tự như vw, vh). 1cqw bằng với 1% chiều rộng của Container đang xét.
Hỏi Đáp Thường Gặp
- Q.Dữ liệu tôi nhập có bị gửi đi đâu không?
- Không hề. Công cụ này xử lý tất cả ở phía client (ngay trên trình duyệt của bạn). Mã HTML/CSS không bao giờ bị lưu trữ hay gửi lên máy chủ nào hết.
- Q.Khi nào thì dùng Media Queries, khi nào dùng Container Queries?
- Nên dùng media queries cho bố cục bao quát toàn trang (ví dụ như chỉnh layout chính: header, sidebar), và container queries cho các thành phần UI nhỏ lẻ (như thẻ card, nút bấm, widget) để chúng tự thích nghi kích thước với cái hộp chứa tụi nó.
- Q.Các trình duyệt nào hỗ trợ cái này rồi?
- Từ giữa năm 2023 thì tất cả các trình duyệt hiện đại (Chrome 105+, Safari 16+, Firefox 110+) đều đã hỗ trợ toàn diện. Nếu xài cho các bản cũ hơn thì bạn cần có cơ chế fallback.
- Q.Có lưu ý gì khi xài container-type: size không?
- Khi dùng size, trình duyệt sẽ áp dụng contain cho cả chiều dọc. Tức là nếu bạn không khai báo thuộc tính height cho nó, phần tử container sẽ bị xẹp lét xuống 0px. Lời khuyên là hãy dùng inline-size trừ khi bạn thực sự rành.
- Q.Khung xem trước mã HTML tùy chỉnh hoạt động ra sao để không bị lỗi CSS?
- Chúng tôi áp dụng kỹ thuật Shadow DOM để cô lập hoàn toàn khung xem trước. Điều này đảm bảo CSS của trang web chính không chọc vào làm hỏng giao diện bạn đang test.
Ứng Dụng Thực Tế
Tái sử dụng Component Card
Lý tưởng để thiết kế thẻ UI độc lập, tự động thay đổi giao diện mượt mà dù nằm ở khu vực chính 3 cột hay bị nhét vào thanh sidebar hẹp té.
Tích hợp CMS & Widget
Tạo các khối giao diện cho nền tảng như WordPress tự động điều chỉnh bố cục mà không cần bận tâm widget đang nằm ở khu vực rộng hay hẹp.
Giao diện Dashboard Phức Tạp
Cực kỳ hoàn hảo để sắp xếp linh hoạt các biểu đồ và số liệu trong các bảng điều khiển (dashboard) cho phép kéo giãn kích thước.
Nâng cấp Mã Nguồn Cũ
Dùng tính năng Chuyển đổi của công cụ này để dọn dẹp hàng mớ @media query cồng kềnh thành @container query rành mạch, dễ bảo trì.
Tài Liệu Kỹ Thuật CSS Container Query
CSS Container Queries là tinh túy từ việc kết hợp lệnh @container và thuộc tính container-type. Một bước nhảy vọt khác biệt hoàn toàn với Media query truyền thống.
Đẳng Cấp Khác Biệt Giữa @container Và @media
Media queries (@media) ra lệnh thay đồ chỉ khi cái cửa sổ lướt web (viewport) thay đổi. Container queries (@container) linh hoạt hơn, cứ cái khung chứa ở ngoài (parent container) mập ốm ra sao là phần tử bên trong thay đồ cho vừa ngay. Ví dụ bạn làm một component thẻ Card, dù bạn đặt ở vùng Main Content to đùng hay nhét vô cái Sidebar xíu xiu, bạn chả cần phải viết riêng 2 luật css khác nhau như hồi dùng @media nữa.
Các giá trị thần thánh của container-type
inline-size là lựa chọn an toàn quốc dân, chỉ kích hoạt query dọc theo trục ngang (chiều rộng). size nhạy cảm cả bề dọc lẫn ngang nhưng yêu cầu cái container phải có chiều cao rõ ràng. normal (mặc định) có nghĩa là... không làm gì hết, phần tử không tham gia giải đấu container queries.
Tính tương thích trình duyệt (Browser Support)
Cất cánh mượt mà trên Chrome 105+, Safari 16+, Firefox 110+, và Edge 105+. Nhìn chung thì anh em nào lướt web trên thiết bị sắm từ 2023 là xài vô tư. Còn mấy cụ trình duyệt đồ cổ thì nó tự lờ đi lệnh @container mà không hề gây sụp web, cứ yên tâm (hiệu ứng progressive enhancement).
Gửi phản hồi
Vui lòng cho chúng tôi biết suy nghĩ của bạn để giúp chúng tôi cải thiện công cụ.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.