Khoảng trống trang trí: Hiện đã có trong Chromium

Javier Contreras

Sam Davis Omekara

Xuất bản: Ngày 15 tháng 5 năm 2026

Các thành phần trang trí khoảng trống CSS có trong Chrome và Edge từ phiên bản 149 trở đi. Tạo kiểu cho khoảng trống giữa lưới, flexbox và bố cục nhiều cột mà không cần dùng đường viền hoặc phần tử giả. Tính năng này được xây dựng thông qua sự hợp tác giữa nhóm Microsoft Edge và nhóm Google Chrome.

Vấn đề

Việc tạo kiểu cho các khoảng trống giữa các mục bố cục luôn cần các giải pháp tạm thời. Đường viền trên các mục riêng lẻ, phần tử giả, thủ thuật về nền. Các phương pháp này có những chi phí sau:

• Chúng phụ thuộc vào cấu trúc. Việc thêm dòng phân cách trực quan có nghĩa là bạn phải thay đổi mã đánh dấu hoặc viết bộ chọn cho các mục cụ thể.
• Chúng cản trở khả năng tiếp cận. Các phần tử DOM bổ sung xuất hiện trong cây hỗ trợ tiếp cận khi không nên.
• Khó duy trì. Bố cục thích ứng phá vỡ các giả định mà kiểu dáng khoảng trống của bạn được xây dựng dựa trên đó.
• Chúng ảnh hưởng đến hiệu suất. Càng nhiều nút DOM thì càng nhiều công việc bố trí.
• Họ có tư thế soạn thảo không phù hợp. Bạn thường cần thực hiện các phép tính hình học phức tạp để mọi thứ hoạt động chính xác.

Thuộc tính column-rule xử lý khoảng trống trang trí cho bố cục nhiều cột, nhưng trước đây lưới và flexbox thiếu chức năng tương đương.

Giải pháp

Vùng chứa lưới và vùng chứa flexbox hiện chấp nhận column-rule. Một thuộc tính row-rule mới xử lý các khoảng trống theo chiều ngang. Những thành phần trang trí này chỉ mang tính chất hình ảnh và không ảnh hưởng đến bố cục hiện có. Nếu bạn sử dụng thuộc tính column-rule trong bố cục nhiều cột, thì hành vi hiện tại vẫn giữ nguyên.

Ví dụ: sau đây là một vùng chứa linh hoạt có 3 bảng điều khiển sử dụng danh sách kiểu cho các quy tắc về cột và hàng:

.flex-split {
  column-rule-width: 2px;
  column-rule-style: dashed, solid;
  column-rule-color: #d4d0c8;
}

Như minh hoạ trong ví dụ này, cả row-rule và column-rule đều chấp nhận cùng một mã viết tắt cho chiều rộng, kiểu và màu sắc. Sử dụng cú pháp rút gọn rule để đặt cả hai cùng một lúc.

Tài sản mới

Tuy nhiên, chúng tôi không chỉ đưa column-rule vào các chế độ bố cục khác và thêm đối tượng row. Chúng tôi cũng giới thiệu các chế độ kiểm soát để tinh chỉnh các thành phần trang trí: cách chúng ngắt tại các giao lộ, khoảng cách chúng thụt vào từ các cạnh khoảng trống, thời điểm chúng xuất hiện so với các mục và cách thay đổi kiểu trên các khoảng trống. Chiều rộng, màu sắc và phần lồng ghép của đường kẻ cũng có thể tạo ảnh động.

Cú pháp repeat()

Khoảng trống trang trí hỗ trợ repeat() cho các giá trị chiều rộng, kiểu và màu sắc. Điều này cho phép bạn thay đổi các thành phần trang trí trên các khoảng trống trong dạng ngắn, tương tự như cú pháp repeat() được dùng cho các định nghĩa về bản nhạc trong lưới:

.settings-panel {
  row-rule: 1px solid #243352;
  row-rule-width: repeat(2, 1px), 4px;
}

Điều này sẽ tạo cho 2 khoảng trống hàng đầu một quy tắc 1px và khoảng trống thứ ba một quy tắc 4px, xoay vòng nếu có nhiều khoảng trống hơn giá trị. Bạn cũng có thể truyền trực tiếp nhiều giá trị mà không cần repeat(). Ví dụ: các kiểu quy tắc hàng xen kẽ cho ranh giới giờ và nửa giờ trong lịch:

.calendar {
  row-rule-width: 2px, 1px;
  row-rule-style: solid, dashed;
  row-rule-color: #e8e4df, #f0ece7;
}

Kiểm soát dấu ngắt trang trí

Các thuộc tính column-rule-break và row-rule-break kiểm soát cách các thành phần trang trí hoạt động tại các giao điểm khoảng trống:

• normal (mặc định): Hành vi phụ thuộc vào loại vùng chứa. Bạn có thể xem thêm thông tin trong quy cách.
• none: Các vật trang trí chạy liên tục qua các giao lộ.
• intersection: Vị trí ngắt của phần trang trí tại nơi giao nhau giữa khoảng trống hàng và cột.

Ví dụ: nếu bạn đặt rule-break thành intersection trong một vùng chứa lưới, các quy tắc sẽ bị ngắt tại các giao điểm khoảng trống thay vì tiếp tục:

.dashboard {
  column-rule-style: solid;
  column-rule-color: #fbbf24, #34d399;
  column-rule-width: 1px, 3px;
  column-rule-break: intersection;
  row-rule: 1px solid #1e1e36;
}

Nếu bạn đặt rule-break thành none, các quy tắc sẽ chạy liên tục qua các giao lộ:

.grid {
  column-rule: 1px solid #5a9e9e;
  row-rule: 1px solid #c27a6b;
  rule-break: none;
}

Bạn có thể thử giá trị này trong sân chơi tương tác.

Mở rộng hoặc thu nhỏ các vật phẩm trang trí

Các thuộc tính column-rule-inset và row-rule-inset kiểm soát mức độ mở rộng của các thành phần trang trí trong khoảng trống. Bạn có thể đặt phần lồng ghép trên tất cả các cạnh cùng một lúc bằng cách sử dụng tên viết tắt hoặc nhắm đến phần lồng ghép không đối xứng bằng column-rule-inset-cap (đối với các điểm cuối không có khoảng trống giao nhau) và column-rule-inset-junction (đối với các điểm cuối giao nhau với các khoảng trống khác).

Giá trị có thể là độ dài, tỷ lệ phần trăm hoặc từ khoá overlap-join, kết hợp các phần trang trí khoảng trống thành các góc. Ví dụ: việc đặt rule-inset thành 5px sẽ thu hẹp tất cả các thành phần trang trí vào trong 5px:

.container {
  display: flex;
  flex-wrap: wrap;
  column-rule: 1px solid #2a2a45;
  column-rule-color: #60a5fa, #34d399, #a78bfa;
  rule-inset: 5px;
  row-rule: 1px solid #2a2a45;
}

Việc đặt rule-inset-cap thành 0px và rule-inset-junction thành 10px sẽ tạo ra các thành phần trang trí nằm sát các cạnh của vùng chứa nhưng được lồng vào nhau tại các giao điểm. Bản minh hoạ trang tổng quan được trình bày trước đó sử dụng phương pháp này và các phần lồng ghép sẽ tạo ảnh động khi di chuột:

.dashboard {
  rule-inset-cap: 0px;
  rule-inset-junction: 10px;
  transition: rule-inset-junction 0.4s;
}
.dashboard:hover {
  rule-inset-junction: 0px;
}

Chế độ hiển thị

Các thuộc tính column-rule-visibility-items và row-rule-visibility-items kiểm soát thời điểm các quy tắc xuất hiện dựa trên sự liền kề của các mục:

