CSSギャップ装飾モジュール レベル1

1. はじめに

この節は規範的ではありません。

CSS Multicol 1 § 4 カラムギャップとルールは、 マルチカラムコンテナ内のカラム間に ルールを描画できるようにします。 この仕様はcolumn-rule-width、 column-rule-style、 column-rule-color プロパティに基づき、 行方向の同等プロパティの追加、他のコンテナレイアウトへの適用範囲の拡大、 そしてギャップ装飾を描画する位置や方法の高度な制御を可能にします。

1.1. 値の定義

本仕様は CSSプロパティ定義規約 ([CSS2]) および 値定義構文 ([CSS-VALUES-3]) に従います。 この仕様で定義されていない値型は「CSS Values & Units」[CSS-VALUES-3] で定義されています。 他のCSSモジュールとの組み合わせで、これらの値型の定義が拡張される場合があります。

各プロパティ固有の値に加え、 この仕様で定義されたすべてのプロパティは、プロパティ値として CSS全域キーワード も受け付けます。 可読性のため、明示的には繰り返し記載していません。

2. ギャップ

CSSの様々なレイアウト（ マルチカラムコンテナ、 フレックスコンテナ、 グリッドコンテナ、 グリッドレーンコンテナ など）は、 子ボックスを隣接させたうえで、その間に ギャップ（ ガターとも呼ばれる）を配置します。

本仕様においては、ギャップ、カラムギャップ、および 行ギャップ は、 コンテナの種類に応じて次のように定義されます：

マルチカラムコンテナ

カラム方向では、ギャップ （カラムギャップ）は、各 カラムボックス 間の ガター を指します（各 マルチカラムライン 内）。 詳細は [CSS-MULTICOL-1] 参照。 行方向では、ギャップ（行ギャップ）は、ガター （カラムボックスの各行間、column-height により設定）を指します。 詳細は [CSS-MULTICOL-2] も参照。

フレックスコンテナ

主軸 （例：row column-gap を持つ フレックスコンテナ）では、 ギャップ（カラムギャップ）は単一の フレックスライン内のアイテム間の ガターを指します。

交差軸 （例：row row-gap を持つ フレックスコンテナ）では、 ギャップ（行ギャップ）は隣接する フレックスライン間の ガターを指します。

グリッドコンテナ

行ギャップ および カラムギャップは、 それぞれ グリッド行および グリッド列 の間の ガターを指します。 詳細は CSS Grid Layout 1 § 10.1 ガター：row-gap, column-gap, gapプロパティを参照ください。

注: CSS Box Alignment 3 §8.1 行とカラムのガター：row-gapおよびcolumn-gapプロパティに規定されているとおり、 justify-contentや align-content によるアイテム間の追加スペースも ギャップサイズに含まれます。

3. ギャップ装飾

ギャップには、 ギャップ装飾 （隣接ボックス間に描画される線などの可視的な区切り）が含まれる場合があります。

ギャップ装飾はスペースを消費しません。 つまり、ギャップ装飾の有無や幅によって 他の配置は変化しません。 ギャップ装飾がそのギャップより幅広い場合は、 隣接ボックスが装飾と重なります。場合によっては装飾がコンテナボックス外側まではみ出すことがあります。

ギャップ装飾は コンテナのボーダーのすぐ上に描画されます。 スクロール可能なコンテナでは、 ボーダーや背景は固定されますが、 装飾はコンテナ内のアイテムと一緒にスクロールする必要があることに注意してください。

3.1. ジオメトリ

ギャップ装飾は ギャップ内に 一つ以上のギャップ装飾セグメントとして描画されます。

3.1.1. セグメント端点

セグメント端点とは、 ギャップの中心線上で ギャップ装飾セグメント が開始または終了しうる点のことです。 端点には2種類あります：

• 開始セグメント端点：セグメントが開始する点
• 終了セグメント端点：セグメントが終了する点

.grid-with-spans {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  background: rgb(255 255 128);
}
.grid > * {
  border: 1px dashed black;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 500px;
  background: rgb(255 255 128);
}
.flex > * {
  border: 1px dashed black;
}

.multi-column {
  column-count: 3;
  column-width: 100px;
  column-height: 50px;
  column-wrap: wrap;
  gap: 20px;
  background: rgb(255 255 128);
}

.multi-column > * {
  height: 100px;
  border: 1px dashed black;
}	

3.1.2. ギャップデコレーションセグメント

定義

