Trang này được dịch bởi Cloud Translation API.

Một cách mới để tạo kiểu khoảng trống trong CSS

Sam Davis Omekara

Patrick Brosset

Ngày xuất bản: 11 tháng 6 năm 2025

Tạm biệt các thủ thuật về đường viền và phần tử giả, chào đón các trang trí khoảng trống CSS.

Nhóm Microsoft Edge rất vui mừng được thông báo rằng các trang trí khoảng trống CSS, một cách mới để tạo kiểu khoảng trống giữa các mục trong bố cục flex, lưới và nhiều cột, hiện đã có sẵn để nhà phát triển dùng thử trong Chrome và Edge 139!

Hãy dùng thử và chia sẻ ý kiến phản hồi của bạn để giúp định hình tương lai của API này.

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

Vấn đề

Việc tạo khoảng trống kiểu trong các thành phần trên giao diện người dùng như lịch, thẻ hoặc lưới dữ liệu có thể cải thiện đáng kể khả năng đọc và tăng tính thẩm mỹ tổng thể. Tuy nhiên, để đạt được hiệu ứng này trong bố cục lưới và flexbox, theo truyền thống, bạn phải sử dụng các giải pháp xử lý khó khăn với đường viền, phần tử giả hoặc thủ thuật nền. Các giải pháp này có thể gây ra vấn đề vì một số lý do.

Không trực quan: Các lớp này đưa ra các phần phụ thuộc cấu trúc để tạo kiểu hình ảnh, điều này trái với các nguyên tắc của HTML ngữ nghĩa.
Không hỗ trợ tiếp cận: Các thành phần này thường yêu cầu thêm các phần tử DOM, điều này có thể ảnh hưởng đến các công nghệ hỗ trợ, chẳng hạn như trình đọc màn hình.
Khó duy trì: Các thành phần này đòi hỏi logic bố cục phức tạp và khiến việc định kiểu nhất quán trên các thành phần trở nên khó khăn hơn.
Gây hại cho hiệu suất: Các giải pháp này có thể thêm các phần tử không cần thiết vào DOM, dẫn đến các vấn đề về hiệu suất.

Mặc dù nền tảng web đã hỗ trợ các khoảng trống định kiểu bằng thuộc tính column-rule, nhưng tính năng này hiện chỉ giới hạn ở các bố cục nhiều cột. Các nhà phát triển web từ lâu đã yêu cầu một cách nhất quán để tạo kiểu khoảng trống trên các loại bố cục có liên quan khác, chẳng hạn như lưới và flexbox.

Giải pháp: Trang trí khoảng trống CSS

Đồ trang trí khoảng trống mở rộng thuộc tính column-rule để hoạt động với các loại bố cục khác như lưới và flexbox, đồng thời giới thiệu một thuộc tính row-rule mới để bổ sung cho thuộc tính này. Điều này mang lại tính nhất quán và khả năng tuỳ chỉnh mới cho cách tạo kiểu khoảng trống trên nhiều loại bố cục.

Trang trí khoảng trống CSS mang lại các lợi ích sau:

Không ảnh hưởng đến bố cục: Các phần trang trí chỉ mang tính chất hình ảnh. Các thành phần này không ảnh hưởng đến bố cục hoặc khoảng cách, vì vậy, bạn có thể sử dụng các thành phần này mà không lo phá vỡ các thiết kế hiện có.
Cú pháp lặp lại: Tương tự như CSS Grid, bạn có thể sử dụng cú pháp repeat() để tạo các mẫu trang trí ở nhiều phần của vùng chứa, cho phép thiết kế phong phú và nhất quán với CSS tối thiểu.
Mã đánh dấu rõ ràng hơn: Không cần thêm phần tử hoặc phần tử giả – chỉ cần trực tiếp tạo khoảng cách kiểu.
Khả năng tuỳ chỉnh: Các thuộc tính CSS mới như *rule-break, *rule-outset và gap-rule-paint-order cho phép nhiều tuỳ chọn tuỳ chỉnh hơn ngoài việc tạo kiểu quy tắc truyền thống về chiều rộng, kiểu và màu sắc.

Với các trang trí khoảng trống CSS, bạn có thể dễ dàng tạo bố cục trang khác biệt về mặt hình ảnh và dễ duy trì hơn bao giờ hết.

