:first-letter擬似要素とかCSS Tipsとか

2006年07月23日（日）コメント:1 トラックバック:1

:first-letter擬似要素仕様

5.12.2 The :first-letter pseudo-element（CSS2.1 W3C Working Draft）
:first-letter疑似要素（CSS2リファレンス）

:first-letter擬似要素に適用できるプロパティの各ブラウザの対応状況が知りたい。とくにline-height。たとえば、フロートさせた:first-letter擬似要素にborderとline-heightと背景色を指定したとき、 IE6, Firefox1.5, Opera9.0ですべて異なる表示結果になった。自分の予想（こうなるであろうという想像）と同じだったのはOpera。逆にもっとも予想とかけ離れていたのはFirefoxだった。

テクニック

うまくやれば縦横（ある程度まで）可変の角丸ボックスが作れますね。想定するHTMLは以下のような感じ。

<div class="section">
<h2></h2>
<ul>
<li></li>
<li></li>
...
</ul>
</div>

div（右下）
h2:first-letter（左上）
h2（右上）
ul（左下）

もちろん横幅固定ならもっと簡単にできます（ADP: 角を丸くしたいネタ (1)参照）。

おまけ。CSS Tips.

CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件
CSS Tips（メモランダム@脱初心者）

自分の書いた記事がいくつか紹介されてるんですが、clearの解説はそろそろ改訂したいなぁ。CSS2では「上マージンを増加させる」とされていましたが、 CSS2.1では「もともとの上マージンでは回り込みの解除に不足である場合に『クリアランス』と呼ばれる余白を設ける」ことになったようです（セオリー・オブ・スタイルシートが詳しい）。