Cách mới để vẽ đường phân cách trong CSS: `CSS Gap Decorations`

 (blogs.windows.com)
5 điểm bởi GN⁺ 2025-03-24 | 1 bình luận | Chia sẻ qua WhatsApp
  • Việc thêm đường phân cách giữa các phần trên trang web là một kỹ thuật thiết kế phổ biến giúp sắp xếp nội dung rõ ràng và tăng khả năng đọc
  • Có thể thêm đường phân cách bằng các kỹ thuật CSS hiện có như border, nhưng chúng vẫn có những hạn chế như thay đổi kích thước, cần thêm mã, v.v.
  • CSS Gap Decorations giải quyết các vấn đề này bằng cách bổ sung các thuộc tính như column-rule và row-rule

Các kỹ thuật đường phân cách CSS hiện có và giới hạn của chúng

  • Thuộc tính border là cách phổ biến để thêm đường phân cách, nhưng có thể phát sinh các vấn đề sau
    • Việc thêm border có thể làm thay đổi kích thước phần tử
    • Cần viết thêm mã cho phần tử đầu tiên và cuối cùng
    • Khi xuống dòng trong bố cục Flexbox, đường phân cách có thể không phủ kín toàn bộ vùng
  • Có thể dùng phần tử giả ::before và ::after để thêm đường phân cách, nhưng cũng có những hạn chế sau
    • Cần thêm mã cho phần tử đầu tiên và cuối cùng
    • Cần mã định vị tuyệt đối phức tạp
  • Có thể mô phỏng đường phân cách bằng cách áp dụng màu nền cho grid container và đặt màu nền cho các mục
    • Không thể điều chỉnh độ dài đường phân cách
    • Nếu có ô trống, màu nền sẽ lộ ra
    • Nếu mục không lấp đầy ô, màu nền sẽ lộ ra
    • Không hoạt động nếu nền trang không phải màu đơn
  • Có thể thêm đường phân cách bằng thuộc tính column-rule trong bố cục đa cột, nhưng vẫn có các giới hạn sau
    • Chỉ hoạt động trong bố cục đa cột
    • Không thể kiểm soát hướng inline của nội dung

Đề xuất CSS Gap Decorations

  • CSS Gap Decorations là một đề xuất mới nhằm giải quyết các vấn đề nêu trên
  • Các điểm đề xuất chính
    • Mở rộng thuộc tính column-rule để có thể áp dụng cho bố cục grid và flexbox
    • Giới thiệu thuộc tính mới row-rule
    • Cho phép thiết lập đường phân cách khác nhau cho từng phần của container
  • Có thể thay đổi màu đường phân cách bằng thuộc tính row-rule-color 
    .alternate-red-blue {  
  display: grid;  
  grid-template: repeat(auto-fill, 30px) / repeat(6, 100px);  
  gap: 10px;  
  row-rule: 1px solid;  
  row-rule-color: red blue;  
}
  • Có thể thiết lập các đường phân cách với độ dày và màu sắc khác nhau 
    .varying-widths {  
  display: grid;  
  grid-template: repeat(auto-fill, 30px) / repeat(6, 100px);  
  row-gap: 10px;  
  row-rule: 5px solid black / repeat(auto, 1px solid #666) / 3px solid black;  
}
  • Có thể kiểm soát cách đường phân cách hoạt động tại các điểm giao nhau
    • Có thể dùng các thuộc tính *-rule-break và *-rule-outset
    • Có thể kiểm soát vị trí bắt đầu và kết thúc của đường phân cách tại điểm giao nhau
    • Có thể tinh chỉnh chi tiết độ dài và độ lệch của đường phân cách

Yêu cầu phản hồi về đề xuất

  • Đề xuất CSS Gap Decorations sẽ được cải thiện dựa trên phản hồi từ nhà phát triển
  • Có thể xem thông tin chi tiết trong explainer chính thức
  • Có thể gửi phản hồi qua GitHub issue
  • Đặc biệt hoan nghênh phản hồi về cách đường phân cách hoạt động tại các điểm giao nhau

Bài viết liên quan

1 bình luận

 
GN⁺ 2025-03-24
Ý kiến trên Hacker News

  • Muốn có một pseudo-element mới: .container:gap { background-color: red; }

    • Có thể tạo nền đẹp hơn như đường chấm hoặc gradient
    • Có thể dùng { padding: 2px } để đặt khoảng trống ở cuối phần phân cách
    • Có thể dùng :gap-horz và :gap-vert để thiết lập riêng khoảng cách dọc và ngang
    • Có thể dùng .container:gap:nth-gap(2n) { color: blue; } để có màu xen kẽ

  • Thiết kế bởi ủy ban không phải lúc nào cũng là tốt nhất, nhưng với tư cách là người không phải bản ngữ, tên thuộc tính được đề xuất không truyền tải rõ ý nghĩa

    • Ví dụ, nó định nghĩa khoảng cách nhưng lại dùng để vẽ đường phân cách

  • Mong rằng họ đã cân nhắc trường hợp sử dụng của các panel có thể điều chỉnh kích thước

    • Ngay cả khi phần triển khai hoàn toàn nằm ở phía userland, sẽ rất hữu ích nếu phần phân cách có thể được style nhận event

  • Khi thêm border thì kích thước của phần tử thay đổi, điều này có thể không mong muốn

    • Vấn đề này đã được giải quyết hơn 10 năm nay
    • Tôi nghĩ dòng đầu tiên trong file CSS của mọi người chẳng phải là * { box-sizing: border-box; } sao
    • Có thể nghĩ hợp lý hơn bằng cách để border nằm bên trong chiều rộng

  • Khá thú vị. Dạo này tôi chủ yếu làm UI bằng QML, và nó xử lý gần như mọi vấn đề kiểu này

    • Vài tháng trước, tôi đã triển khai grid line trong chế độ xem lịch bằng cách để nền lộ ra qua khoảng cách giữa các mục
    • Chỉ cần dùng thuộc tính "spacing" của layout và để GPU làm phần việc còn lại

  • Ý tưởng ổn, nhưng có lẽ nó sẽ hữu ích hơn vào khoảng 10 năm trước

    • Với CSS hiện đại, có thể xử lý phần phân cách chỉ bằng một selector và thuộc tính
    • Có thể làm theo kiểu .things .thing:not(:last-child) { border-bottom: 1px solid gray; }
    • Bài viết có nhắc đến điểm này, nhưng có vẻ đã đánh giá quá cao tần suất của các trường hợp rìa

  • Đây đã là một vấn đề gây đau đầu suốt thời gian dài. Thật tuyệt khi thấy ai đó đang làm gì đó với nó

    • Đây chỉ là display: grid, nên không áp dụng cho các phần tử có chiều rộng không cố định
    • Trên màn hình nhỏ, dấu | giữa các liên kết có thể xuất hiện ở cuối dòng đầu hoặc đầu dòng thứ hai

  • Tôi nhớ đến một câu ngạn ngữ của giới thiết kế Đức: "Khi nhà thiết kế không còn ý tưởng nào nữa, họ sẽ thêm vài đường kẻ"

    • Người ta bắt đầu thêm đường kẻ khi không còn cách nào để phân tách nội dung một cách rõ ràng

  • Tôi gặp vấn đề này khá thường xuyên và muốn có cách tốt hơn <hr/>

    • Nó không hoạt động với các hàng trong bảng hoặc bố cục nhiều cột

  • Mong là cái này sẽ được thông qua... Việc dùng AI để vá lỗ hổng kiến thức của tôi về flexbox đúng là một ân huệ, nhưng cái này mới cho cảm giác là giải pháp thực sự