ギャップデコレーションセグメントは、 始端セグメントエンドポイントと 終端セグメントエンドポイントをペアにして構成される。 各ギャップは ギャップデコレーションセグメントの集合体となる。

この節では、ギャップデコレーションセグメント s を s = [s.start, s.end] のように表現する。 ここで s.start はセグメントの始端セグメントエンドポイントとなり、 s.end は終端セグメントエンドポイントとなる。

UNION(s1, s2) を [s1.start, s2.end] とする。

ギャップデコレーションセグメントは、 その両端点間のすべてのギャップジャンクションについて、 ギャップ両側で、すべての直交するギャップをまたぐアイテムが 存在する場合、 スパニングアイテムによって挟まれている とみなされる。

あるギャップの文脈において、 セグメントエンドポイント a と b のペアが 不連続と見なされるのは、 ギャップと同じ幅の線分を a から b まで引いたとき、 その線分がコンテナ内の子アイテムと交差する場合である。

アルゴリズム

3.2. 交差点での分割動作: The column-rule-break, row-rule-break, and rule-break properties

これらのプロパティは、コンテナ内のアイテムによって形成される可視の「T」または「交差」交差点で、与えられたギャップ内のデコレーションをセグメントに分割する際の動作を設定します。 これらの値を適用するための詳細な手順は、ギャップデコレーションセグメントを決定する の手順に示されています。

none

ギャップデコレーションは可視の「T」または「交差」交差点で開始または終了しません。 代わりに、ギャップの一端から他端まで単一の連続したデコレーションが描画されます。

normal

動作はコンテナの種類に依存します。

グリッドコンテナ

ギャップデコレーションは可視の「T」交差点で開始および終了しますが、可視の「交差」交差点では継続します。

フレックスコンテナ

none と同じ動作をします。

マルチカラムコンテナ

column-rule-break では intersection と同じ動作をします。 row-rule-break では none と同じ動作をします。

intersection

ギャップデコレーションは可視の「T」および「交差」交差点で開始および終了します。

このショートハンドプロパティは、column-rule-break と row-rule-break を同じ値に設定します。

以下の例は、*-rule-break プロパティのさまざまな設定を示します。

.break-normal-grid {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: normal;
}

.break-none-grid {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: none;
}

.break-intersection-grid {
  display: grid;
  grid-template: repeat(4, 100px) / repeat(4, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: intersection;
}

.break-normal-multicol {
  column-width: 150px;
  column-height: 300px;
  gap: 1em;
  row-rule: 4px solid red;
  column-rule: 4px solid blue;
  rule-break: normal;
}

.break-intersection-multicol {
  column-width: 150px;
  column-height: 300px;
  gap: 1em;
  row-rule: 4px solid red;
  column-rule: 4px solid blue;
  rule-break: intersection;
}

.break-normal-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: normal;
}

各フレックス行は、アイテム間にそれぞれ独立したギャップを持つ点に注意してください。 これには2つの含意があります：

1. 隣接するフレックス行のギャップデコレーションは、ギャップが揃っていたとしても互いに独立しています。
2. none は視覚的には normal と同じ効果を持ちます。

.break-intersection-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 500px;
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-break: intersection;
}

3.3. ギャップデコレーションの端点の調整: rule-inset プロパティ

これらのプロパティは、ギャップデコレーションの開始点および終了点を、 通常デコレーションの開始・終了位置を決定する セグメントエンドポイントに対しオフセットするために利用できる。

エッジセグメントエンドポイントは、コンテナの内容端で生成されるセグメントエンドポイントである。

インテリアセグメントエンドポイントは、ギャップジャンクションで生成されるセグメントエンドポイントである。

百分率は 交差ギャップ幅 に対して解決されます。定義は以下の通り:

エッジセグメントエンドポイント

交差ギャップ幅は0です。

インテリアセグメントエンドポイント

交差ギャップ幅は、同じ次元で該当ギャップジャンクションのサイズです。 （行ギャップの場合は水平方向、列ギャップの場合は垂直方向）

注: 通常は、該当する交差ギャップまたは隣接ギャップの column-gap または row-gap の使用値に、 justify-content または align-content による追加スペースを加えたものとなる。 ただし、ギャップが 複数の区間で重なり交差・隣接する場合は、交差ギャップ幅 はその区間の和集合によって決定される。この例を参照されたい。

