CSS Gap Decorations が Chrome 149 で利用可能に

715文字
4分
編集
#Chrome #CSS #Edge

Chrome 149 および Edge 149 から、CSS Gap Decorations がデフォルトで利用可能になった。grid・flexbox・マルチカラムの gap 間を、個々の要素への border や疑似要素、背景のハックなしで装飾できる。装飾は純粋に視覚的であり、既存のレイアウト計算には影響しない。マルチカラムでは従来どおり column-rule の挙動が維持され、grid と flexbox では column-rule に加えて水平方向の gap 用に row-rule が使える。

開発者は gap 用の装飾専用 DOM を減らし、アクセシビリティツリーへの不要なノード追加やレスポンシブ時のセレクタ保守を避けやすくなる。装飾が主目的ならプログレッシブエンハンスメントとして扱え、未対応ブラウザでは gap だけが表示される。非対応ブラウザ向けのポリフィルは開発中である。Chrome 139 の開発者トライアル時点からは、フラグ不要の既定有効化、column-rule-outset / row-rule-outset から column-rule-inset / row-rule-inset への名称変更、column-rule-visibility-items / row-rule-visibility-items の追加、アニメーション対応が入った。

#column-rule と row-rule

column-rule は grid と flexbox のコンテナでも受け付ける。row-rule は行方向の gap を装飾する。rule ショートハンドで両方をまとめて指定できる。幅・スタイル・色は column-rule-width など個別プロパティでも、カンマ区切りで gap ごとに異なる値を渡せる。

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

split screen のデモ

#repeat() と gap ごとのスタイル

row-rule-width や column-rule-color などに repeat() を使うと、grid のトラック定義と同様に gap へ装飾を短く繰り返し指定できる。repeat() を使わずカンマ区切りの値列だけでも、gap 順にスタイルが循環する。

css
.settings-panel {
  row-rule: 1px solid #243352;
  row-rule-width: repeat(2, 1px), 4px;
}
css
.calendar {
  row-rule-width: 2px, 1px;
  row-rule-style: solid, dashed;
  row-rule-color: #e8e4df, #f0ece7;
}

settings view のデモ、calendar week のデモ

#rule-break と rule-inset

column-rule-break と row-rule-break（rule-break ショートハンドあり）は gap 交差での線の扱いを制御する。normal はコンテナ種別に依存し、none は交差を通過して連続し、intersection は行と列の gap が交わる位置で途切れる。

column-rule-inset と row-rule-inset（rule-inset ショートハンドあり）は gap 内での装飾の寄せを長さ・パーセント・overlap-join で指定する。column-rule-inset-cap は交差のない端、column-rule-inset-junction は他の gap と交わる端向けである。

css
.dashboard {
  column-rule-style: solid;
  column-rule-color: #fbbf24, #34d399;
  column-rule-width: 1px, 3px;
  column-rule-break: intersection;
  row-rule: 1px solid #1e1e36;
}
css
.dashboard {
  rule-inset-cap: 0px;
  rule-inset-junction: 10px;
  transition: rule-inset-junction 0.4s;
}
.dashboard:hover {
  rule-inset-junction: 0px;
}

dashboard grid のデモ

#rule-visibility-items とアニメーション

column-rule-visibility-items と row-rule-visibility-items（rule-visibility-items ショートハンドあり）は、隣接アイテムの有無に応じて線を出す条件を決める。all は空の gap も含めすべて、around は 1 つ以上隣接がある gap、between は 2 つ隣接がある gap のみである。

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

幅・色・inset はアニメーション可能であり、ホバーなどの状態変化に transition を載せられる。

css
.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;
}

article grid のデモ、interactive playground

#参考文献