white-space プロパティの使用を止めた

投稿

CSS に関する考え方のひとつに「ショートハンドを乱用しない」があります。

いわゆるリセットスタイルや、ページ全体に対する指定（:root や body に指定するプロパティ）などはショートハンドを許容しても問題はなく、一律に禁止すべきとまでは言いませんが、継承が関わる部分ではバグの温床ともなり得るため注意が必要ではあります。

また使用箇所だけでなくプロパティによっても許容ラインは変わってくるでしょう。background や font は値の指定順序や省略可否のルールが複雑で要注意な一方、margin-* や padding-* あたりは気軽に使ってもさほど問題はありません。あくまで個人的な感覚ですが、ショートハンドを避けるがために margin-inline: auto を margin-inline-start: auto; margin-inline-end: auto と書くのは行き過ぎだと思います。その理由は無駄に長いことだけではなく、中央揃えの意図を伝えるには前者の方がより明確だからです。CSS はあくまでユーザーに対する情報の伝わりやすさが最重要です。

もうひとつ注意したいのは、CSS の進化によって昔はそうでなかったプロパティがショートハンドに変わるケースがあることです。基本的に後方互換性は確保されますから、ブラウザのバージョンアップによってレイアウトが崩れることは起こらないでしょうが、常に最新動向を探っていないと自分ルールをいつの間にか犯していたなんてことにはなり得ます。

そのようなものの中に white-space プロパティがあります。この値は CSS Text Module Level 3(W3C) では 

normal | pre | nowrap | pre-wrap | break-spaces | pre-line

でしたが、CSS Text Module Level 4(W3C) では 

normal | pre | pre-wrap | pre-line | <'white-space-collapse'> || <'text-wrap-mode'> || <'white-space-trim'>

に変わっています。すなわち white-space プロパティは最新の仕様では white-space-collapse, text-wrap-mode, white-space-trim の3つのプロパティのショートハンドとなっているのです。

実際の使用例として <pre> 要素のデフォルトスタイルは white-space: pre なので、横スクロールのできない印刷時にそのままだと文字が切れてしまいます。そこで以下のように制作者スタイルシートで上書きすることが一般に行われています。

pre {
  @media print {
    white-space: pre-wrap;
  }
}

しかしこれは最新のブラウザではショートハンド扱いになってしまうので、以下のように書き換えることができます。

pre {
  @media print {
    text-wrap-mode: wrap;
  }
}

text-wrap-mode の対応ブラウザは Firefox 124+, Safari 17.4+, Chrome 130+ なので、古い iPhone など非サポートの環境もまだ若干残っているのですが、そろそろ実サイトに導入しても良い頃合いでしょう。

本ブログの制作者スタイルシートでは white-space プロパティ自体を一律禁止しても問題なさそうだったので（古い iPhone 環境でもそれほどひどい状態にはならなさそうなので）、Stylelint の property-disallowed-list ルール(stylelint.io)で white-space を不許可リストに加えたうえですべて置き換えました(GitHub)。