もずはっく日記(2009年6月)

<WBR>ハックと決別を
初回投稿日時: 2009年06月21日18時14分56秒
最終更新日時: 2009年06月21日18時18分48秒
カテゴリ: CSS Firefox Google Chrome HTML Mozilla Core Safari
SNS: Tweet (list)

Fx2.0(Gecko 1.8.1)まではURL等の長い文字列が一つの単語として認識され、改行されずにブロックからはみ出す、という問題がありましたが、Fx3.0(Gecko1.9)で解決されました。そして、現在、Fx2.0系列は既にサポートを終了し、セキュリティアップデートを提供していません。また、Fx2.0系のユーザにはメジャーアップデートの案内も通知済みです。

特殊なURLを表示するケース(例えば、ドメイン名やパス内のディレクトリ名やファイル名が異常に長い、異様に幅の狭いところに表示しようとしている)を除いて、URLがブロックからはみ出す心配は現役のGecko系ブラウザでは問題なくなっています。

ですが、その後で勢力を伸ばしてきたWebKitではURLの改行が駄目駄目なようです。-や、?で改行する程度のみのようです。しかし、幸運にもWebKitは既にword-breakプロパティをサポートしているので、word-break: break-all;を利用すれば問題無くなりそうです。

そう、現役のメジャーなブラウザでは既に<WBR>ハックを使う必要は既に無くなっています。動的なコンテンツであれば、対WebKit用に、URLな文字列を自動リンクする際に、

<a href="http://example.com/" style="word-break: break-all;">http://example.com/</a>

としておけば、醜い<WBR>ハックと決別することができます(決して、全文には指定しないでください。日本語の禁則処理も行われなくなるので、読みにくくなるだけです)。

<WBR>ハックは、

1. 転送容量が肥大化する
2. W3Cで合意の得られなかったレガシーな空要素なので、階層の深い、滅茶苦茶なDOMツリーが構築される可能性がある
3. 各WBR要素毎に要素ノードが作られる
4. 分断されたURLの欠片それぞれが独立したテキストノードになってしまう

等、問題が非常に大きいので是非、Webデザイナの方は<WBR>ハックの除去を(可能なら)検討してみてください。