CSS 2025: Masonry Layout và State Queries chính thức cập bến - Hồi kết cho các thư viện JS Layout

[Baron Darkness]

CSS 2025: Masonry Layout và State Queries chính thức cập bến - Hồi kết cho các thư viện JS Layout

Không còn là những bản nháp (Draft) trên giấy tờ của W3C. Trong thông báo chung của dự án Interop 2025 vào sáng nay, cả ba ông lớn Google Chrome, Apple Safari và Mozilla Firefox đã đồng loạt bật đèn xanh (Stable) cho hai tính năng CSS được mong chờ nhất thập kỷ: Native Masonry Layout và State Queries. Kể từ hôm nay, bạn có thể xóa thư viện masonry.js khỏi dự án của mình.

1. Masonry Layout: Giấc mơ "Pinterest" không cần JavaScript​

Suốt 10 năm qua, để làm được giao diện xếp gạch so le (như Pinterest), lập trình viên buộc phải dùng JavaScript để tính toán vị trí tuyệt đối (absolute position) cho từng phần tử. Điều này gây ra lỗi nhảy trang (Layout Shift) và làm chậm tốc độ tải.

Với bản cập nhật CSS Grid Level 3, cú pháp chính thức đã được chốt hạ: grid-template-rows: masonry;

Code minh họa:

/* Trước đây: Cần JS + Absolute Positioning phức tạp */
/* Bây giờ (2025): Chỉ cần 4 dòng CSS */

.gallery-container {
  display: grid;
  gap: 1rem;
  /* Chia cột tự động */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* Phép màu nằm ở đây: Tự động lấp đầy khoảng trống dọc */
  grid-template-rows: masonry;
}

• Cơ chế: Trình duyệt tự động xếp các item vào các khoảng trống theo chiều dọc mà không cần quan tâm đến chiều cao cố định (row tracks).
• Hiệu năng: Vì được tính toán bởi engine render của trình duyệt (thay vì main thread của JS), giao diện Masonry mới mượt mà tuyệt đối ngay cả khi resize cửa sổ, giúp điểm CLS (Cumulative Layout Shift) về bằng 0.

2. State Queries: Khi CSS có "tư duy" logic​

Nếu Masonry giải quyết vấn đề bố cục, thì State Queries (Truy vấn trạng thái) giải quyết vấn đề logic hiển thị. Đây là bước tiến hóa tiếp theo của Container Queries.

Thay vì chỉ truy vấn dựa trên kích thước (min-width), giờ đây bạn có thể truy vấn dựa trên giá trị của biến CSS (Custom Properties).

Code minh họa:

/* Container cha */
.product-card {
  container-name: card-context;
  --is-featured: false; /* Biến trạng thái */
}

/* Logic hiển thị nằm gọn trong CSS */
@container style(--is-featured: true) {
  .card-title {
    font-size: 2rem;
    color: gold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }
 
  .buy-button {
    background-color: var(--premium-color);
  }
}

• Tác động: Giảm thiểu đáng kể việc phải viết code JS để toggle class (bật/tắt class) thủ công. Logic giao diện giờ đây tách biệt hoàn toàn với logic dữ liệu.

3. Tác động đến Web Performance (Core Web Vitals)​

Việc loại bỏ các thư viện JS Layout (thường nặng từ 15kb - 30kb gzipped) mang lại lợi ích kép:

• Tăng tốc độ tải (FCP): Trình duyệt không cần parse và execute JS để vẽ giao diện lần đầu.
• Cải thiện độ mượt (INP): Luồng chính (Main Thread) được giải phóng để xử lý tương tác người dùng thay vì bận rộn tính toán vị trí các ô div.

4. Lời khuyên cho Frontend Developer​

• Clean up: Đã đến lúc rà soát lại package.json và gỡ bỏ các thư viện như isotope, masonry-layout, hay react-masonry-css.
• Học cú pháp mới: Làm quen với grid-template-rows: masonry và cú pháp @container style(...).
• Fallback: Dù các trình duyệt hiện đại đã hỗ trợ, hãy vẫn sử dụng @supports để đảm bảo giao diện không vỡ trên các thiết bị quá cũ (iPhone 12 trở về trước).

 

Bài viết chỉ thể hiện quan điểm cá nhân của tác giả và mang tính tham khảo. Chúng tôi không chịu trách nhiệm cho bất kỳ rủi ro nào phát sinh từ việc sử dụng thông tin trong bài viết.