Interesting box-decoration-break
記事は上記記事を意訳したものです。
※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。
CSSプロパティbox-decoration-breakについて
この2日間で、非常に興味深いCSSプロパティ「box-decoration-break」に出会いました。詳しく見ていきましょう。
box-decoration-breakの理解
box-decoration-breakは以下の要素から理解できます：
- box - ボックス。div要素などの要素のボックスモデルとして理解できます
- decoration - 要素のスタイルとして理解できます
- break - 改行。word-breakを参考に、改行時の表現として理解できます
つまり、このプロパティは改行が発生した時の要素のスタイル表現を制御するものと理解できます。
MDNによると：box-decoration-break CSSプロパティは、要素が複数の行、列、またはページにまたがる場合に、要素のフラグメントをどのようにレンダリングするかを指定します。一般的な考え方として、box-decoration-breakプロパティは、行の折り返し/改行が発生した時に要素のフラグメントをどのようにレンダリングするかを指定します。
選択できる値は2つのみです：
{ box-decoration-break: slice; // デフォルト値 box-decoration-break: clone; }
例
このプロパティは通常、インライン要素で動作します。以下のような構造があり、ボーダーを追加するとします：
<span>ABCDEFGHIJKLMN</span>
span { border: 2px solid #999; }
これは非常に普通の効果を示します。
次に、上記の行のテキストを改行し、スタイルは変更しないままにします：
<span>ABCD <br/>EFG <br/> HI<br/> JKLMN</span>
結果として、テキストが折り返される時、ボーダーも変化することがわかります。最初と最後の行には3つのボーダーがあり、中央の2行には上下のボーダーのみがあります。4行を組み合わせると、図1のような通常の表示効果に組み立てることができます。
次に、この記事の主役であるbox-decoration-break: cloneを追加します：
span { border: 2px solid #999; box-decoration-break: clone; }
これを適用すると、以下のような結果が得られます。
box-decoration-break: cloneについて
ここまで見てきて、このプロパティの役割をおおよそ理解できます：
box-decoration-break: cloneを使用するインライン要素は、改行がある場合、各行が元の単一行の完全なスタイリングをすべて持ちます。
理解を深めるために、もう一つ例を見てみましょう。以下の構造で、box-decoration-break: cloneを使用する前の2つの効果があります：
<span>各行の <br/>スタイルは <br/> すべて <br/> 完全に<br/> 独立しています</span>
CodePen Demo - box-decoration-break
box-decoration-break: cloneの有効範囲
このプロパティは、すべてのスタイルで使用できるわけではなく、以下のスタイルにのみ有効です：
- background
- border
- border-image
- box-shadow
- clip-path
- margin
- padding
実践的な使用シーン
テキスト選択効果の実現
複数行テキストの中で、特定の段落をハイライトしたい場合があります。このような場合、SPANをPでネストし、SPAN内のテキストを特定の方法で表示できます。
例えば、以下のようなテキストがあります：
<p> The <span>box-decoration-break</span> CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the <span>specified border, padding, and margin wrapping each fragment.</span> The border-radius, border-image, and box-shadow are applied to each <span>fragment independently.</span> </p>
強調が必要なコンテンツを<span>タグで囲み、特定のスタイルを設定し、box-decoration-break: cloneを追加することで、強調するテキストが折り返されても、各部分の強調背景が同じになります：
p { font-size: 22px; line-height: 36px; } span { background-image: linear-gradient(135deg, deeppink, yellowgreen); color: #fff; padding: 2px 10px; border-radius: 50% 3em 50% 3em; box-decoration-break: clone; }
box-decoration-break: cloneを追加しない場合はどうなるでしょうか？改行がある場合、効果は大きく低下します。
CodePen Demo — text-decoration-break text selection effect
各行のテキストに特定のボーダーを設定
各行のコピーに特定のボーダースタイルを設定したい場合があります。
これをどのように実現するか？各行に<p>を設定し、上記のスタイルを<p>に設定することもできます。しかし、テキストの内容が不定で、コンテナの幅も不定の場合はどうでしょうか？
このシナリオでは、box-decoration-breakが有効です。ただし、ここで少しコツがあります。通常、box-decoration-break: cloneはインライン要素でのみ機能します。もし以下のように<p>タグでコピーを囲む場合：
<p> The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the specified border, padding, and margin wrapping each fragment. The border-radius, border-image, and box-shadow are applied to each fragment independently. </p>
box-decoration-break: cloneを<p>に効かせるには、display: inlineを使用することで実現できます。上記の効果を実現するには、以下のコードだけで十分です：
p { display: inline; box-decoration-break: clone; background:linear-gradient(110deg, deeppink 0%, deeppink 98%, transparent 98%, transparent 100%); }
テキストの内容やコンテナの幅がどのように変化しても、完璧にフィットします。
CodePen Demo — box-decoration-break Each line of text with a specific border
トランジションアニメーションとの組み合わせ
上記を踏まえて、box-decoration-breakをトランジション効果やアニメーション効果と組み合わせることも考えられます。
例えば、テキストコンテンツにホバーした際に、表示が必要な一部のテキスト段落がハイライトされるようにすることができます。
Demoをクリックして試してみて、box-decoration-break: cloneを削除すると、効果が大きく低下することがわかります。
CodePen Demo — box-decoration-break transition animation
CodePen Demo — box-decoration-break combined with transition animation
互換性（2024-12-25時点）
Can I Useを見てみましょう。実際にはかなり良好です。
また、この記事で示したコードはbox-decoration-break: cloneですが、CodePenに組み込まれています。実務では、autoprefixerを使用する場合、以下のように記述する必要があるかもしれません：
{ box-decoration-break: clone; -webkit-box-decoration-break: clone; }