column-rule-edge-inset-start および row-rule-edge-inset-start プロパティは 始端セグメントエンドポイントのうち、エッジセグメントエンドポイントに適用されます。 column-rule-interior-inset-start および row-rule-interior-inset-start プロパティは 始端セグメントエンドポイントのうち、インテリアセグメントエンドポイントに適用されます。 これらのプロパティでは、正の値はギャップの軸方向に順方向に、負の値は逆方向にオフセットされます。

column-rule-edge-inset-end および row-rule-edge-inset-end プロパティは 終端セグメントエンドポイントのうち、エッジセグメントエンドポイントに適用されます。 column-rule-interior-inset-end および row-rule-interior-inset-end プロパティは 終端セグメントエンドポイントのうち、インテリアセグメントエンドポイントに適用されます。 これらのプロパティでは、正の値はギャップの軸方向に逆方向に、負の値は順方向にオフセットされます。

3.3.1. -start および -end ショートハンド

これらのショートハンドにより、作者は均一な非対称デコレーションを実現できます。

.inset-start-8px-end-0px {
  column-rule-inset-start: 8px;
  column-rule-inset-end: 0px;
}

これらのショートハンドプロパティは、対応する -edge- および -interior- プロパティの両方に同じ値を設定します。 たとえば column-rule-inset-start は column-rule-edge-inset-start と column-rule-interior-inset-start の両方に同じ値を設定します。

このショートハンドプロパティは、column-rule-inset-start および row-rule-inset-start を同じ値に設定します。

このショートハンドプロパティは、column-rule-inset-end および row-rule-inset-end を同じ値に設定します。

3.3.2. -edge- および -interior- ショートハンド

これらのショートハンドにより、作者は端と内部の交差点で異なる処理を行うことができます。

.inset-edge-0px-interior-negative-5px {
  column-rule-edge-inset: 0px;
  column-rule-interior-inset: -5px;
  column-rule-break: intersection;
}

これらのショートハンドは、対応する -start および -end プロパティを設定します。 たとえば、column-rule-edge-inset は column-rule-edge-inset-start および column-rule-edge-inset-end を両方設定します。 値が1つの場合は両方に適用され、2つ指定した場合は、1つ目が -start、2つ目が -end に設定されます。

このショートハンドプロパティは column-rule-edge-inset および row-rule-edge-inset を同じ値に設定します。

このショートハンドプロパティは column-rule-interior-inset および row-rule-interior-inset を同じ値に設定します。

3.3.3. ユニバーサルショートハンド

これらのショートハンドにより、作者はコンテナ全体で一様な処理を行えます。

.inset-0px {
  column-rule-inset: 0px;
  column-rule-break: intersection;
}

.inset-positive-5px {
  column-rule-inset: 5px;
  column-rule-break: intersection;
}

.inset-negative-5px {
  column-rule-inset: -5px;
  column-rule-break: intersection;
}

.inset-negative-50percent {
  column-rule-inset: -50%;
  column-rule-break: intersection;
}

これらのショートハンドは対応するエッジ・内部のstart/end値を設定します。 値の順序は:

edge-start edge-end? [/ interior-start interior-end?]?

省略された値は以下のように補完されます:

1. 内部値が省略された場合、エッジ値からコピーされます。
2. end値が省略された場合、対応するstart値からコピーされます。

このショートハンドプロパティは column-rule-inset および row-rule-inset を同じ値に設定します。

3.4. ギャップデコレーションの可視性: rule-visibility-items プロパティ

これらのプロパティは、空白エリアに隣接するギャップの部分に、 ギャップデコレーションセグメントを描画するかどうかを制御します。

all

隣接するアイテムの有無に関係なく、すべてのギャップセグメントに装飾を描画します。

around

2つの隣接エリアのうち、少なくとも一方にアイテムが配置されている場合、そのギャップセグメントに装飾を描画します。

between

2つの隣接エリアが両方ともアイテムで埋まっている場合、そのギャップセグメントに装飾を描画します。

このショートハンドプロパティは、column-rule-visibility-items および row-rule-visibility-items を同じ値に設定します。

.break-normal-with-all-grid {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-visibility-items: all;
}

.break-normal-with-around-grid {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-visibility-items: around;
}

.break-normal-with-between-grid {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, 100px);
  gap: 20px;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
  rule-visibility-items: between;
}

3.5. ギャップデコレーションの重なり: rule-overlap プロパティ

このプロパティは、重なりあったギャップデコレーションの描画順序を設定します。

row-over-column