• normal (mặc định): Tuỳ thuộc vào loại vùng chứa.
• all: Các quy tắc xuất hiện trong mọi khoảng trống, kể cả khoảng trống.
• around: Các quy tắc xuất hiện ở bất cứ nơi nào có một hoặc nhiều mục liền kề.
• between: Các đường kẻ chỉ xuất hiện giữa 2 mục liền kề.

Cú pháp viết tắt rule-visibility-items sẽ đặt cả hai cùng một lúc. Nếu bạn đặt rule-visibility-items thành between, thì các quy tắc sẽ chỉ xuất hiện giữa các mục liền kề:

section {
  rule: 2px solid black;
  rule-visibility-items: between;
}

Mặt khác, việc đặt rule-visibility-items thành all sẽ cho thấy các quy tắc trong mọi khoảng trống, ngay cả những khoảng trống không có các mục liền kề:

section {
  rule: 2px solid black;
  rule-visibility-items: all;
}

Hãy bật/tắt giá trị trong bản minh hoạ trực tiếp để thấy sự khác biệt!

Tạo ảnh động cho đồ trang trí

Bạn có thể tạo ảnh động cho chiều rộng, màu sắc và phần lồng ghép của đường kẻ. Bạn có thể chuyển đổi chúng khi di chuột hoặc bất kỳ thay đổi trạng thái nào khác. Bản minh hoạ trang tổng quan được trình bày trước đó chuyển đổi màu sắc và phần lồng ghép theo quy tắc khi di chuột:

.dashboard {
  column-rule-color: #fbbf24, #34d399;
  rule-inset-junction: 10px;
  transition: column-rule-color 0.4s, rule-inset-junction 0.4s;
}

.dashboard:hover {
  column-rule-color: #3b82f6, #3b82f6;
  rule-inset-junction: 0px;
}

Bản minh hoạ

Tất cả bản minh hoạ trong bài đăng này đều có trên trang web minh hoạ của Edge.

Bài đăng trên blog về bản dùng thử dành cho nhà phát triển có thêm một số bản minh hoạ, bao gồm cả sân chơi tương tác, trình đơn bánh mì kẹp, bố cục sổ tay và bố cục theo kiểu tạp chí có lưới sudoku.

Các thay đổi kể từ khi bắt đầu dùng thử dành cho nhà phát triển

Nếu bạn đã thử dùng tính năng trang trí khoảng trống trong giai đoạn dùng thử dành cho nhà phát triển (Chrome 139), hãy lưu ý những thay đổi sau:

• Tính năng này được cung cấp theo mặc định; không cần cờ.
• Một số tên thuộc tính đã được cập nhật để phù hợp với quy cách mới nhất (ví dụ: column-rule-outset và row-rule-outset đã trở thành column-rule-inset và row-rule-inset).
• Đã thêm thuộc tính column-rule-visibility-items và row-rule-visibility-items.
• Đã thêm tính năng hỗ trợ ảnh động.

Sử dụng các khoảng trống trang trí ngay hôm nay

Khoảng trống trang trí hoạt động trong Chrome và Edge, bắt đầu từ phiên bản 149. Nếu khoảng trống trang trí chỉ mang tính trang trí, thì tính năng này là một tính năng cải tiến tăng dần; trong các trình duyệt không hỗ trợ, khoảng trống sẽ hiển thị bình thường mà không có phần trang trí nào. Một polyfill đang được phát triển cho những trình duyệt chưa hỗ trợ.

Báo cáo lỗi tại công cụ theo dõi lỗi của Chromium. Để biết thêm thông tin cơ bản, hãy xem quy cách CSS Gap Decorations.

Đường liên kết hữu ích

• Quy cách CSS Gap Decorations
• Bài đăng trên blog về bản dùng thử dành cho nhà phát triển (Chrome 139)
• Thông báo về Edge
• Giải thích trên GitHub