- Trước đây, tuy có thể tạo khoảng cách bằng thuộc tính CSS
gap, nhưng không thể tạo kiểu trực tiếp cho chính vùng gap, nên phải dùng nhiều cách lách khác nhau (phần tử bổ sung, border, pseudo-element, v.v.)
- Tính năng mới CSS gap decorations cho phép vẽ trực tiếp đường phân cách (separator) giữa các item trong layout bằng các thuộc tính như
row-rule, column-rule
- Có thể áp dụng decoration trên mọi layout chính gồm Grid, Flexbox, Multi-column, và sắp tới là cả Masonry, cho phép cải thiện cấu trúc/thị giác chỉ bằng CSS thuần mà không cần markup riêng hay phần tử thừa
- Hỗ trợ lặp/kết hợp nhiều kiểu khác nhau (độ dày, màu sắc, hoa văn, v.v.), đồng thời cho phép điều khiển chi tiết bằng
repeat(), outset, paint-order
- Hiện tại mới chỉ dùng được khi bật flag trên các trình duyệt họ Chromium (Chrome/Edge 139+), và vẫn đang trong quá trình chuẩn hóa/mở rộng
Giới hạn trước đây của gap và thay đổi mới
- Trước kia rất khó tạo kiểu cho vùng gap, và phải thêm border hoặc phần tử giả để làm separator
- Cách này kéo theo nhiều nhược điểm về kích thước layout, khả năng truy cập, độ phức tạp của markup, v.v.
- Giờ đây, tiêu chuẩn gap decorations đã xuất hiện, cho phép áp dụng decoration (như đường kẻ) lên vùng khoảng cách chỉ với vài thuộc tính CSS đơn giản
Giới thiệu CSS gap decorations
- column-rule: vốn được dùng trong multi-column để vẽ đường phân cách dọc (ví dụ:
column-rule: 1px solid black;)
- Giờ đây thuộc tính này cũng có thể dùng với flexbox, grid và các layout khác
.my-grid-container {
display: grid;
gap: 2px;
column-rule: 2px solid pink;
}
- row-rule: có thể vẽ separator giữa các hàng (theo chiều ngang)
.my-flex-container {
display: flex;
gap: 10px;
row-rule: 10px dotted limegreen;
column-rule: 5px dashed coral;
}
- Lặp/kết hợp nhiều kiểu: có thể trộn nhiều style khác nhau bằng
repeat() hoặc phân tách bằng dấu phẩy
.my-container {
display: grid;
gap: 2px;
row-rule:
repeat(2, 1px dashed red),
2px solid black,
repeat(auto, 1px dotted green);
}
- Các thuộc tính điều khiển chi tiết:
row-rule-break, column-rule-break, row-rule-outset, column-rule-outset, gap-rule-paint-order giúp tinh chỉnh vị trí, giao điểm, thứ tự chồng lấp, v.v.
Ví dụ: áp dụng gap decorations trong thực tế
- Trang ví dụ đặt
body là grid và phân tách header/nav/main/footer bằng gap
- Có thể dùng
row-rule để áp dụng các đường phân cách với độ dày, màu sắc và kiểu khác nhau
- Menu nav dùng flexbox kết hợp
column-rule để vẽ đường giữa các mục
- Khu vực main dùng flexbox để sắp xếp ảnh và văn bản theo dạng masonry, đồng thời nhấn mạnh cấu trúc kiểu lưới bằng
row-rule, column-rule
- Có thể tinh chỉnh chính xác vị trí bắt đầu/kết thúc của đường kẻ bằng
column-rule-outset: 0; v.v.
Hỗ trợ trình duyệt và cách kích hoạt
- Hiện tại cần bật flag (about://flags → Experimental Web Platform Features) trên các trình duyệt nền Chromium như Chrome/Edge 139+
- Quá trình chuẩn hóa chính thức vẫn đang diễn ra, và nhóm phát triển khuyến khích thử nghiệm cũng như gửi phản hồi
Tìm hiểu thêm và Playground
Chưa có bình luận nào.