CSSで区切り線を描く新しい方法: `CSS Gap Decorations`

 (blogs.windows.com)
5 ポイント 投稿者 GN⁺ 2025-03-24 | 1件のコメント | WhatsAppで共有
  • Webページでセクション間に区切り線を追加するのは、コンテンツを明確に整理し、可読性を高める一般的なデザイン手法
  • border のような既存のCSS手法を使って区切り線を追加できるが、サイズ変更や追加コードが必要になるなどの制約がある
  • CSS Gap Decorations は column-rule や row-rule などのプロパティを追加することで、こうした問題を解決する

既存のCSS区切り線手法と限界

  • border プロパティは区切り線を追加する一般的な方法だが、次のような問題が起こりうる
    • border を追加すると要素のサイズが変わることがある
    • 最初と最後の要素について追加コードを書く必要がある
    • Flexboxレイアウトで折り返しが発生すると、区切り線が全体領域を覆えない
  • ::before および ::after 疑似要素を使って区切り線を追加できるが、次のような限界がある
    • 最初と最後の要素について追加コードが必要
    • 複雑な絶対配置コードが必要
  • グリッドコンテナに背景色を適用し、項目に背景色を設定して区切り線を擬似的に表現することもできる
    • 区切り線の長さを調整できない
    • 空のセルがあると背景色が見えてしまう
    • 項目がセルを埋めない場合、背景色が見えてしまう
    • ページ背景が単色でない場合は機能しない
  • 複数カラムレイアウトでは column-rule プロパティを使って区切り線を追加できるが、次のような制限がある
    • 複数カラムレイアウトでしか動作しない
    • コンテンツのインライン方向を制御できない

CSS Gap Decorations の提案

  • CSS Gap Decorations は上記の問題を解決するための新しい提案
  • 主な提案内容
    • column-rule プロパティをグリッドおよびFlexboxレイアウトにも適用できるよう拡張
    • 新しい row-rule プロパティを導入
    • コンテナの各部分ごとに異なる区切り線を設定可能
  • 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;  
}
  • 太さや色が異なる区切り線も設定できる 
    .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;  
}
  • 交差点での区切り線の挙動も制御できる
    • *-rule-break および *-rule-outset プロパティが使える
    • 交差点で区切り線の開始位置と終了位置を制御できる
    • 区切り線の長さやオフセットを細かく調整できる

提案へのフィードバック募集

  • CSS Gap Decorations の提案は、開発者からのフィードバックをもとに改善される予定
  • 詳細は 公式 explainer で確認できる
  • フィードバックはGitHub Issueとして提出できる
  • 特に交差点での区切り線の挙動に関するフィードバックを歓迎

関連記事

1件のコメント

 
GN⁺ 2025-03-24
Hacker Newsのコメント

  • 新しい擬似要素が欲しい: .container:gap { background-color: red; }

    • 点線やグラデーションのような、もっと凝った背景を作れる
    • { padding: 2px } を使って区切り線の端に余白を設定できる
    • :gap-horz と :gap-vert を使って、垂直方向と水平方向の間隔を別々に設定できる
    • .container:gap:nth-gap(2n) { color: blue; } を使えば交互の色にできる

  • 委員会方式の設計は最善ではないが、非ネイティブ話者としては提案されているプロパティ名が意味をうまく伝えていない

    • たとえば、定義しているのは間隔なのに、実際にしているのは区切り線を描くことだ

  • リサイズ可能なパネルのユースケースも考慮してほしい

    • 実装が完全にユーザー空間側だとしても、スタイル可能な区切りがイベントを受け取れるなら便利だろう

  • ボーダーを追加すると要素のサイズが変わるが、それは望ましくない場合がある

    • この問題は10年以上前から解決されている
    • みんなのCSSファイルの1行目は * { box-sizing: border-box; } なのではと思う
    • ボーダーを幅の内側に配置すれば、より合理的に考えられる

  • 面白い。最近はQMLで主にUI作業をしていて、そこではほぼあらゆる問題が扱われている

    • 数か月前、カレンダービューで項目間の間隔を使って背景を見せることでグリッド線を実装した
    • レイアウトの spacing プロパティを使い、GPUに仕事をさせている

  • 悪くないアイデアだが、10年くらい前ならもっと有用だった気がする

    • 現代のCSSなら、単一のセレクタとプロパティで区切り線を処理できる
    • .things .thing:not(:last-child) { border-bottom: 1px solid gray; } のような形でできる
    • 記事でもこの点には触れているが、エッジケースの頻度を過大評価しているように思える

  • 長いこと悩ましい問題だった。誰かが何かに取り組んでいるのを見るのはいいことだ

    • これは単に display: grid の話であって、幅が固定されていない要素には当てはまらない
    • 小さい画面では、リンク間の | が1行目の末尾や2行目の先頭に出てしまうことがある

  • ドイツのデザイナーのことわざを思い出す: "デザイナーはもうアイデアがなくなると、何本か線を足す"

    • コンテンツを明確に区別する方法がないとき、人は線を追加し始める

  • この問題はよく起きるし、<hr/> より良い方法が欲しい

    • テーブル行や複数カラムでは機能しない

  • これが通るといいな……AIを使ってflexboxに関する自分の乏しい知識を補えたのはありがたかったが、こちらは本当の解決策のように感じる