CSS hiện đại đã thêm các hàm và thuộc tính thay thế cả những loại thủ thuật media-query và JavaScript. Những cái nổi bật:
clamp() — giá trị linh hoạt, có giới hạn
h1 { font-size: clamp(, , ); }
CSS hiện đại đã thêm các hàm và thuộc tính thay thế cả những loại thủ thuật media-query và JavaScript. Những cái nổi bật:
h1 { font-size: clamp(, , ); }
clamp(min, preferred, max) cho typography/spacing linh hoạt co giãn mượt theo viewport nhưng giữ trong giới hạn — thay thế cả nhiều breakpoint của media query font-size bằng một dòng.
.video { aspect-ratio: 16 / 9; width: 100%; } /* height tự tính để giữ 16:9 */
.avatar { aspect-ratio: 1; } /* vuông hoàn hảo ở mọi chiều rộng */
Trước đây, giữ một box 16:9 responsive đòi hỏi thủ thuật khét tiếng padding-bottom: 56.25%. Giờ chỉ là một khai báo — và nó giữ chỗ (tốt cho CLS) trước khi ảnh tải xong.
.container { width: min(90%, 1200px); } /* lấy giá trị NHỎ HƠN → linh hoạt nhưng có trần */
.box { padding: max(1rem, 3vw); } /* lấy giá trị LỚN HƠN → một mức sàn tối thiểu */
min()/max() chọn giá trị nhỏ hơn/lớn hơn, cho phép một thuộc tính responsive mà không cần media query (ví dụ "rộng 90%, nhưng không bao giờ quá 1200px").
.card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
subgrid cho phép một grid lồng nhau kế thừa các đường track của cha, nên các item trên các card riêng biệt (title, body, button) căn chỉnh hoàn hảo trên các hàng chung — trước đây không thể làm nếu không có chiều cao cố định.
.flex { display: flex; gap: 1rem; } /* gap giờ hoạt động trong flexbox, không chỉ grid */
Các tính năng này loại bỏ những thủ thuật tồn tại lâu nay: clamp()/min()/max() thay thế hàng loạt media query cho kích thước linh hoạt, aspect-ratio thay thế thủ thuật padding và bảo vệ khỏi layout shift, và subgrid giải quyết việc căn chỉnh xuyên component.
Chúng làm cho các layout responsive, theo tỷ lệ trở nên đơn giản và vững chắc hơn rất nhiều — CSS hiện đại làm một cách declarative những gì trước kia cần JS hoặc các thủ thuật mong manh.