br要素の実装

もっと簡単に言うと、

*:before,
*:after { content : ""; }

上のようなスタイル指定がされているページをOperaで閲覧すると、<br>及び<br />が正しく反映されないということ。

HTMLbr要素はbr:before{content:"\A";}によって実装されているので、それはUAの妥当なレンダリングです。em{font-style:normal}で強調部分が斜体にならなくなるのと全く同じ。

これってのはどこかで文書化されているものなんだけれど、ぱっと見つからなかったのでとりあえず事実だけ書き留めておきます。あとで見つけたら文献へのリンクを追加しよう……。

このような実装を行うよりどころはCSS仕様書の附属書でした。冒頭でこれは情報であって規格ではないと強調されていますが、同時に開発者へbr:before{content:"\A"}を含むこのスタイルをデフォルトとして用いることを推奨しています。

気晴らしにもう少し調べてみた。下のようなソースで確かめてみた。

<html><head>
<title>test</title><style>
br.a{content:"" !important}
br.b:before{content:"" !important}
br.c:after{content:"" !important}
</style></head><body>
<p>ここにAがあって<br class="a"/>ここにBがあって<br class="b"/>ここにCがある<br class="c"/>けど、改行されるのはどこ?</p>
</body></html>

Opera9.02はBとCでのみ改行する。Operaは改行をbr{content:"\A"}で実現しているようだ。……ということは、*:before,*:after{content:""}の指定の影響など何もうけるはずがない、という事になる。Operaのバグだね、これ。

同じソースをFirefoxで描画すると3カ所全てで改行されます。どうやらbr要素のレンダリングにスタイルシートの内容生成を用いていないようです。ちなみにIEcontentプロパティを知りませんから比較に値しません。

……と締めくくろうと思ったのですが、愉快な現象に遭遇。先ほどのソースをユーザモードで読み込んでみる。もちろん文書中に記述されたスタイルは適応されないから、3カ所全てで改行される。続いて作成者モードに切り替える。前述の通り、BとCで改行される。そしてもう一度ユーザモードに戻すとあら不思議、今度はAでだけ改行されて、BとCでは改行されない。

Operaの内容生成の処理がおかしいのは確かだ。

CSS2.1からは初期値がcontent:normalになるってな事を思い出し、こちらも試してみた。先ほどのソース中のcontent:""content:normalに置き換えた結果、今度はAでのみ改行され、BやCでは改行されない。制作者モードで読み込んだ後にユーザモードへ切り替えた場合も同様、Aでのみ改行される。

念のためcontentプロパティに不正な値を与えてみたが、こちらはきちんと無視し、モードを問わず3カ所全てで改行された。

制作者スタイルシートによってブラウザスタイルシートの生成内容が一度上書きされると元に戻せない……というバグは確実にありそうな気がする。しかししたけれど、それだけでは説明できない。

テストケースを作っているのにリンクしていない事に今更気づいたのでリンクしておく。手元のOpera 9.2で再度試してみたところ、愉快な現象は解消されていた。しかしユーザモードと作成者モードでやはり改行される位置が違う。

ユーザモード
Aで改行される
作成者モード
Bで改行される

やはり謎の実装。

この文書の諸情報

この文書の永続的URI
http://kuruman.org/diary/2006/11/04/br
公開日時
2006年11月4日 午後11時32分38秒
最終更新日時
2007年4月30日 午後1時39分42秒
ヘルプ
フィードバックについて
RSS Feedによる更新情報
http://kuruman.org/note/index.xml
This document is licensed under a CC : by-nc. 2006-2007, Kuruma; FOAF description.