Trang trí khoảng trống trong thực tế

Để chơi với các trang trí khoảng trống CSS ngay hôm nay, hãy sử dụng một trình duyệt hỗ trợ các trang trí này: Edge hoặc Chrome, bắt đầu từ phiên bản 139, rồi bật/tắt cờ Enable Experimental Web Platform Features (Bật tính năng thử nghiệm cho nền tảng web) bằng cách chuyển đến edge://flags hoặc chrome://flags.

Sân chơi tương tác dành cho nhà phát triển

Để thử các loại bố cục khác nhau có hỗ trợ trang trí khoảng trống CSS và tất cả các thuộc tính mới, hãy thử sân chơi tương tác dành cho nhà phát triển của chúng tôi.

Sân chơi.

Trình đơn bánh mì kẹp

Giao diện người dùng để tuỳ chỉnh bánh mì kẹp thịt có các đường kẻ giữa các phần.

Bản minh hoạ trình đơn bánh mì cho biết cách sử dụng thuộc tính column-rule-break: intersection để phá vỡ các trang trí khoảng trống cột tại mỗi giao lộ hiển thị với khoảng trống hàng.

Bản minh hoạ cũng sử dụng column-rule-offset: -15px để điều chỉnh chiều dài của các phần trang trí, kéo chúng ra khỏi các cạnh của mỗi giao lộ.

Sổ ghi chú

Bản minh hoạ trông giống như một trang trong cuốn sổ tay có dòng kẻ.

Trong màn hình minh hoạ cuốn sổ ghi chú, row-rule-break: none đảm bảo rằng các phần trang trí hàng không bị gián đoạn tại các giao lộ – chúng chạy liên tục từ trái sang phải của vùng chứa. Mặt khác, column-rule-break: spanning-item đảm bảo rằng các phần trang trí cột không được vẽ phía sau các mục span – các phần trang trí này bắt đầu và dừng tại các mục span tạo thành một giao lộ T hiển thị.

Thuộc tính row-rule sử dụng hàm repeat() để có quyền kiểm soát chính xác cách áp dụng các phần trang trí khoảng trống trên các phần khác nhau của bố cục. Điều này cho phép tạo một mẫu kiểu trong đó các quy tắc hàng bị ẩn trong tiêu đề và chân trang, dày hơn xung quanh nội dung chính và tinh tế hơn ở những nơi khác.

Tin tức hằng ngày về CSS

Bố cục kiểu tạp chí.

Bản minh hoạ Tin tức CSS hằng ngày sử dụng bố cục kiểu tạp chí và xác định các trang trí khoảng trống CSS trên nhiều vùng chứa lưới và flexbox.

Hãy chú ý đến trò chơi Sudoku ở bên phải. Trò chơi này sử dụng lưới 9x9 và mẫu lặp lại để vẽ các đường mảnh và dày giữa các hàng và cột:

.sudoku {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 6px;
  column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
  column-rule-style: solid;
  column-rule-color: var(--secondary);
  row-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
  row-rule-style: solid;
  row-rule-color: var(--secondary);
}

Đề nghị phản hồi

Chúng tôi rất vui khi bạn dùng thử tính năng trang trí khoảng trống CSS. Chúng tôi cho rằng tính năng này sẽ giải quyết được một vấn đề phổ biến. Chúng tôi rất mong nhận được ý kiến phản hồi của bạn về tính năng này để có thể tinh chỉnh tính năng sao cho phù hợp với nhu cầu của bạn.

Tính năng trang trí khoảng trống CSS vẫn đang được triển khai trong Chromium. Nếu bạn thử nghiệm tính năng này, hãy lưu ý rằng chúng tôi vẫn đang tích cực phát triển tính năng này và bạn có thể gặp phải các trường hợp tính năng này không hoạt động như mong đợi. Một số giới hạn hiện tại liên quan đến việc tạo ảnh động cho các phần trang trí khoảng trống và sử dụng một số lượng rất lớn các kênh lưới.

Nếu bạn phát hiện lỗi hoặc có ý kiến về tính năng này, hãy chia sẻ ý kiến phản hồi bằng cách mở một lỗi Chromium mới.

Một cách mới để tạo kiểu khoảng trống trong CSS Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.