CSS で counter を使って自動連番を振る際の注意点

content プロパティを使って、CSS2.1 の counter による自動連番の挿入っつうマニアック気味なちょっとした実験で気付いたことがあったのでメモ。どうやら、ブラウザによっては、counter のリセットを明示しなくても良いものや、リセットしないと連番にならないものがあるっぽい。

サンプルを作成して実験

下記のような定義リストを用意して、これの dt 要素(記事タイトル部分)の頭に上から連番で番号を振っていきたいと思ったとする。

<dl>
<dt>記事タイトル</dt>
<dd>記事の概要</dd>
<dt>記事タイトル</dt>
<dd>記事の概要</dd>
<dt>記事タイトル</dt>
<dd>記事の概要</dd>
<dt>記事タイトル</dt>
<dd>記事の概要</dd>
</dl>

とりあえず、::before 疑似要素使って content プロパティで counter を生成すりゃ良いのかなって思ったんで、下記のような CSS を適用して counter に対応しているブラウザで確認してみた。

dt::before {
  content: counter(article) ". ";
  counter-increment: article;
}

ブラウザでの確認

現時点で counter に対応しているブラウザは OperaFirefox 1.5 あたりだと思うんで、そこら辺で検証。今ちょっと Firefox 1.5 RC 外しちゃってるんで代わりとして Flock を使用した。

Opera 8.5 での表示
counter-test_opera.png
Flock 0.5pre (Firefox 1.5 と同じ Gecko 1.8b5 ベース)での表示
counter-test_flock.png

counter をリセットをする

Gecko 系の方はうまく連番になってくんない。どうやら、counter のリセットを明示してあげないとダメらしい。

dl {
  counter-reset: article;
}

このように指定する事で、Flock でも無事に連番なってくれた。と言うか、実はこれが正しい挙動で Opera がリセットしなくても連番になるのが正しくないのかもしれない。うーん、ちょっとここらへんは詳しくないんだけど、とりあえず counter をリセットしとくのが無難っつう事か。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/65

Comments

真琴 said:

ざっとしか試していないのですが、これは Gecko の実装が変かと。
今回のように単純にカウントする場合は counter-reset で解決できますが、 番号を入れ子にしようとするとおかしなことになるみたいです。 ( chapter1 - section1 , chapter1 - section2 , chapter2 - section1 , chapter2 - section2... みたいなことをしようとしたら Gecko はエラいことになりました。 )
後で時間があったらサンプル作ってみようかな。

drry said:

example01 では、加算の処理はされているんですが、content によって生成される時点で article は 1 です。

dt { counter-increment: article; }
dt::before { content: counter(article) ". "; }

とすれば Mozilla でも期待する結果が得られます。

真琴さん、入れ子はプロパティ値に counter() ではなく counters() で宣言して階層を重ねる度に counter-reset と counter-increment を繰り返せば簡単に実現できます。

e-luck said:

>>drry さん
なるほど。カウンタの識別子の指定を dt の方にすれば良いのですね。勉強になりました :-)

drry said:

But, リストにおいては example02 のように親要素で counter-reset するのが模範のようですね。失礼しました。