`text-wrap: pretty` をプログレッシブエンハンスメントで適用するCSSフォールバック対応

Firefoxで text-wrap: pretty が未サポートなために発生していたテキストのオーバーフローバグを、@supports を使ったプログレッシブエンハンスメントで修正しました。

背景

native.css の p 要素に対して text-wrap: pretty が無条件に指定されていたことで、Firefoxでテキストのオーバーフローが発生していました。#2331 では、Firefoxで /docs/patterns/layouts/app-settings/ の設定グリッドを表示した際に、テキストが意図しない形ではみ出す現象が報告されています。

text-wrap: pretty は段落末尾の孤立語（orphan）を避けるなど、より洗練されたテキスト折り返しを行うCSS値ですが、現時点でFirefoxが未サポートであり、未知のプロパティ値として無視されます。その結果、折り返し挙動がブラウザのデフォルトに落ちるのではなく、表示崩れを引き起こしていました。

技術的な変更

@supports アットルールを使い、text-wrap: pretty をサポートするブラウザにのみ適用するプログレッシブエンハンスメントの構造に変更されました。

変更前:

p {
  text-wrap: pretty;
}

変更後:

p {
  text-wrap: wrap;
}
@supports (text-wrap: pretty) {
  p {
    text-wrap: pretty;
  }
}

ベースラインを text-wrap: wrap とすることで、全ブラウザで安定した折り返し動作を保証しています。MDNによれば wrap は pretty に近い挙動を提供するとされており、@supports で機能検出できるブラウザには引き続き pretty が適用されます。

設計判断

@supports によるプログレッシブエンハンスメントが採用されました。

単純に text-wrap: wrap へ戻すだけでも問題は解消できますが、この実装では pretty に対応済みのブラウザ（ChromeやSafariなど）での体験を損なわないよう、機能検出を組み合わせた構成が選択されています。ベースライン値としての wrap とエンハンスメントとしての pretty を明確に分離することで、将来Firefoxが pretty をサポートした際にも追加変更なく自動的に適用される設計です。

まとめ

@supports を活用したこの変更は、単なるバグ修正を超えてCSSの機能検出パターンの好例となっています。ベースライン動作を明示的に宣言した上で段階的に拡張する構造は、ブラウザ互換性の問題を将来にわたって自己解決する堅牢なアプローチです。