Box-decoration-break プロパティ（Chrome 130）

Rachel Andrew

公開日: 2024 年 10 月 11 日

Chrome 130 では、値が clone の box-decoration-break CSS プロパティが使用可能になり、インラインとブロックのフラグメンテーションがサポートされます。この記事では、その理由と使用方法について説明します。

インラインでの断片化

インラインの断片化は、インライン要素（テキストの文字列など）が複数の行にまたがって分割される場合に発生します。インライン要素にはボックスがありますが、通常は、要素に背景や境界線を追加しようとしない限り、考慮する必要はありません。次の例では、border-radius の背景がスパンに追加されています。境界線は文字列の先頭と末尾でのみカーブします。

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
}

box-decoration-break の初期値は slice であり、ボックスに対してこのスライス効果をもたらします。ただし、新たにサポートされた box-decoration-break: clone では、各行の先頭と末尾が丸い枠線で囲まれます。

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
  box-decoration-break: clone;
}

ブロックの断片化

ブロックの断片化は、複数列のレイアウトでコンテンツを列に分割した場合や、印刷時にコンテンツがページに分割された場合に発生します。

次の例では、コンテンツが列に分割され、各段落に境界線が付いています。初期値を slice にすると、ボックスは列の下部と上部でスライスされます。

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
}

box-decoration-break: clone では、ボックスが断片化されると、各断片が境界でラップされます。

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
  box-decoration-break: clone;
}

これは、ページの印刷時に断片化されたボックスに枠線がある場合も同じです。ボックスが 2 ページにまたがっている場合、ボックスの境界線は最初のページで終了し、2 ページ目に新しいボックスが開きます。