行方向のデコレーションが列方向のデコレーションより上に描画されます。

column-over-row

列方向のデコレーションが行方向のデコレーションより上に描画されます。

.row-over-column {
  rule-overlap: row-over-column;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
}

.column-over-row {
  rule-overlap: column-over-row;
  row-rule: 6px solid red;
  column-rule: 6px solid blue;
}

3.6. 断片化

CSS Box Alignment 3 § 8.1 行および列のガター: the row-gap and column-gap properties specifies that gaps disappear where they coincide with a 断片化ブレーク. Because there is no gap in such locations, no ギャップ装飾 is drawn in them either.

4. 色、スタイル、幅

Property definitions in this section supersede the definitions of properties with the same names in [CSS-MULTICOL-1].

4.1. ギャップ装飾の色: The column-rule-color, row-rule-color, and rule-color properties

<line-color-list>          = <line-color-or-repeat>#

<auto-line-color-list>     = <line-color-or-repeat>#? ,
                             <auto-repeat-line-color> ,
                             <line-color-or-repeat>#?

<line-color-or-repeat>     = [ <color> | <repeat-line-color> ]

<repeat-line-color>        = repeat( [ <integer [1,∞]> ] , [ <color> ]# )

<auto-repeat-line-color>   = repeat( auto , [ <color> ]# )

These properties set the color of ギャップ装飾.

This shorthand property sets column-rule-color and row-rule-color to the same value.

4.2. ギャップ装飾のスタイル: The column-rule-style, row-rule-style, and rule-style プロパティ

<line-style-list>          = <line-style-or-repeat>#

<auto-line-style-list>     = <line-style-or-repeat>#? ,
                             <auto-repeat-line-style> ,
                             <line-style-or-repeat>#?

<line-style-or-repeat>     = [ <line-style> | <repeat-line-style> ]

<repeat-line-style>        = repeat( [ <integer [1,∞]> ] , [ <line-style> ]# )

<auto-repeat-line-style>   = repeat( auto , [ <line-style> ]# )

これらのプロパティは ギャップ装飾 のスタイルを設定します。 <line-style> の値は border-style と同様に適用されます。

この 省略プロパティ は column-rule-style と row-rule-style を同じ値に設定します。

4.3. ギャップ装飾の幅: The column-rule-width, row-rule-width, and rule-width プロパティ

<line-width-list>          = <line-width-or-repeat>#

<auto-line-width-list>     = <line-width-or-repeat>#? ,
                             <auto-repeat-line-width> ,
                             <line-width-or-repeat>#?

<line-width-or-repeat>     = [ <line-width> | <repeat-line-width> ]

<repeat-line-width>        = repeat( [ <integer [1,∞]> ] , [ <line-width> ]# )

<auto-repeat-line-width>   = repeat( auto , [ <line-width> ]# )

これらのプロパティは ギャップ装飾 の幅を設定します。負の値は許可されません。

この 省略プロパティ は column-rule-width と row-rule-width を同じ値に設定します。

4.4. ギャップ装飾の省略記法: The column-rule, row-rule, and rule properties

<gap-rule-list>        = <gap-rule-or-repeat>#

<gap-auto-rule-list>   = <gap-rule-or-repeat>#? ,
                         <gap-auto-repeat-rule> ,
                         <gap-rule-or-repeat>#?

<gap-rule-or-repeat>   = <gap-rule> | <gap-repeat-rule>

<gap-repeat-rule>      = repeat( <integer [1,∞]> , <gap-rule># )

<gap-auto-repeat-rule> = repeat( auto , <gap-rule># )

<gap-rule>             = <line-width> || <line-style> || <color>

これらの 省略プロパティ は、 column-rule-width、column-rule-style、および column-rule-color の値を設定するか、 それぞれ row-rule-width、row-rule-style、および row-rule-color の値を設定します。

この 省略プロパティ は column-rule と row-rule を同じ値に設定します。

4.5. 値のリストと repeat() 表記

この節の各プロパティはコンマ区切りの値のリストを受け取ります。 複数の値をこのように設定することで、与えられたコンテナー内で異なる ギャップ装飾 を指定できます。

column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: red, blue;

そのようなリストは repeat() 表記を含めることができます。 CSS Grid Layout 1 § 7.2.3 Repeating Rows and Columns: the repeat() notation と同様に、これらの表記は周期的なパターンを示す一連の ギャップ装飾 をより簡潔に記述することを可能にします。

repeat() 構文の一般的な形は、概ね次のとおりです

repeat( [ <integer [1,∞]> | auto ] , <value># )

repeat() の最初の引数は繰り返し回数を指定します。

<integer>

整数リピータを指定します。 整数リピータ は 第2引数の値のリストを展開し、最初の引数で指定された回数だけ繰り返します。

作者は次のように書くことができます:

column-rule-color: gray, red, blue, red, blue, red, blue, gray;

または、次のように短く書くことができ、同じ色の並びを生成します:

column-rule-color: gray, repeat(3, red, blue), gray;

auto

auto リピータを指定します。 auto リピータ は、 リストの他の部分から値が割り当てられないギャップを埋めるために使用されます。 与えられた値のリスト内で repeat() が auto リピータであってよいのは最大で1つです。

前の例の続きとして、作者が最終的なレイアウトで何列になるか分からない場合、次のように書くかもしれません:

column-rule-color: gray, repeat(auto, red, blue), gray;

これにより最初と最後の列のギャップにはグレーの装飾が付き、 間の列のギャップには赤と青の装飾が交互に付きます。

repeat() の第2引数は、その repeat() が出現するプロパティで受け入れられる値の コンマ区切りリストです。

4.6. ギャップへのギャップ装飾値の割り当て

ギャップ装飾は、割り当てされる前に、ガターの折りたたみが適用されます。 ある一組の 折りたたまれたガター はちょうど1つの ギャップ装飾 を消費します; 次の ギャップ装飾 は次のガター（または一組の 折りたたまれたガター）に適用されます。 したがって、折りたたまれたガター は装飾の目的上、単一の ギャップ として扱われます。

4.7. リスト値の補間

repeat() の値や、rule-color や rule-width などの値のリストを補間する際、補間は2段階で行われます。

1. 展開: すべての整数リピータを、その等価な値のリストへ展開します。
2. リスト補間: 展開されたリストに repeatable list 補間アルゴリズムを適用し、各アイテム同士を補間します。

@keyframes example {
  from { column-rule-width: 10px; }
  to   { column-rule-width: 20px, 40px; }
}

From:   10px, 10px
At 50%: 15px, 25px
To:     20px, 40px

@keyframes example {
  from { column-rule-width: repeat(2, 5px, 10px); }
  to   { column-rule-width: repeat(2, 15px, 20px); }
}

From:    5px, 10px,  5px, 10px
At 50%: 10px, 15px, 10px, 15px
To:     15px, 20px, 15px, 20px

@keyframes example {
  from { column-rule-width: repeat(2, 10px, 20px); }
  to   { column-rule-width: 20px; }
}

From:   10px, 20px, 10px, 20px
At 50%: 15px, 20px, 15px, 20px
To:     20px, 20px, 20px, 20px

@keyframes example {
  from { column-rule-width: repeat(2, 10px, 20px); }
  to   { column-rule-width: 20px, 30px; }
}

From:   10px, 20px, 10px, 20px
At 50%: 15px, 25px, 15px, 25px
To:     20px, 30px, 20px, 30px

@keyframes example {
  from { column-rule-width: 10px, repeat(auto, 20px), 30px }
  to   { column-rule-width: 20px, repeat(auto, 40px), 40px }
}

From:   10px, repeat(auto, 20px), 30px
At 50%: 15px, repeat(auto, 30px), 35px
To:     20px, repeat(auto, 40px), 40px

@keyframes example {
  from { column-rule-width: 10px, 20px, repeat(auto, 20px), 30px }
  to   { column-rule-width: 20px, 30px, repeat(auto, 40px, 50px), 40px }
}

From:   10px, 20px, repeat(auto, 20px, 20px), 30px
At 50%: 15px, 25px, repeat(auto, 30px, 35px), 35px
To:     20px, 30px, repeat(auto, 40px, 50px), 40px

@keyframes example {
  from { column-rule-width: 10px, repeat(auto, 20px) }
  to   { column-rule-width: 20px, 30px, repeat(auto, 40px, 50px) }
}

@keyframes example {
  from { column-rule-width: 10px, repeat(auto, 20px), 30px }
  to   { column-rule-width: 20px, repeat(auto, 40px), 40px, 50px }
}

@keyframes example {
  from { column-rule-width: 10px, repeat(auto, 20px), 30px }
  to   { column-rule-width: 20px }
}

4.8. シリアライズ

column-rule、 row-rule、 および rule の 略式プロパティは、ロングハンドプロパティが リピータ整列されている場合に限り、そのロングハンドから シリアライズされます。 ロングハンドが リピータ整列でない場合、 略式プロパティのシリアライズ結果は空文字列となります。

column-rule: 1px solid red, 2px dashed green, 3px dotted blue;

column-rule-width: 1px, 2px, 3px;
column-rule-style: solid, dashed, dotted;
column-rule-color: red, green, blue;

column-rule: 1px solid red, repeat(2, 2px dashed green);

column-rule-width: 1px, repeat(2, 2px);
column-rule-style: solid, repeat(2, dashed);
column-rule-color: red, repeat(2, green);

column-rule: repeat(auto, 1px solid red, 2px dashed green);

column-rule-width: repeat(auto, 1px, 2px);
column-rule-style: repeat(auto, solid, dashed);
column-rule-color: repeat(auto, red, green);

column-rule: repeat(auto, 1px solid red, 2px dashed green);
column-rule-width: repeat(auto, 3px, 4px, 5px);

column-rule-width: repeat(auto, 3px, 4px, 5px);
column-rule-style: repeat(auto, solid, dashed);
column-rule-color: repeat(auto, red, green);

column-rule: repeat(2, 1px solid red, 2px dashed green);
column-rule-style: dashed, dotted, solid;

column-rule-width: repeat(2, 1px, 2px);
column-rule-style: dashed, dotted, solid;
column-rule-color: repeat(2, red, green);

column-rule: repeat(2, 1px solid red, 2px dashed green);
column-rule-color: repeat(4, red, cyan);

column-rule-width: repeat(2, 1px, 2px);
column-rule-style: repeat(2, solid, dashed);
column-rule-color: repeat(4, red, cyan);

5. 謝辞

本仕様は、多くの方々からの貢献とフィードバックによって成り立っています（以下の方々を含む）: Ahmad Shadeed、 Alison Maher、 Benoît Rouleau、 Elika Etemad、 Ian Kilpatrick、 Javier Contreras Tenorio、 Josh Tumath、 Kurt Catti-Schmidt、 Lea Verou、 Oliver Williams、 Rachel Andrew、 Sam Davis Omekara Jr.、 Sebastian Zartner、 Tab Atkins-Bittner、 そして CSS ワーキンググループのメンバー各位。 Gap Decorations の最初の提案を起草した Mats Palmgren 氏に特別な謝意を表します。

6. プライバシーに関する考慮事項

本仕様について新たなプライバシー上の考慮事項は報告されていません。

7. セキュリティに関する考慮事項

本仕様について新たなセキュリティ上の考慮事項は報告されていません。

8. 変更点

8.1. 2025年4月17日作業草案からの変更点

• トラックの折りたたみによりギャップが一致する場合の挙動を明記しました。 (Issue 11814)
• rule-paint-order を rule-overlap にリネームしました。 (Issue 12540)
• 交差判定の定義を gutter に基づく形に更新しました。 (Issue 12084)
• 末尾のギャップ装飾割り当ての値順を先頭から順に使うよう修正しました。 (Issue 12527)
• リピータを含む値の補間挙動を明記しました。 (Issue 12431)
• column-rule-width が column-rule-style の値が none または hidden の場合、計算値が 0 になる特例を削除しました。 (Issue 11494)
• rule-outset プロパティを rule-inset に変更し、関連プロパティを導入しました。 (Issue 12603、 Issue 12848、 Issue 8402)
• inset 関連プロパティの初期値を 0 に変更し、 auto キーワードを削除しました。 (Issue 13137)
• フラグメントブレークによってギャップが抑制された場合、ギャップ装飾が描画されないことを明記しました。 (Issue 11520)
• トラック折りたたみによりギャップが一致する際の挙動を更新しました。 (Issue 11814)
• ロングハンドからの略式プロパティのシリアライズに関するセクションを追加しました。 (Issue 12201)
• color、width、style 系ロングハンドプロパティを空白区切りではなくカンマ区切りリストに変更。 (Issue 12201)
• 空のグリッド領域に隣接するギャップ装飾のセクションを追加しました。 (Issue 12602)
• alignment space もギャップサイズに寄与することを明確化しました。 (Issue 12922)
• break の spanning-item 値を normal にリネームしました。 (Issue 13127)
• 仕様変更を反映し例を更新しました。
• WPTスイートへのリンクを追加しました。
• 謝辞セクションを追加しました。